1. 首页
  2. 编程与技术

echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）

发布于 2015-12-28 15:17:13 | 950 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程，程序狗速度看过来！

ECharts Javascript免费图表库

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

1:照常先来几张图 看效果 

2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果

上 案例图和代码

效果图 ：

代码： 

<style type="text/css">
    #c_chart {
        width: 100%;
        height: 600px;
    }
</style>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
    var dataMap = {};
    function dataFormatter(obj) {
        var pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'];
        // AreaList
        var temp;
        var max = 0;
        for (var year = 2002; year <= 2011; year++) {
            temp = obj[year];
            for (var i = 0, l = temp.length; i < l; i++) {
                max = Math.max(max, temp[i]);
                obj[year][i] = {
                    name: pList[i],
                    value: temp[i]
                }
            }
            obj[year + 'max'] = Math.floor(max / 100) * 100;
        }
        return obj;
    }
 
    function dataMix(list) {
        var mixData = {};
        for (var i = 0, l = list.length; i < l; i++) {
            for (var key in list[i]) {
                if (list[i][key] instanceof Array) {
                    mixData[key] = mixData[key] || [];
                    for (var j = 0, k = list[i][key].length; j < k; j++) {
                        mixData[key][j] = mixData[key][j]
                                          || { name: list[i][key][j].name, value: [] };
                        mixData[key][j].value.push(list[i][key][j].value);
                    }
                }
            }
        }
        return mixData;
    }
    dataMap.dataGDP = dataFormatter({
        //max : 60000,
        2011: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7, 10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65, 17560.18, 11702.82, 45361.85, 26931.03, 19632.26, 19669.56, 53210.28, 11720.87, 2522.66, 10011.37, 21026.68, 5701.84, 8893.12, 605.83, 12512.3, 5020.37, 1670.44, 2102.21, 6610.05],
        2010: [14113.58, 9224.46, 20394.26, 9200.86, 11672, 18457.27, 8667.58, 10368.6, 17165.98, 41425.48, 27722.31, 12359.33, 14737.12, 9451.26, 39169.92, 23092.36, 15967.61, 16037.96, 46013.06, 9569.85, 2064.5, 7925.58, 17185.48, 4602.16, 7224.18, 507.46, 10123.48, 4120.75, 1350.43, 1689.65, 5437.47],
        2009: [12153.03, 7521.85, 17235.48, 7358.31, 9740.25, 15212.49, 7278.75, 8587, 15046.45, 34457.3, 22990.35, 10062.82, 12236.53, 7655.18, 33896.65, 19480.46, 12961.1, 13059.69, 39482.56, 7759.16, 1654.21, 6530.01, 14151.28, 3912.68, 6169.75, 441.36, 8169.8, 3387.56, 1081.27, 1353.31, 4277.05],
        2008: [11115, 6719.01, 16011.97, 7315.4, 8496.2, 13668.58, 6426.1, 8314.37, 14069.87, 30981.98, 21462.69, 8851.66, 10823.01, 6971.05, 30933.28, 18018.53, 11328.92, 11555, 36796.71, 7021, 1503.06, 5793.66, 12601.23, 3561.56, 5692.12, 394.85, 7314.58, 3166.82, 1018.62, 1203.92, 4183.21],
        2007: [9846.81, 5252.76, 13607.32, 6024.45, 6423.18, 11164.3, 5284.69, 7104, 12494.01, 26018.48, 18753.73, 7360.92, 9248.53, 5800.25, 25776.91, 15012.46, 9333.4, 9439.6, 31777.01, 5823.41, 1254.17, 4676.13, 10562.39, 2884.11, 4772.52, 341.43, 5757.29, 2703.98, 797.35, 919.11, 3523.16],
        2006: [8117.78, 4462.74, 11467.6, 4878.61, 4944.25, 9304.52, 4275.12, 6211.8, 10572.24, 21742.05, 15718.47, 6112.5, 7583.85, 4820.53, 21900.19, 12362.79, 7617.47, 7688.67, 26587.76, 4746.16, 1065.67, 3907.23, 8690.24, 2338.98, 3988.14, 290.76, 4743.61, 2277.35, 648.5, 725.9, 3045.26],
        2005: [6969.52, 3905.64, 10012.11, 4230.53, 3905.03, 8047.26, 3620.27, 5513.7, 9247.66, 18598.69, 13417.68, 5350.17, 6554.69, 4056.76, 18366.87, 10587.42, 6590.19, 6596.1, 22557.37, 3984.1, 918.75, 3467.72, 7385.1, 2005.42, 3462.73, 248.8, 3933.72, 1933.98, 543.32, 612.61, 2604.19],
        2004: [6033.21, 3110.97, 8477.63, 3571.37, 3041.07, 6672, 3122.01, 4750.6, 8072.83, 15003.6, 11648.7, 4759.3, 5763.35, 3456.7, 15021.84, 8553.79, 5633.24, 5641.94, 18864.62, 3433.5, 819.66, 3034.58, 6379.63, 1677.8, 3081.91, 220.34, 3175.58, 1688.49, 466.1, 537.11, 2209.09],
        2003: [5007.21, 2578.03, 6921.29, 2855.23, 2388.38, 6002.54, 2662.08, 4057.4, 6694.23, 12442.87, 9705.02, 3923.11, 4983.67, 2807.41, 12078.15, 6867.7, 4757.45, 4659.99, 15844.64, 2821.11, 713.96, 2555.72, 5333.09, 1426.34, 2556.02, 185.09, 2587.72, 1399.83, 390.2, 445.36, 1886.35],
        2002: [4315, 2150.76, 6018.28, 2324.8, 1940.94, 5458.22, 2348.54, 3637.2, 5741.03, 10606.85, 8003.67, 3519.72, 4467.55, 2450.48, 10275.5, 6035.48, 4212.82, 4151.54, 13502.42, 2523.73, 642.73, 2232.86, 4725.01, 1243.43, 2312.82, 162.04, 2253.39, 1232.03, 340.65, 377.16, 1612.6]
    });
 
    dataMap.dataPI = dataFormatter({
        //max : 4000,
        2011: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24, 1391.07, 3973.85, 3512.24, 2569.3, 2768.03, 2665.2, 2047.23, 659.23, 844.52, 2983.51, 726.22, 1411.01, 74.47, 1220.9, 678.75, 155.08, 184.14, 1139.03],
        2010: [124.36, 145.58, 2562.81, 554.48, 1095.28, 1631.08, 1050.15, 1302.9, 114.15, 2540.1, 1360.56, 1729.02, 1363.67, 1206.98, 3588.28, 3258.09, 2147, 2325.5, 2286.98, 1675.06, 539.83, 685.38, 2482.89, 625.03, 1108.38, 68.72, 988.45, 599.28, 134.92, 159.29, 1078.63],
        2009: [118.29, 128.85, 2207.34, 477.59, 929.6, 1414.9, 980.57, 1154.33, 113.82, 2261.86, 1163.08, 1495.45, 1182.74, 1098.66, 3226.64, 2769.05, 1795.9, 1969.69, 2010.27, 1458.49, 462.19, 606.8, 2240.61, 550.27, 1067.6, 63.88, 789.64, 497.05, 107.4, 127.25, 759.74],
        2008: [112.83, 122.58, 2034.59, 313.58, 907.95, 1302.02, 916.72, 1088.94, 111.8, 2100.11, 1095.96, 1418.09, 1158.17, 1060.38, 3002.65, 2658.78, 1780, 1892.4, 1973.05, 1453.75, 436.04, 575.4, 2216.15, 539.19, 1020.56, 60.62, 753.72, 462.27, 105.57, 118.94, 691.07],
        2007: [101.26, 110.19, 1804.72, 311.97, 762.1, 1133.42, 783.8, 915.38, 101.84, 1816.31, 986.02, 1200.18, 1002.11, 905.77, 2509.14, 2217.66, 1378, 1626.48, 1695.57, 1241.35, 361.07, 482.39, 2032, 446.38, 837.35, 54.89, 592.63, 387.55, 83.41, 97.89, 628.72],
        2006: [88.8, 103.35, 1461.81, 276.77, 634.94, 939.43, 672.76, 750.14, 93.81, 1545.05, 925.1, 1011.03, 865.98, 786.14, 2138.9, 1916.74, 1140.41, 1272.2, 1532.17, 1032.47, 323.48, 386.38, 1595.48, 382.06, 724.4, 50.9, 484.81, 334, 67.55, 79.54, 527.8],
        2005: [88.68, 112.38, 1400, 262.42, 589.56, 882.41, 625.61, 684.6, 90.26, 1461.51, 892.83, 966.5, 827.36, 727.37, 1963.51, 1892.01, 1082.13, 1100.65, 1428.27, 912.5, 300.75, 463.4, 1481.14, 368.94, 661.69, 48.04, 435.77, 308.06, 65.34, 72.07, 509.99],
        2004: [87.36, 105.28, 1370.43, 276.3, 522.8, 798.43, 568.69, 605.79, 83.45, 1367.58, 814.1, 950.5, 786.84, 664.5, 1778.45, 1649.29, 1020.09, 1022.45, 1248.59, 817.88, 278.76, 428.05, 1379.93, 334.5, 607.75, 44.3, 387.88, 286.78, 60.7, 65.33, 461.26],
        2003: [84.11, 89.91, 1064.05, 215.19, 420.1, 615.8, 488.23, 504.8, 81.02, 1162.45, 717.85, 749.4, 692.94, 560, 1480.67, 1198.7, 798.35, 886.47, 1072.91, 658.78, 244.29, 339.06, 1128.61, 298.69, 494.6, 40.7, 302.66, 237.91, 48.47, 55.63, 412.9],
        2002: [82.44, 84.21, 956.84, 197.8, 374.69, 590.2, 446.17, 474.2, 79.68, 1110.44, 685.2, 783.66, 664.78, 535.98, 1390, 1288.36, 707, 847.25, 1015.08, 601.99, 222.89, 317.87, 1047.95, 281.1, 463.44, 39.75, 282.21, 215.51, 47.31, 52.95, 305]
    });
 
    dataMap.dataSI = dataFormatter({
        //max : 26600,
        2011: [3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41, 7927.89, 25203.28, 16555.58, 8309.38, 9069.2, 6390.55, 24017.11, 15427.08, 9815.94, 9361.99, 26447.38, 5675.32, 714.5, 5543.04, 11029.13, 2194.33, 3780.32, 208.79, 6935.59, 2377.83, 975.18, 1056.15, 3225.9],
        2010: [3388.38, 4840.23, 10707.68, 5234, 6367.69, 9976.82, 4506.31, 5025.15, 7218.32, 21753.93, 14297.93, 6436.62, 7522.83, 5122.88, 21238.49, 13226.38, 7767.24, 7343.19, 23014.53, 4511.68, 571, 4359.12, 8672.18, 1800.06, 3223.49, 163.92, 5446.1, 1984.97, 744.63, 827.91, 2592.15],
        2009: [2855.55, 3987.84, 8959.83, 3993.8, 5114, 7906.34, 3541.92, 4060.72, 6001.78, 18566.37, 11908.49, 4905.22, 6005.3, 3919.45, 18901.83, 11010.5, 6038.08, 5687.19, 19419.7, 3381.54, 443.43, 3448.77, 6711.87, 1476.62, 2582.53, 136.63, 4236.42, 1527.24, 575.33, 662.32, 1929.59],
        2008: [2626.41, 3709.78, 8701.34, 4242.36, 4376.19, 7158.84, 3097.12, 4319.75, 6085.84, 16993.34, 11567.42, 4198.93, 5318.44, 3554.81, 17571.98, 10259.99, 5082.07, 5028.93, 18502.2, 3037.74, 423.55, 3057.78, 5823.39, 1370.03, 2452.75, 115.56, 3861.12, 1470.34, 557.12, 609.98, 2070.76],
        2007: [2509.4, 2892.53, 7201.88, 3454.49, 3193.67, 5544.14, 2475.45, 3695.58, 5571.06, 14471.26, 10154.25, 3370.96, 4476.42, 2975.53, 14647.53, 8282.83, 4143.06, 3977.72, 16004.61, 2425.29, 364.26, 2368.53, 4648.79, 1124.79, 2038.39, 98.48, 2986.46, 1279.32, 419.03, 455.04, 1647.55],
        2006: [2191.43, 2457.08, 6110.43, 2755.66, 2374.96, 4566.83, 1915.29, 3365.31, 4969.95, 12282.89, 8511.51, 2711.18, 3695.04, 2419.74, 12574.03, 6724.61, 3365.08, 3187.05, 13469.77, 1878.56, 308.62, 1871.65, 3775.14, 967.54, 1705.83, 80.1, 2452.44, 1043.19, 331.91, 351.58, 1459.3],
        2005: [2026.51, 2135.07, 5271.57, 2357.04, 1773.21, 3869.4, 1580.83, 2971.68, 4381.2, 10524.96, 7164.75, 2245.9, 3175.92, 1917.47, 10478.62, 5514.14, 2852.12, 2612.57, 11356.6, 1510.68, 240.83, 1564, 3067.23, 821.16, 1426.42, 63.52, 1951.36, 838.56, 264.61, 281.05, 1164.79],
        2004: [1853.58, 1685.93, 4301.73, 1919.4, 1248.27, 3061.62, 1329.68, 2487.04, 3892.12, 8437.99, 6250.38, 1844.9, 2770.49, 1566.4, 8478.69, 4182.1, 2320.6, 2190.54, 9280.73, 1253.7, 205.6, 1376.91, 2489.4, 681.5, 1281.63, 52.74, 1553.1, 713.3, 211.7, 244.05, 914.47],
        2003: [1487.15, 1337.31, 3417.56, 1463.38, 967.49, 2898.89, 1098.37, 2084.7, 3209.02, 6787.11, 5096.38, 1535.29, 2340.82, 1204.33, 6485.05, 3310.14, 1956.02, 1777.74, 7592.78, 984.08, 175.82, 1135.31, 2014.8, 569.37, 1047.66, 47.64, 1221.17, 572.02, 171.92, 194.27, 719.54],
        2002: [1249.99, 1069.08, 2911.69, 1134.31, 754.78, 2609.85, 943.49, 1843.6, 2622.45, 5604.49, 4090.48, 1337.04, 2036.97, 941.77, 5184.98, 2768.75, 1709.89, 1523.5, 6143.4, 846.89, 148.88, 958.87, 1733.38, 481.96, 934.88, 32.72, 1007.56, 501.69, 144.51, 153.06, 603.15]
    });
 
    dataMap.dataTI = dataFormatter({
        //max : 25000,
        2011: [12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09, 11142.86, 20842.21, 14180.23, 4975.96, 6878.74, 3921.2, 17370.89, 7991.72, 7247.02, 7539.54, 24097.7, 3998.33, 1148.93, 3623.81, 7014.04, 2781.29, 3701.79, 322.57, 4355.81, 1963.79, 540.18, 861.92, 2245.12],
        2010: [10600.84, 4238.65, 7123.77, 3412.38, 4209.03, 6849.37, 3111.12, 4040.55, 9833.51, 17131.45, 12063.82, 4193.69, 5850.62, 3121.4, 14343.14, 6607.89, 6053.37, 6369.27, 20711.55, 3383.11, 953.67, 2881.08, 6030.41, 2177.07, 2892.31, 274.82, 3688.93, 1536.5, 470.88, 702.45, 1766.69],
        2009: [9179.19, 3405.16, 6068.31, 2886.92, 3696.65, 5891.25, 2756.26, 3371.95, 8930.85, 13629.07, 9918.78, 3662.15, 5048.49, 2637.07, 11768.18, 5700.91, 5127.12, 5402.81, 18052.59, 2919.13, 748.59, 2474.44, 5198.8, 1885.79, 2519.62, 240.85, 3143.74, 1363.27, 398.54, 563.74, 1587.72],
        2008: [8375.76, 2886.65, 5276.04, 2759.46, 3212.06, 5207.72, 2412.26, 2905.68, 7872.23, 11888.53, 8799.31, 3234.64, 4346.4, 2355.86, 10358.64, 5099.76, 4466.85, 4633.67, 16321.46, 2529.51, 643.47, 2160.48, 4561.69, 1652.34, 2218.81, 218.67, 2699.74, 1234.21, 355.93, 475, 1421.38],
        2007: [7236.15, 2250.04, 4600.72, 2257.99, 2467.41, 4486.74, 2025.44, 2493.04, 6821.11, 9730.91, 7613.46, 2789.78, 3770, 1918.95, 8620.24, 4511.97, 3812.34, 3835.4, 14076.83, 2156.76, 528.84, 1825.21, 3881.6, 1312.94, 1896.78, 188.06, 2178.2, 1037.11, 294.91, 366.18, 1246.89],
        2006: [5837.55, 1902.31, 3895.36, 1846.18, 1934.35, 3798.26, 1687.07, 2096.35, 5508.48, 7914.11, 6281.86, 2390.29, 3022.83, 1614.65, 7187.26, 3721.44, 3111.98, 3229.42, 11585.82, 1835.12, 433.57, 1649.2, 3319.62, 989.38, 1557.91, 159.76, 1806.36, 900.16, 249.04, 294.78, 1058.16],
        2005: [4854.33, 1658.19, 3340.54, 1611.07, 1542.26, 3295.45, 1413.83, 1857.42, 4776.2, 6612.22, 5360.1, 2137.77, 2551.41, 1411.92, 5924.74, 3181.27, 2655.94, 2882.88, 9772.5, 1560.92, 377.17, 1440.32, 2836.73, 815.32, 1374.62, 137.24, 1546.59, 787.36, 213.37, 259.49, 929.41],
        2004: [4092.27, 1319.76, 2805.47, 1375.67, 1270, 2811.95, 1223.64, 1657.77, 4097.26, 5198.03, 4584.22, 1963.9, 2206.02, 1225.8, 4764.7, 2722.4, 2292.55, 2428.95, 8335.3, 1361.92, 335.3, 1229.62, 2510.3, 661.8, 1192.53, 123.3, 1234.6, 688.41, 193.7, 227.73, 833.36],
        2003: [3435.95, 1150.81, 2439.68, 1176.65, 1000.79, 2487.85, 1075.48, 1467.9, 3404.19, 4493.31, 3890.79, 1638.42, 1949.91, 1043.08, 4112.43, 2358.86, 2003.08, 1995.78, 7178.94, 1178.25, 293.85, 1081.35, 2189.68, 558.28, 1013.76, 96.76, 1063.89, 589.91, 169.81, 195.46, 753.91],
        2002: [2982.57, 997.47, 2149.75, 992.69, 811.47, 2258.17, 958.88, 1319.4, 3038.9, 3891.92, 3227.99, 1399.02, 1765.8, 972.73, 3700.52, 1978.37, 1795.93, 1780.79, 6343.94, 1074.85, 270.96, 956.12, 1943.68, 480.37, 914.5, 89.56, 963.62, 514.83, 148.83, 171.14, 704.5]
    });
 
    dataMap.dataEstate = dataFormatter({
        //max : 3600,
        2011: [1074.93, 411.46, 918.02, 224.91, 384.76, 876.12, 238.61, 492.1, 1019.68, 2747.89, 1677.13, 634.92, 911.16, 402.51, 1838.14, 987, 634.67, 518.04, 3321.31, 465.68, 208.71, 396.28, 620.62, 160.3, 222.31, 17.44, 398.03, 134.25, 29.05, 79.01, 176.22],
        2010: [1006.52, 377.59, 697.79, 192, 309.25, 733.37, 212.32, 391.89, 1002.5, 2600.95, 1618.17, 532.17, 679.03, 340.56, 1622.15, 773.23, 564.41, 464.21, 2813.95, 405.79, 188.33, 266.38, 558.56, 139.64, 223.45, 14.54, 315.95, 110.02, 25.41, 60.53, 143.44],
        2009: [1062.47, 308.73, 612.4, 173.31, 286.65, 605.27, 200.14, 301.18, 1237.56, 2025.39, 1316.84, 497.94, 656.61, 305.9, 1329.59, 622.98, 546.11, 400.11, 2470.63, 348.98, 121.76, 229.09, 548.14, 136.15, 205.14, 13.28, 239.92, 101.37, 23.05, 47.56, 115.23],
        2008: [844.59, 227.88, 513.81, 166.04, 273.3, 500.81, 182.7, 244.47, 939.34, 1626.13, 1052.03, 431.27, 506.98, 281.96, 1104.95, 512.42, 526.88, 340.07, 2057.45, 282.96, 95.6, 191.21, 453.63, 104.81, 195.48, 15.08, 193.27, 93.8, 19.96, 38.85, 89.79],
        2007: [821.5, 183.44, 467.97, 134.12, 191.01, 410.43, 153.03, 225.81, 958.06, 1365.71, 981.42, 366.57, 511.5, 225.96, 953.69, 447.44, 409.65, 301.8, 2029.77, 239.45, 67.19, 196.06, 376.84, 93.19, 193.59, 13.24, 153.98, 83.52, 16.98, 29.49, 91.28],
        2006: [658.3, 156.64, 397.14, 117.01, 136.5, 318.54, 131.01, 194.7, 773.61, 1017.91, 794.41, 281.98, 435.22, 184.67, 786.51, 348.7, 294.73, 254.81, 1722.07, 192.2, 44.45, 158.2, 336.2, 80.24, 165.92, 11.92, 125.2, 73.21, 15.17, 25.53, 68.9],
        2005: [493.73, 122.67, 330.87, 106, 98.75, 256.77, 112.29, 163.34, 715.97, 799.73, 688.86, 231.66, 331.8, 171.88, 664.9, 298.19, 217.17, 215.63, 1430.37, 165.05, 38.2, 143.88, 286.23, 76.38, 148.69, 10.02, 108.62, 63.78, 14.1, 22.97, 55.79],
        2004: [436.11, 106.14, 231.08, 95.1, 73.81, 203.1, 97.93, 137.74, 666.3, 534.17, 587.83, 188.28, 248.44, 167.2, 473.27, 236.44, 204.8, 191.5, 1103.75, 122.52, 30.64, 129.12, 264.3, 68.3, 116.54, 5.8, 95.9, 56.84, 13, 20.78, 53.55],
        2003: [341.88, 92.31, 185.19, 78.73, 61.05, 188.49, 91.99, 127.2, 487.82, 447.47, 473.16, 162.63, 215.84, 138.02, 418.21, 217.58, 176.8, 186.49, 955.66, 100.93, 25.14, 113.69, 231.72, 59.86, 103.79, 4.35, 83.9, 48.09, 11.41, 16.85, 47.84],
        2002: [298.02, 73.04, 140.89, 65.83, 51.48, 130.94, 76.11, 118.7, 384.86, 371.09, 360.63, 139.18, 188.09, 125.27, 371.13, 199.31, 145.17, 165.29, 808.16, 82.83, 21.45, 90.48, 210.82, 53.49, 95.68, 3.42, 77.68, 41.52, 9.74, 13.46, 43.04]
    });
 
    dataMap.dataFinancial = dataFormatter({
        //max : 3200,
        2011: [2215.41, 756.5, 746.01, 519.32, 447.46, 755.57, 207.65, 370.78, 2277.4, 2600.11, 2730.29, 503.85, 862.41, 357.44, 1640.41, 868.2, 674.57, 501.09, 2916.13, 445.37, 105.24, 704.66, 868.15, 297.27, 456.23, 31.7, 432.11, 145.05, 62.56, 134.18, 288.77],
        2010: [1863.61, 572.99, 615.42, 448.3, 346.44, 639.27, 190.12, 304.59, 1950.96, 2105.92, 2326.58, 396.17, 767.58, 241.49, 1361.45, 697.68, 561.27, 463.16, 2658.76, 384.53, 78.12, 496.56, 654.7, 231.51, 375.08, 27.08, 384.75, 100.54, 54.53, 97.87, 225.2],
        2009: [1603.63, 461.2, 525.67, 361.64, 291.1, 560.2, 180.83, 227.54, 1804.28, 1596.98, 1899.33, 359.6, 612.2, 165.1, 1044.9, 499.92, 479.11, 402.57, 2283.29, 336.82, 65.73, 389.97, 524.63, 194.44, 351.74, 23.17, 336.21, 88.27, 45.63, 75.54, 198.87],
        2008: [1519.19, 368.1, 420.74, 290.91, 219.09, 455.07, 147.24, 177.43, 1414.21, 1298.48, 1653.45, 313.81, 497.65, 130.57, 880.28, 413.83, 393.05, 334.32, 1972.4, 249.01, 47.33, 303.01, 411.14, 151.55, 277.66, 22.42, 287.16, 72.49, 36.54, 64.8, 171.97],
        2007: [1302.77, 288.17, 347.65, 218.73, 148.3, 386.34, 126.03, 155.48, 1209.08, 1054.25, 1251.43, 223.85, 385.84, 101.34, 734.9, 302.31, 337.27, 260.14, 1705.08, 190.73, 34.43, 247.46, 359.11, 122.25, 168.55, 11.51, 231.03, 61.6, 27.67, 51.05, 149.22],
        2006: [982.37, 186.87, 284.04, 169.63, 108.21, 303.41, 100.75, 74.17, 825.2, 653.25, 906.37, 166.01, 243.9, 79.75, 524.94, 219.72, 174.99, 204.72, 899.91, 129.14, 16.37, 213.7, 299.5, 89.43, 143.62, 6.44, 152.25, 50.51, 23.69, 36.99, 99.25],
        2005: [840.2, 147.4, 213.47, 135.07, 72.52, 232.85, 83.63, 35.03, 675.12, 492.4, 686.32, 127.05, 186.12, 69.55, 448.36, 181.74, 127.32, 162.37, 661.81, 91.93, 13.16, 185.18, 262.26, 73.67, 130.5, 7.57, 127.58, 44.73, 20.36, 32.25, 80.34],
        2004: [713.79, 136.97, 209.1, 110.29, 55.89, 188.04, 77.17, 32.2, 612.45, 440.5, 523.49, 94.1, 171, 65.1, 343.37, 170.82, 118.85, 118.64, 602.68, 74, 11.56, 162.38, 236.5, 60.3, 118.4, 5.4, 90.1, 42.99, 19, 27.92, 70.3],
        2003: [635.56, 112.79, 199.87, 118.48, 55.89, 145.38, 73.15, 32.2, 517.97, 392.11, 451.54, 87.45, 150.09, 64.31, 329.71, 165.11, 107.31, 99.35, 534.28, 61.59, 10.68, 147.04, 206.24, 48.01, 105.48, 4.74, 77.87, 42.31, 17.98, 24.8, 64.92],
        2002: [561.91, 76.86, 179.6, 124.1, 48.39, 137.18, 75.45, 31.6, 485.25, 368.86, 347.53, 81.85, 138.28, 76.51, 310.07, 158.77, 96.95, 92.43, 454.65, 35.86, 10.08, 134.52, 183.13, 41.45, 102.39, 2.81, 67.3, 42.08, 16.75, 21.45, 52.18]
    });
 
    dataMap.dataGDP_Estate = dataMix([dataMap.dataEstate, dataMap.dataGDP]);
 
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
 
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
            'echarts/chart/line'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('c_chart'));
 
            var option = {
                timeline: {
                    data: [
                        '2002-01-01', '2003-01-01', '2004-01-01', '2005-01-01', '2006-01-01',
                        '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01', '2011-01-01'
                    ],
                    label: {
                        formatter: function (s) {
                            return s.slice(0, 4);
                        }
                    },
                    autoPlay: true,
                    playInterval: 1000
                },
                options: [
                    {
                        title: {
                            'text': '2002全国宏观经济指标',
                            'subtext': '数据来自国家统计局'
                        },
                        tooltip: { 'trigger': 'axis' },
                        legend: {
                            x: 'right',
                            'data': ['GDP', '金融', '房地产', '第一产业', '第二产业', '第三产业'],
                            'selected': {
                                'GDP': true,
                                '金融': false,
                                '房地产': true,
                                '第一产业': false,
                                '第二产业': false,
                                '第三产业': false
                            }
                        },
                        toolbox: {
                            'show': true,
                            orient: 'vertical',
                            x: 'right',
                            y: 'center',
                            'feature': {
                                'mark': { 'show': true },
                                'dataView': { 'show': true, 'readOnly': false },
                                'magicType': { 'show': true, 'type': ['line', 'bar', 'stack', 'tiled'] },
                                'restore': { 'show': true },
                                'saveAsImage': { 'show': true }
                            }
                        },
                        calculable: true,
                        grid: { 'y': 80, 'y2': 100 },
                        xAxis: [{
                            'type': 'category',
                            'axisLabel': { 'interval': 0 },
                            'data': [
                                '北京', '\n天津', '河北', '\n山西', '内蒙古', '\n辽宁', '吉林', '\n黑龙江',
                                '上海', '\n江苏', '浙江', '\n安徽', '福建', '\n江西', '山东', '\n河南',
                                '湖北', '\n湖南', '广东', '\n广西', '海南', '\n重庆', '四川', '\n贵州',
                                '云南', '\n西藏', '陕西', '\n甘肃', '青海', '\n宁夏', '新疆'
                            ]
                        }],
                        yAxis: [
                                {
                                    'type': 'value',
                                    'name': 'GDP（亿元）',
                                    'max': 53500
                                },
                               {
                                    'type': 'value',
                                    'name': '其他（亿元）'
                               }
                        ],
                        series: [
                             {
                                 'name': 'GDP',
                                 'type': 'bar',
                                 'markLine': {
                                     symbol: ['arrow', 'none'],
                                     symbolSize: [4, 2],
                                     itemStyle: {
                                         normal: {
                                             lineStyle: { color: 'orange' },
                                             barBorderColor: 'orange',
                                             label: {
                                                 position: 'left',
                                                 formatter: function (params) {
                                                     return Math.round(params.value);
                                                 },
                                                 textStyle: { color: 'orange' }
                                             }
                                         }
                                     },
                                     'data': [{ 'type': 'average', 'name': '平均值' }]
                                 },
                                 'data': dataMap.dataGDP['2002']
                             },
                            {
                                'name': '金融', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataFinancial['2002']
                            },
                            {
                                'name': '房地产', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataEstate['2002']
                            },
                            {
                                'name': '第一产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataPI['2002']
                            },
                            {
                                'name': '第二产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataSI['2002']
                            },
                            {
                                'name': '第三产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataTI['2002']
                            }
                        ]
                    },
                    {
                        title: { 'text': '2003全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2003'] },
                            { 'data': dataMap.dataFinancial['2003'] },
                            { 'data': dataMap.dataEstate['2003'] },
                            { 'data': dataMap.dataPI['2003'] },
                            { 'data': dataMap.dataSI['2003'] },
                            { 'data': dataMap.dataTI['2003'] }
                        ]
                    },
                    {
                        title: { 'text': '2004全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2004'] },
                            { 'data': dataMap.dataFinancial['2004'] },
                            { 'data': dataMap.dataEstate['2004'] },
                            { 'data': dataMap.dataPI['2004'] },
                            { 'data': dataMap.dataSI['2004'] },
                            { 'data': dataMap.dataTI['2004'] }
                        ]
                    },
                    {
                        title: { 'text': '2005全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2005'] },
                            { 'data': dataMap.dataFinancial['2005'] },
                            { 'data': dataMap.dataEstate['2005'] },
                            { 'data': dataMap.dataPI['2005'] },
                            { 'data': dataMap.dataSI['2005'] },
                            { 'data': dataMap.dataTI['2005'] }
                        ]
                    },
                    {
                        title: { 'text': '2006全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2006'] },
                            { 'data': dataMap.dataFinancial['2006'] },
                            { 'data': dataMap.dataEstate['2006'] },
                            { 'data': dataMap.dataPI['2006'] },
                            { 'data': dataMap.dataSI['2006'] },
                            { 'data': dataMap.dataTI['2006'] }
                        ]
                    },
                    {
                        title: { 'text': '2007全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2007'] },
                            { 'data': dataMap.dataFinancial['2007'] },
                            { 'data': dataMap.dataEstate['2007'] },
                            { 'data': dataMap.dataPI['2007'] },
                            { 'data': dataMap.dataSI['2007'] },
                            { 'data': dataMap.dataTI['2007'] }
                        ]
                    },
                    {
                        title: { 'text': '2008全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2008'] },
                            { 'data': dataMap.dataFinancial['2008'] },
                            { 'data': dataMap.dataEstate['2008'] },
                            { 'data': dataMap.dataPI['2008'] },
                            { 'data': dataMap.dataSI['2008'] },
                            { 'data': dataMap.dataTI['2008'] }
                        ]
                    },
                    {
                        title: { 'text': '2009全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2009'] },
                            { 'data': dataMap.dataFinancial['2009'] },
                            { 'data': dataMap.dataEstate['2009'] },
                            { 'data': dataMap.dataPI['2009'] },
                            { 'data': dataMap.dataSI['2009'] },
                            { 'data': dataMap.dataTI['2009'] }
                        ]
                    },
                    {
                        title: { 'text': '2010全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2010'] },
                            { 'data': dataMap.dataFinancial['2010'] },
                            { 'data': dataMap.dataEstate['2010'] },
                            { 'data': dataMap.dataPI['2010'] },
                            { 'data': dataMap.dataSI['2010'] },
                            { 'data': dataMap.dataTI['2010'] }
                        ]
                    },
                    {
                        title: { 'text': '2011全国宏观经济指标' },
                        series: [
                            { 'data': dataMap.dataGDP['2011'] },
                            { 'data': dataMap.dataFinancial['2011'] },
                            { 'data': dataMap.dataEstate['2011'] },
                            { 'data': dataMap.dataPI['2011'] },
                            { 'data': dataMap.dataSI['2011'] },
                            { 'data': dataMap.dataTI['2011'] }
                        ]
                    }
                ]
            };
            window.onresize = myChart.resize;
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="c_chart"></div>

 2:分析后 我需要的数据格式如下

  

 
 //{
        ////max : 26600,
        //2011: [3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58,8309.38,9069.2,6390.55,24017.11,15427.08,9815.94,9361.99,26447.38,5675.32,714.5,5543.04,11029.13,2194.33,3780.32,208.79,6935.59,2377.83,975.18,1056.15,3225.9],
        //2010:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93,6436.62,7522.83,5122.88,21238.49,13226.38,7767.24,7343.19,23014.53,4511.68,571,4359.12,8672.18,1800.06,3223.49,163.92,5446.1,1984.97,744.63,827.91,2592.15],
        //2009:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49,4905.22,6005.3,3919.45,18901.83,11010.5,6038.08,5687.19,19419.7,3381.54,443.43,3448.77,6711.87,1476.62,2582.53,136.63,4236.42,1527.24,575.33,662.32,1929.59],
        //2008:[2626.41,3709.78,8701.34,4242.36,4376.19,7158.84,3097.12,4319.75,6085.84,16993.34,11567.42,4198.93,5318.44,3554.81,17571.98,10259.99,5082.07,5028.93,18502.2,3037.74,423.55,3057.78,5823.39,1370.03,2452.75,115.56,3861.12,1470.34,557.12,609.98,2070.76],
        //2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26,10154.25,3370.96,4476.42,2975.53,14647.53,8282.83,4143.06,3977.72,16004.61,2425.29,364.26,2368.53,4648.79,1124.79,2038.39,98.48,2986.46,1279.32,419.03,455.04,1647.55],
        //2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89,8511.51,2711.18,3695.04,2419.74,12574.03,6724.61,3365.08,3187.05,13469.77,1878.56,308.62,1871.65,3775.14,967.54,1705.83,80.1,2452.44,1043.19,331.91,351.58,1459.3],
        //2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96,7164.75,2245.9,3175.92,1917.47,10478.62,5514.14,2852.12,2612.57,11356.6,1510.68,240.83,1564,3067.23,821.16,1426.42,63.52,1951.36,838.56,264.61,281.05,1164.79],
        //2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99,6250.38,1844.9,2770.49,1566.4,8478.69,4182.1,2320.6,2190.54,9280.73,1253.7,205.6,1376.91,2489.4,681.5,1281.63,52.74,1553.1,713.3,211.7,244.05,914.47],
        //2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11,5096.38,1535.29,2340.82,1204.33,6485.05,3310.14,1956.02,1777.74,7592.78,984.08,175.82,1135.31,2014.8,569.37,1047.66,47.64,1221.17,572.02,171.92,194.27,719.54],
        //2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49,4090.48,1337.04,2036.97,941.77,5184.98,2768.75,1709.89,1523.5,6143.4,846.89,148.88,958.87,1733.38,481.96,934.88,32.72,1007.56,501.69,144.51,153.06,603.15]
        //}
     每个地区可以作为一个数组,每个年份和这一年份里面各地区的数据是以键值对的形式配对的年份为key 各地区数据为一个数组

     3:设计一个如下类 作为model （本例中只是按照我的需求设计的类）

        //public class TimeLinOutData
        //{
        //    public string time;
        //    public string NameOfIndex;
        //    public ArrayList Area;
        //    public ArrayList Value;
        //}

   3.1 再写一个业务处理类 放在业务逻辑层

 
 /// <summary>
    /// Echarts业务处理类
    /// </summary>
    public class ChartsOperation
    {
        public List<TimeLinOutData> GetEchartDataOperation(DataSet ds)
        {
            List<TimeLinOutData> list = new List<TimeLinOutData>();
            ArrayList NameOfIndex = new ArrayList();
            ArrayList Area = new ArrayList();
            ArrayList arryyear = new ArrayList();
            ArrayList DtNotNull = new ArrayList();
            //先确定有哪些指标名称
            foreach (DataTable dt in ds.Tables)
            {
                if (dt.Rows.Count>0)
                {
                    if (!NameOfIndex.Contains(dt.Rows[0][0].ToString()))
                    {
                        NameOfIndex.Add(dt.Rows[0][0].ToString());
                    }
                }
            }
            //确定多少个年份 多少个地区
            foreach (DataTable dt in ds.Tables)
            {
                if (dt.Rows.Count > 0) { DtNotNull.Add(dt); };
                if (dt != null)
                {
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        if (!arryyear.Contains(dt.Rows[i][2].ToString().Trim()))
                        {
                            arryyear.Add(dt.Rows[i][2].ToString().Trim());//将不重复的年份放进year数组
                        }
                        if (!Area.Contains(dt.Rows[i][3].ToString().Trim()))
                        { //判断集合中是否已存在该地区 没有则插入
                            Area.Add(dt.Rows[i][3].ToString().Trim());//将不重复的地区放进Area数组
                        }
                    }
                }
            }
            arryyear.Sort();
            //确定创建多少个TimeLinOutData对象
            foreach (var item in NameOfIndex)
            {
                TimeLinOutData tldata = new TimeLinOutData();
                tldata.Area = Area;
                tldata.Value = new ArrayList();
                tldata.NameOfIndex = item.ToString();
                Dictionary<string, ArrayList> dict = new Dictionary<string, ArrayList>();
                for (int i = 0; i < arryyear.Count; i++)//循环每一个年份 具体赋值
                {
                    ArrayList arrayvalue = new ArrayList();
                    foreach (var Aitem in Area)
                    {
                        bool T = false;//表示当前指标 当前年份 当前地区 是否找到一个唯一的值 没有值则赋0
                        foreach (DataTable dt in DtNotNull)//每次循环都是不同的指标数据表的循环
                        {
                            DtNotNull.IndexOf(dt);
                            //处理不同的年份
                           //循环取出 地区 和值 并放到对应的数组里
                                //将不同地区的值放入Value数组 每个指标不同地区相同年份的值
                                for (int j = 0; j < dt.Rows.Count; j++) //查找每一个年份对应的不同地区的能匹配到的数值
                                {
                                    //往键值对集合里面插入数据
                                    if ((string)arryyear[i] == dt.Rows[j][2].ToString().Trim() && dt.Rows[j][0].ToString().Trim() == item.ToString() && dt.Rows[j][3].ToString().Trim()==Aitem.ToString())
                                    {   //如果年份相等 指标名称相同 地区不同 则将数值依次插入到数组里面
                                        //现将数据放入数组里 再将数组放到键值对中 最后将键值对放到 TimeLinOutData对象的value属性中
                                        arrayvalue.Add(dt.Rows[j][1].ToString());
                                        T = true;//表示当前指标 当前年份 当前地区 找到了一个唯一值
                                    }
                                }
                        }
                        if (!T) {
                            arrayvalue.Add("0");
                        }
                    }
                    //每一个年份 和各地区数值插入后 进行下一年遍历前将数组插入到键值对中
                    dict.Add(arryyear[i].ToString(), arrayvalue);
                    dict.OrderBy(o => o.Key);
                    
                    tldata.Value.AddRange(dict);//每一个年份环结束前 都要讲匹配的值付给对象的value集合 一年赋一次值
                    dict.Clear();
                    //清空arrayvalue 进行下一次遍历
                }
                list.Add(tldata);
            }
            return list;
        }
    }

 3.2  代码中调用 

       

 
      ds = dbhelper.GetDataSet(sb.ToString(), true);
            List<TimeLinOutData> listLineOut = chartsoperation.GetEchartDataOperation(ds);
            foreach (DataTable ditem in ds.Tables)//item不要用var dt很大的时候装箱很费时间 最好写明确的DataTable 
            {
                if (ditem != null && ditem.Rows.Count > 0)
                {
                    list.Add(ditem);
                }
            }
            return Content(JsonConvert.SerializeObject(listLineOut));

 4 后台返回的json数据格式如图

 4.1前端接收解析数据部分

 这里为了方便在浏览器中断点调试js 我封装到一个js文件中

 

  $.ajax({//获取返回的数据
                type: "post",
                url: "/chart/GetAsynchronousData/GetTimeLinOutData/",
                data: { "AjaxData": AjaxData },
                timeout: 60000,
                success: function (ret) {
                    if (ret.length == 0) {
                        $('#SpecificGraphics').load("/chart/GChart/pvGChart404");
                    }else {
                        var cunlist = eval("(" + ret + ")");
                        ALLData = cunlist;//allldata是全局变量 下面几个都是全局变量 是数据包
                        AllArea = []; //是所有地区
                        ALLdataIndex = {};//所有指标
                        ALLselectDataIndex = [];
                        $.each(cunlist, function (i, item) {
                            var dataindex = 'data' + i;
                            var dataspecific = "";
                            var cun_Area = [];
                            $.each(item["Area"], function (i, item) {
                                if ($.inArray(item, AllArea) == -1) {
                                    AllArea.push(item);
                                }
                            });
                            if ($.inArray(item["NameOfIndex"], ALLdataIndexName) == -1) { //如下步骤是为了将数据封装成一个类似官方案例中的dataMap一样的对象
                                var cunindexname = item["NameOfIndex"];                            //因为项目中随意组合的条件太多，此处我写的是通用代码 无法准确指定指标的                                                                                                                          //名称和个数所以动态生成一个类似dataMap的对象
                                ALLdataIndexName.push(item["NameOfIndex"]);
                                ALLdataIndex[cunindexname] = true;
                                ALLselectDataIndex.push(item["NameOfIndex"]);
                            }
                        });
                        $('#SpecificGraphics').html("");
                        $('#SpecificGraphics').load("/chart/GChart/TimeLine/");//加载子页面
                    }
                },
                error: function (request, error) {
                    if (error == "timeout") {
                    }
                    else {
                    }
                },
                complete: function () {
                    switchSrchPnl(0);
                }
            });

 ----以上代码是模板页中写的 下方的是js文件中的-----

