| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/draggable.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <style> | |
| body { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| #main { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| width: 700px; | |
| height: 650px; | |
| background: #fff; | |
| } | |
| .code-panel { | |
| position: fixed; | |
| top: 10px; | |
| right: 10px; | |
| width: 200px; | |
| border: 2px solid #555; | |
| } | |
| .code-line { | |
| margin: 15px 5px; | |
| font-size: 12px; | |
| } | |
| .code-line textarea{ | |
| width: 190px; | |
| height: 80px; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| <div id="main"></div> | |
| <div class="code-panel"> | |
| <div class="code-line"> | |
| <textarea id="code1"> | |
| chart.setOption({backgroundColor: '#000'}); | |
| </textarea> | |
| <input type="button" value="run" onclick="runCode('code1');"/> | |
| Then press restore buttton. | |
| </div> | |
| <div class="code-line"> | |
| <textarea id="code2"> | |
| chart.setOption({backgroundColor: '#fff'}); | |
| </textarea> | |
| <input type="button" value="run" onclick="runCode('code2');"/> | |
| </div> | |
| <div class="code-line"> | |
| <textarea id="code3"> | |
| chart.setOption({ | |
| series: [ | |
| {id: 'pie0', label: {normal: {position: 'inside'}}} | |
| ] | |
| }); | |
| </textarea> | |
| <input type="button" value="run" onclick="runCode('code3');"/> | |
| </div> | |
| <div class="code-line"> | |
| <textarea id="code4"> | |
| chart.setOption({ | |
| timeline: { | |
| currentIndex: 5 | |
| } | |
| }); | |
| </textarea> | |
| <input type="button" value="run" onclick="runCode('code4');"/> | |
| </div> | |
| </div> | |
| <script src="data/timelineGDP.js"></script> | |
| <script> | |
| var chart; | |
| var echarts; | |
| // 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: '平均值'}] | |
| // } | |
| require([ | |
| 'echarts' | |
| ], function (ec) { | |
| echarts = ec; | |
| chart = echarts.init(document.getElementById('main'), null, { | |
| }); | |
| draggable.init( | |
| document.getElementById('main'), | |
| chart, | |
| {throttle: 70} | |
| ); | |
| var categoryData = [ | |
| '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江', | |
| '上海','江苏','浙江','安徽','福建','江西','山东','河南', | |
| '湖北','湖南','广东','广西','海南','重庆','四川','贵州', | |
| '云南','西藏','陕西','甘肃','青海','宁夏','新疆' | |
| ]; | |
| var categoryDataWithReturn = []; | |
| for (var i = 0; i < categoryData.length; i++) { | |
| var word = categoryData[i]; | |
| if (i % 2 === 0) { | |
| word = '\n' + word; | |
| } | |
| categoryDataWithReturn.push(word); | |
| } | |
| var categoryData = [ | |
| '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江', | |
| '上海','江苏','浙江','安徽','福建','江西','山东','河南', | |
| '湖北','湖南','广东','广西','海南','重庆','四川','贵州', | |
| '云南','西藏','陕西','甘肃','青海','宁夏','新疆' | |
| ]; | |
| option = { | |
| baseOption: { | |
| timeline: { | |
| axisType: 'category', | |
| autoPlay: true, | |
| playInterval: 1000, | |
| 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 (new Date(s)).getFullYear(); | |
| } | |
| } | |
| }, | |
| toolbox: { | |
| left: 0, | |
| bottom: 0, | |
| feature: { | |
| restore: {} | |
| } | |
| }, | |
| title: { | |
| subtext: 'Media Query 示例' | |
| }, | |
| tooltip: { | |
| trigger:'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| xAxis: { | |
| type: 'value', | |
| name: 'GDP（亿元）', | |
| max: 30000, | |
| data: null | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: categoryData, | |
| axisLabel: {interval: 0}, | |
| splitLine: {show: false} | |
| }, | |
| legend: { | |
| data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'], | |
| selected: { | |
| 'GDP': false, '金融': false, '房地产': false | |
| } | |
| }, | |
| calculable : true, | |
| series: [ | |
| {name: 'GDP', type: 'bar'}, | |
| {name: '金融', type: 'bar'}, | |
| {name: '房地产', type: 'bar'}, | |
| {name: '第一产业', type: 'bar'}, | |
| {name: '第二产业', type: 'bar'}, | |
| {name: '第三产业', type: 'bar'}, | |
| {name: 'GDP占比', type: 'pie', id: 'pie0'} | |
| ] | |
| }, | |
| media: [ | |
| { | |
| option: { | |
| legend: { | |
| orient: 'horizontal', | |
| left: 'right', | |
| itemGap: 10 | |
| }, | |
| grid: { | |
| left: '10%', | |
| top: 80, | |
| right: 90, | |
| bottom: 100 | |
| }, | |
| xAxis: { | |
| nameLocation: 'end', | |
| nameGap: 10, | |
| splitLine: { | |
| show: true | |
| }, | |
| axisLabel: { | |
| interval: 'auto' | |
| } | |
| }, | |
| timeline: { | |
| show: true, | |
| orient: 'horizontal', | |
| inverse: false, | |
| left: '20%', | |
| right: '20%', | |
| bottom: 10, | |
| height: 40 | |
| }, | |
| series: [ | |
| {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'} | |
| ] | |
| } | |
| }, | |
| { | |
| query: {maxWidth: 670, minWidth: 550}, | |
| option: { | |
| legend: { | |
| orient: 'horizontal', | |
| left: 200, | |
| itemGap: 5 | |
| }, | |
| grid: { | |
| left: '10%', | |
| top: 80, | |
| right: 90, | |
| bottom: 100 | |
| }, | |
| xAxis: { | |
| nameLocation: 'end', | |
| nameGap: 10, | |
| splitLine: { | |
| show: true | |
| }, | |
| axisLabel: { | |
| interval: 'auto' | |
| } | |
| }, | |
| timeline: { | |
| show: true, | |
| orient: 'horizontal', | |
| inverse: false, | |
| left: '20%', | |
| right: '20%', | |
| bottom: 10, | |
| height: 40 | |
| }, | |
| series: [ | |
| {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'} | |
| ] | |
| } | |
| }, | |
| { | |
| query: {maxWidth: 550}, | |
| option: { | |
| legend: { | |
| orient: 'vertical', | |
| left: 'right', | |
| itemGap: 5 | |
| }, | |
| grid: { | |
| left: 55, | |
| top: '32%', | |
| right: 100, | |
| bottom: 50 | |
| }, | |
| xAxis: { | |
| nameLocation: 'middle', | |
| nameGap: 25, | |
| axisLabel: { | |
| interval: 1 | |
| } | |
| }, | |
| timeline: { | |
| show: true, | |
| orient: 'vertical', | |
| inverse: true, | |
| right: 10, | |
| top: 150, | |
| bottom: 10, | |
| width: 55 | |
| }, | |
| series: [ | |
| {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'} | |
| ] | |
| } | |
| }, | |
| { | |
| query: {maxWidth: 350}, | |
| option: { | |
| legend: { | |
| orient: 'vertical', | |
| left: 'right', | |
| itemGap: 5 | |
| }, | |
| grid: { | |
| left: 55, | |
| top: '32%', | |
| right: 100, | |
| bottom: 50 | |
| }, | |
| xAxis: { | |
| nameLocation: 'middle', | |
| nameGap: 25, | |
| axisLabel: { | |
| interval: 1 | |
| } | |
| }, | |
| timeline: { | |
| show: false | |
| }, | |
| series: [ | |
| {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'} | |
| ] | |
| } | |
| } | |
| ], | |
| options: [ | |
| { | |
| 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']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2003sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2003sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2003sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2004sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2004sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2004sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2005sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2005sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2005sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2006sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2006sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2006sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2007sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2007sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2007sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2008sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2008sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2008sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2009sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2009sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2009sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2010sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2010sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2010sum']} | |
| ], id: 'pie0'} | |
| ] | |
| }, | |
| { | |
| 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']}, | |
| {data: [ | |
| {name: '第一产业', value: dataMap.dataPI['2011sum']}, | |
| {name: '第二产业', value: dataMap.dataSI['2011sum']}, | |
| {name: '第三产业', value: dataMap.dataTI['2011sum']} | |
| ], id: 'pie0'} | |
| ] | |
| } | |
| ] | |
| }; | |
| chart.setOption(option); | |
| chart.on('legendSelected', function () { | |
| }); | |
| window.onresize = chart.resize; | |
| }); | |
| </script> | |
| <script type="text/javascript"> | |
| function runCode(id) { | |
| var textarea = document.getElementById(id); | |
| var code = textarea.value; | |
| (new Function('chart', 'echarts', code))(chart, echarts); | |
| } | |
| </script> | |
| </body> | |
| </html> |