Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
timeline-finance.html 11.6 KB
Newer Older
P
add timeline  
pah100 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 
<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #main {
                background: #fff;
            }
        </style>
        <div id="main"></div>
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
21 
        <script src="data/timelineGDP.js"></script>
P
add timeline  
pah100 已提交
22 23 24 

        <script>
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 
// 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: '平均值'}]
// }
P
add timeline  
pah100 已提交
44 45 46 
            require([
                'echarts',
                'echarts/chart/bar',
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
47 48 
                'echarts/chart/pie',
                'echarts/component/title',
P
add timeline  
pah100 已提交
49 50 51 52 53 54 55 56 57 58 59 
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/timeline'
            ], function (echarts) {

                var chart = echarts.init(document.getElementById('main'), null, {
                    renderer: 'canvas'
                });

var option = {
P
add media query  
pah100 已提交
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 
    baseOption: {
        timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [
                '2002-01-01','2003-01-01','2004-01-01',
                {
                    value: '2005-01-01',
                    tooltip: {
                        formatter: '{b} GDP达到一个高度'
                    },
P
timeline option: change symbol  
pah100 已提交
79 80 
                    symbol: 'diamond',
                    symbolSize: 16,
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
81 
                },
P
add media query  
pah100 已提交
82 83 84 85 86 87 88 89 
                '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
                {
                    value: '2011-01-01',
                    tooltip: {
                        formatter: function (params) {
                            return params.name + 'GDP达到又一个高度';
                        }
                    },
P
timeline option: change symbol  
pah100 已提交
90 91 
                    symbol: 'diamond',
                    symbolSize: 18
P
add media query  
pah100 已提交
92 93 94 95 96 
                },
            ],
            label: {
                formatter : function(s) {
                    return (new Date(s)).getFullYear();
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
97 
                }
P
add timeline  
pah100 已提交
98 
            }
P
add media query  
pah100 已提交
99 
        },
P
add timeline  
pah100 已提交
100 
        title: {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
101 
            subtext: '数据来自国家统计局'
P
add timeline  
pah100 已提交
102 
        },
L
Merge and fix  
lang 已提交
103 104 105 106 107 108 
        tooltip: {
            trigger:'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
P
add timeline  
pah100 已提交
109 
        legend: {
L
Merge and fix  
lang 已提交
110 
            align: 'right',
P
add timeline  
pah100 已提交
111 
            x: 'right',
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
112 113 114 115 
            data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
            selected: {
                'GDP': false, '金融': false, '房地产': false
            }
P
add timeline  
pah100 已提交
116 
        },
P
add media query  
pah100 已提交
117 
        calculable: true,
L
Update tests  
lang 已提交
118 119 120 
        grid: {
            top:80, bottom: 100
        },
L
Merge and fix  
lang 已提交
121 122 123 124 125 126 127 128 129 130 131 
        xAxis: {
            'type':'category',
            'axisLabel':{'interval':0},
            'data':[
                '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
                '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
                '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
                '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
            ],
            splitLine: {show: false}
        },
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
132 
        yAxis: [
P
add timeline  
pah100 已提交
133 
            {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
134 135 136 137 
                type: 'value',
                name: 'GDP（亿元）',
                // max: 53500
                max: 30000
P
add timeline  
pah100 已提交
138 139 140 
            }
        ],
        series: [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
141 142 143 144 145 146 
            {name: 'GDP', type: 'bar'},
            {name: '金融', type: 'bar'},
            {name: '房地产', type: 'bar'},
            {name: '第一产业', type: 'bar'},
            {name: '第二产业', type: 'bar'},
            {name: '第三产业', type: 'bar'},
P
add timeline  
pah100 已提交
147 
            {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
148 149 150 151 152 
                name: 'GDP占比',
                type: 'pie',
                center: ['75%', '35%'],
                radius: '28%'
            }
P
add timeline  
pah100 已提交
153 154 155 156 
        ]
    },
    options: [
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
157 158 159 160 161 162 163 164 165 166 167 168 169 
            title: {text: '2002全国宏观经济指标'},
            series: [
                {data: dataMap.dataGDP['2002']},
                {data: dataMap.dataFinancial['2002']},
                {data: dataMap.dataEstate['2002']},
                {data: dataMap.dataPI['2002']},
                {data: dataMap.dataSI['2002']},
                {data: dataMap.dataTI['2002']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2002sum']},
                    {name: '第二产业', value: dataMap.dataSI['2002sum']},
                    {name: '第三产业', value: dataMap.dataTI['2002sum']}
                ]}
P
add timeline  
pah100 已提交
170 171 172 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
173 
            title : {text: '2003全国宏观经济指标'},
P
add timeline  
pah100 已提交
174 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
175 176 177 178 179 180 181 182 183 184 185 
                {data: dataMap.dataGDP['2003']},
                {data: dataMap.dataFinancial['2003']},
                {data: dataMap.dataEstate['2003']},
                {data: dataMap.dataPI['2003']},
                {data: dataMap.dataSI['2003']},
                {data: dataMap.dataTI['2003']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2003sum']},
                    {name: '第二产业', value: dataMap.dataSI['2003sum']},
                    {name: '第三产业', value: dataMap.dataTI['2003sum']}
                ]}
P
add timeline  
pah100 已提交
186 187 188 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
189 
            title : {text: '2004全国宏观经济指标'},
P
add timeline  
pah100 已提交
190 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
191 192 193 194 195 196 197 198 199 200 201 
                {data: dataMap.dataGDP['2004']},
                {data: dataMap.dataFinancial['2004']},
                {data: dataMap.dataEstate['2004']},
                {data: dataMap.dataPI['2004']},
                {data: dataMap.dataSI['2004']},
                {data: dataMap.dataTI['2004']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2004sum']},
                    {name: '第二产业', value: dataMap.dataSI['2004sum']},
                    {name: '第三产业', value: dataMap.dataTI['2004sum']}
                ]}
P
add timeline  
pah100 已提交
202 203 204 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
205 
            title : {text: '2005全国宏观经济指标'},
P
add timeline  
pah100 已提交
206 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
207 208 209 210 211 212 213 214 215 216 217 
                {data: dataMap.dataGDP['2005']},
                {data: dataMap.dataFinancial['2005']},
                {data: dataMap.dataEstate['2005']},
                {data: dataMap.dataPI['2005']},
                {data: dataMap.dataSI['2005']},
                {data: dataMap.dataTI['2005']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2005sum']},
                    {name: '第二产业', value: dataMap.dataSI['2005sum']},
                    {name: '第三产业', value: dataMap.dataTI['2005sum']}
                ]}
P
add timeline  
pah100 已提交
218 219 220 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
221 
            title : {text: '2006全国宏观经济指标'},
P
add timeline  
pah100 已提交
222 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
223 224 225 226 227 228 229 230 231 232 233 
                {data: dataMap.dataGDP['2006']},
                {data: dataMap.dataFinancial['2006']},
                {data: dataMap.dataEstate['2006']},
                {data: dataMap.dataPI['2006']},
                {data: dataMap.dataSI['2006']},
                {data: dataMap.dataTI['2006']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2006sum']},
                    {name: '第二产业', value: dataMap.dataSI['2006sum']},
                    {name: '第三产业', value: dataMap.dataTI['2006sum']}
                ]}