/*
zhouzl test
*/
 
var dataMap = {};
var MaxData = 0;
var unititeye = "%";
var ret = '@ViewBag.data';
function dataFormatter(obj) {  
    var pList = AllArea;
    // AreaList
    var temp;
    var max = 0;
    for (var j = 0; j < ALLtime.length;j++) //此处根据自己项目的需要更改
    {
        var year = ALLtime[j];
        temp = obj[year];
        for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            obj[year][i] = {
                name: pList[i],
                value: temp[i]
            }
        }
        obj[year + 'max'] = Math.floor(max / 100) * 100;
    }
    return obj;
}
function dataMix(list) {
    var mixData = {};
    for (var i = 0, l = list.length; i < l; i++) {
        for (var key in list[i]) {
            if (list[i][key] instanceof Array) {
                mixData[key] = mixData[key] || [];
                for (var j = 0, k = list[i][key].length; j < k; j++) {
                    mixData[key][j] = mixData[key][j]
                                      || { name: list[i][key][j].name, value: [] };
                    mixData[key][j].value.push(list[i][key][j].value);
                }
            }
        }
    }
    return mixData;
}
 
function getdataTimeLine() {
    cunlist = ALLData; // ALLData 
    ALLtimeFirst = ' ';
    ALLtimeEnd = ' ';
    var dataMap = {};
    ALLtime = [];//每次重新装填之前先清空
    var gdp = [];
    $.each(cunlist, function (i, item) {//取所有时间
        var cunvalue = item["Value"];
        var cunzvalue = '';
        for (var j = 0; j < cunvalue.length; j++) {//取到每一个元素
            cunzvalue = cunvalue[j];
            var cunkey = cunzvalue["Key"]
            if ($.inArray(cunzvalue["Key"], ALLtime) == -1) {
                ALLtime.push(cunzvalue["Key"]);
            }
        }
    });
    ALLtimeFirst = ALLtime[0];
    ALLtimeEnd = ALLtime[ALLtime.length - 1];
    //alert(ALLtimeEnd);
    $.each(cunlist, function (i, item) {//取时间对应的值
        var cunvalue = item["Value"];
        //alert(JSON.stringify(item["Value"]))
        var cunzvalue = '';
        var dataindex = 'data' + i;
        var dataspecific = {};
        for (var j = 0; j < cunvalue.length; j++) {//取到每一个元素
            cunzvalue = cunvalue[j];
            var cunkey = cunzvalue["Key"]
            dataspecific[cunkey] = cunzvalue["Value"];
        }
        dataindexnum = i;
       // alert("dataspecific:" + JSON.stringify(dataspecific));
        dataMap[dataindex] = dataFormatter(dataspecific);
        var num = ALLtime[0];
        //alert(JSON.stringify(dataMap[dataindex][num]));
        $.each(dataMap[dataindex][num], function (i, item) {
            gdp.push(item['value']);
        });
    });
    var unit = " ";
    var starnum = ALLdataIndexName[0].indexOf("(");
    var endnum = ALLdataIndexName[0].indexOf(")");
    var ss = ALLdataIndexName[0].substring(starnum + 1, endnum);
 
    ArrylistSeries = [];
    for (var i = 0; i <= dataindexnum; i++) {
        var cundataindex = 'data' + i;
        var num = ALLtime[0];
        var cun_dataMap_index = [];
        $.each(dataMap[cundataindex][num], function (i, item) {
            if (MaxData < item["value"])
            { MaxData=item["value"] }//取得最大值 为y轴设置黄金比例设置值
            cun_dataMap_index.push(item["value"]);
        });
        if (ALLdataIndexName[i].indexOf("%") > 0) {
            ArrylistSeries.push({
                'name': ALLdataIndexName[i], 'yAxisIndex': 1, 'type': 'line',
                'markLine': {
                    symbol: ['arrow', 'none'],
                    symbolSize: [4, 2],
                    itemStyle: {
                        normal: {
                            lineStyle: { color: 'orange' },
                            barBorderColor: 'orange',
                            label: {
                                position: 'left',
                                formatter: function (params) {
                                    return Math.round(params.value);
                                },
                                textStyle: { color: 'orange' }
                            }
                        }
                    },
                    'data': [{ 'type': 'max', 'name': '最大值' }]
                },
                'data': cun_dataMap_index
            })
        } else if (ALLdataIndexName[i].indexOf("‰") > 0) {
            unititeye = "‰";
            ArrylistSeries.push({
                'name': ALLdataIndexName[i], 'yAxisIndex': 1, 'type': 'line',
                'markLine': {
                    symbol: ['arrow', 'none'],
                    symbolSize: [4, 2],
                    itemStyle: {
                        normal: {
                            lineStyle: { color: 'orange' },
                            barBorderColor: 'orange',
                            label: {
                                position: 'left',
                                formatter: function (params) {
                                    return Math.round(params.value);
                                },
                                textStyle: { color: 'orange' }
                            }
                        }
                    },
                    'data': [{ 'type': 'max', 'name': '最大值' }]
                },
                'data': cun_dataMap_index
            })
        }else {
            ArrylistSeries.push({
                'name': ALLdataIndexName[i], 'yAxisIndex': 0, 'type': 'bar',
                'data': cun_dataMap_index
            })
        }
    }
    Optionszdy = []; //下面是根据规则动态拼出 option的过程 可参考上面整理的官方案例
    Optionszdy.push({
        title: {
            'text': ALLtime[0]+'全国宏观经济指标',
            'subtext': '数据来源中国医药工业信息中心'
        },
        tooltip: { 'trigger': 'axis' },
        legend: {
            x: 'right',
            'data': ALLselectDataIndex,
            'selected': JSON.stringify(ALLdataIndex)
        },
        toolbox: {
            'show': true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            'feature': {
                'mark': { 'show': true },
                'dataView': { 'show': true, 'readOnly': false },
                'magicType': { 'show': true, 'type': ['line', 'bar', 'stack', 'tiled'] },
                'restore': { 'show': true },
                'saveAsImage': { 'show': true }
            }
        },
        calculable: true,
        grid: { 'y': 80, 'y2': 100 },
        xAxis: [{
            'type': 'category',
            'axisLabel': { 'interval': 0 },
            'data': AllArea
        }],
        yAxis: [
            {
                'type': 'value',
                'axisLabel': { formatter: '{value}' },
                'name': ss
            },
            {
                'type': 'value',
                'axisLabel': { formatter: '{value}' },
                'name': unititeye
            }
        ],
        series: ArrylistSeries
    });
    var seriescollec = [];
    for (var i = 1; i < ALLtime.length; i++) {
        var num = ALLtime[i];
        for (var j = 0; j <= dataindexnum; j++) {
            var cundataindex = 'data' + j;
            var cun_dataMap_index = [];
            $.each(dataMap[cundataindex][num], function (i, item) {
                cun_dataMap_index.push(item["value"]);
            });
            seriescollec.push({ 'data': cun_dataMap_index });
        }
        var Series = {
            title: { 'text': num + '全国宏观经济指标' },
            series: seriescollec
        }
        Optionszdy.push(Series);
        Series = {};
        seriescollec = [];
        ArrylistSeries = [];
    }
}
 
dataMap.dataGDP_Estate = dataMix([dataMap.dataEstate, dataMap.dataGDP]);
 
// 路径配置
require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});
 
// 使用
require(
    [
        'echarts',
        'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        'echarts/chart/line'
    ],
    function (ec) {
        getdataTimeLine();
        ALLselectDataIndex = [];
        ALLdataIndexName = [];
        //// 基于准备好的dom，初始化echarts图表
         var myChart = ec.init(document.getElementById('c_chart'));
        var option = {
            timeline: {
                data: ALLtime ,
                label: {
                    formatter: function (s) {
                        return s.slice(0, 10);
                    }
                },
                autoPlay: true,
                type:'number',
                playInterval: 2000
            },
            options: Optionszdy
               
        };
        window.onresize = myChart.resize;
        // 为echarts对象加载数据
        myChart.setOption(option);
    }
);
 
 
 

   



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务