P
add timeline  
pah100 已提交
234 235 236 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
237 
            title : {text: '2007全国宏观经济指标'},
P
add timeline  
pah100 已提交
238 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
239 240 241 242 243 244 245 246 247 248 249 
                {data: dataMap.dataGDP['2007']},
                {data: dataMap.dataFinancial['2007']},
                {data: dataMap.dataEstate['2007']},
                {data: dataMap.dataPI['2007']},
                {data: dataMap.dataSI['2007']},
                {data: dataMap.dataTI['2007']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2007sum']},
                    {name: '第二产业', value: dataMap.dataSI['2007sum']},
                    {name: '第三产业', value: dataMap.dataTI['2007sum']}
                ]}
P
add timeline  
pah100 已提交
250 251 252 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
253 
            title : {text: '2008全国宏观经济指标'},
P
add timeline  
pah100 已提交
254 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
255 256 257 258 259 260 261 262 263 264 265 
                {data: dataMap.dataGDP['2008']},
                {data: dataMap.dataFinancial['2008']},
                {data: dataMap.dataEstate['2008']},
                {data: dataMap.dataPI['2008']},
                {data: dataMap.dataSI['2008']},
                {data: dataMap.dataTI['2008']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2008sum']},
                    {name: '第二产业', value: dataMap.dataSI['2008sum']},
                    {name: '第三产业', value: dataMap.dataTI['2008sum']}
                ]}
P
add timeline  
pah100 已提交
266 267 268 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
269 
            title : {text: '2009全国宏观经济指标'},
P
add timeline  
pah100 已提交
270 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
271 272 273 274 275 276 277 278 279 280 281 
                {data: dataMap.dataGDP['2009']},
                {data: dataMap.dataFinancial['2009']},
                {data: dataMap.dataEstate['2009']},
                {data: dataMap.dataPI['2009']},
                {data: dataMap.dataSI['2009']},
                {data: dataMap.dataTI['2009']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2009sum']},
                    {name: '第二产业', value: dataMap.dataSI['2009sum']},
                    {name: '第三产业', value: dataMap.dataTI['2009sum']}
                ]}
P
add timeline  
pah100 已提交
282 283 284 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
285 
            title : {text: '2010全国宏观经济指标'},
P
add timeline  
pah100 已提交
286 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
287 288 289 290 291 292 293 294 295 296 297 
                {data: dataMap.dataGDP['2010']},
                {data: dataMap.dataFinancial['2010']},
                {data: dataMap.dataEstate['2010']},
                {data: dataMap.dataPI['2010']},
                {data: dataMap.dataSI['2010']},
                {data: dataMap.dataTI['2010']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2010sum']},
                    {name: '第二产业', value: dataMap.dataSI['2010sum']},
                    {name: '第三产业', value: dataMap.dataTI['2010sum']}
                ]}
P
add timeline  
pah100 已提交
298 299 300 
            ]
        },
        {
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
301 
            title : {text: '2011全国宏观经济指标'},
P
add timeline  
pah100 已提交
302 
            series : [
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
303 304 305 306 307 308 309 310 311 312 313 
                {data: dataMap.dataGDP['2011']},
                {data: dataMap.dataFinancial['2011']},
                {data: dataMap.dataEstate['2011']},
                {data: dataMap.dataPI['2011']},
                {data: dataMap.dataSI['2011']},
                {data: dataMap.dataTI['2011']},
                {data: [
                    {name: '第一产业', value: dataMap.dataPI['2011sum']},
                    {name: '第二产业', value: dataMap.dataSI['2011sum']},
                    {name: '第三产业', value: dataMap.dataTI['2011sum']}
                ]}
P
add timeline  
pah100 已提交
314 315 316 317 318 319 320 
            ]
        }
    ]
};

                chart.setOption(option);
P
timeline: add rewind, tooltip and fix some problem  
pah100 已提交
321 322 323 
                chart.on('legendSelected', function () {
                });
P
add timeline  
pah100 已提交
324 325 326 327 328 
                window.onresize = chart.resize;
            });
        </script>
    </body>
</html>