官方网站：http://echarts.baidu.com/
民间网站：http://fansunion.cn/echarts/
下载地址：https://codeload.github.com/ecomfe/echarts/zip/1.3.1
API&Doc：http://echarts.baidu.com/doc/doc.html
简要介绍
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
用法示例
1. 在线访问
http://echarts.baidu.com/doc/example.html
2. 下载查看
下载包的 doc/example目录 有很多示例。
小试牛刀
官方的例子，我看了下。引用了很多js和css文件，不够简明。
而我想要的是那种非常简介的或者是核心步骤的Example，于是我自己写了几个。
Line&折线图
<html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/scatter': fileLocation, 'echarts/chart/k': fileLocation, 'echarts/chart/pie': fileLocation, 'echarts/chart/radar': fileLocation, 'echarts/chart/map': fileLocation, 'echarts/chart/chord': fileLocation, 'echarts/chart/force': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar', 'echarts/chart/scatter', 'echarts/chart/k', 'echarts/chart/pie', 'echarts/chart/radar', 'echarts/chart/force', 'echarts/chart/chord', ], displayChart ); function displayChart(ec) { //折线图 var lineChart = ec.init(document.getElementById('line')); var lineChartOtion = getLineChartOption(); lineChart.setOption(lineChartOtion); } //获得Line图的选项和数据 function getLineChartOption(){ var lineChartOption={ title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' }, splitArea : {show : true} } ], series : [ { name:'最高气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[11, 11, 15, 13, 12, 13, 10] }, { name:'最低气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[-2, 1, 2, 5, 3, 2, 0] } ] }; return lineChartOption; } </script> </head> <body> <div id="line" style="width:400px;height:300px;"> </div> </body> </html>
Bar&柱状图
<html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/scatter': fileLocation, 'echarts/chart/k': fileLocation, 'echarts/chart/pie': fileLocation, 'echarts/chart/radar': fileLocation, 'echarts/chart/map': fileLocation, 'echarts/chart/chord': fileLocation, 'echarts/chart/force': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar', 'echarts/chart/scatter', 'echarts/chart/k', 'echarts/chart/pie', 'echarts/chart/radar', 'echarts/chart/force', 'echarts/chart/chord', ], displayChart ); function displayChart(ec) { //饼图 var pieChart = ec.init(document.getElementById('pie')); var pieChartOtion = getPieChartOption(); pieChart.setOption(pieChartOtion); } //获得Pie图的选项和数据 function getPieChartOption(){ var pieChartOption = { tooltip : { show: true, formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, restore : true, saveAsImage : true } }, calculable : true, series : [ { name:'访问来源', type:'pie', center : ['35%', 200], radius : 80, itemStyle : { normal : { label : { position : 'inner', formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'}, }, labelLine : { show : false } } }, data:[ {value:335, name:'直达'}, {value:679, name:'营销广告'}, { value:1548, name:'搜索引擎', itemStyle : { normal : { label : { show : false } }, emphasis : { label : { show : true, formatter : "{b} : {d}%", position : 'inner' } } } } ] }, { name:'访问来源', type:'pie', center : ['35%', 200], radius : [110, 140], data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, { value:1048, name:'百度', itemStyle : { normal : { color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( 300, 200, 110, 300, 200, 140, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']] ) })(), label : { textStyle : { color : 'rgba(30,144,255,0.8)', align : 'center', baseline : 'middle', fontFamily : '微软雅黑', fontSize : 30, fontWeight : 'bolder' } }, labelLine : { length : 40, lineStyle : { color : '#f0f', width : 3, type : 'dotted' } } } } }, {value:251, name:'谷歌'}, { value:102, name:'必应', itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true, length : 50 } } } }, {value:147, name:'其他'} ] }, { name:'访问来源', type:'pie', startAngle: 90, center : ['75%', 200], radius : [80, 120], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( 650, 200, 80, 650, 200, 120, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']] ) })(), label : { show : true, position : 'center', formatter : "{d}%", textStyle : { color : 'red', fontSize : '30', fontFamily : '微软雅黑', fontWeight : 'bold' } } } }, data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; return pieChartOption; } </script> </head> <body> <div id="pie" style="width:400px;height:300px;"> </div> </body> </html>
Pie&饼状图
<html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/scatter': fileLocation, 'echarts/chart/k': fileLocation, 'echarts/chart/pie': fileLocation, 'echarts/chart/radar': fileLocation, 'echarts/chart/map': fileLocation, 'echarts/chart/chord': fileLocation, 'echarts/chart/force': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar', 'echarts/chart/scatter', 'echarts/chart/k', 'echarts/chart/pie', 'echarts/chart/radar', 'echarts/chart/force', 'echarts/chart/chord', ], displayChart ); function displayChart(ec) { //柱状图 var barChart = ec.init(document.getElementById('bar')); var barChartOtion = getBarChartOption(); barChart.setOption(barChartOtion); } //获得Bar图的选项和数据 function getBarChartOption(){ var option = { tooltip : { show: true, trigger: 'item' }, legend: { data:['邮件营销','联盟广告','直接访问','搜索引擎'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'邮件营销', type:'bar', itemStyle: { // 系列级个性化样式，纵向渐变填充 normal: { borderColor:'red', color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 400, 0, 300, [[0, 'green'],[1, 'yellow']] ) })() }, emphasis: { borderWidth: 5, borderColor:'green', color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 400, 0, 300, [[0, 'red'],[1, 'orange']] ) })(), label : { show : true, position : 'top', formatter : "{a} {b} {c}", textStyle : { color: 'blue' } } } }, data:[220, 232, 101, 234, 190, 330, 210] }, { name:'联盟广告', type:'bar', stack: '总量', data:[120, '-', 451, 134, 190, 230, 110] }, { name:'直接访问', type:'bar', stack: '总量', itemStyle: { // 系列级个性化 normal: { borderWidth: 10, borderColor:'tomato', color: 'red' }, emphasis: { borderColor:'red', color: 'blue' } }, data:[ 320, 332, '-', 334, { value: 390, symbolSize : 10, // 数据级个性化 itemStyle: { normal: { color :'lime' }, emphasis: { color: 'skyBlue' } } }, 330, 320 ] }, { name:'搜索引擎', type:'bar', barWidth: 40, // 系列级个性化，柱形宽度 itemStyle: { normal: { // 系列级个性化，横向渐变填充 borderRadius: 5, color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 0, 1000, 0, [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']] ) })(), label : { show : true, textStyle : { fontSize : '20', fontFamily : '微软雅黑', fontWeight : 'bold' } } } }, data:[ 620, 732, { value: 701, itemStyle : { normal: {label : {position: 'inside'}}} }, 734, 890, 930, 820] } ] }; return option; } </script> </head> <body> <div id="bar" style="width:400px;height:300px;"> </div> </body> </html>
不足之处
1.自己写的示例，样式不太好
2.图表展示流程不完善
官方示例 附录：一个直观的示例
// 图表实例化------------------
var echarts = require('echarts');
require('echarts/chart/line'); // 图表按需加载，需要主动require
var myChart = echarts.init(document.getElementById('main'));
// ajax getting data...............
// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
// ajax return
myChart.hideLoading();
// 图表使用-------------------
var option = {
legend: { // 图例配置
padding: 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap: 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data: ['ios', 'android']
},
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型，默认数据触发，可选为：'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略，数组内数值代表百分比
splitNumber: 4 // 数值轴用，分割段数，默认为5
}
],
series: [
{
name: 'ios', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option);
...
// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
name: 'win', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);
...
// 图表清空-------------------
myChart.clear();
// 图表释放-------------------
myChart.dispose();
3.浏览器兼容性问题
上面3个示例，在IE和QQ等IE系列浏览器，无法查看。
在Firefox上可以正常查看。
网页错误详细信息（IE）
用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
时间戳: Thu, 28 Nov 2013 07:52:49 UTC
消息: ‘undefined’ 为空或不是对象
行: 1571
字符: 9
代码: 0
URI: file:///G:/WebCenter/图表/echarts-demo/js/esl/esl.js
问题改进办法
a.html第一行加上 <!DOCTYPE html>。
解决浏览器兼容性问题。不然IE浏览器报错。
b.调整div和script脚本的相对位置。
<div id=”chinaMap” style=”width:400px;height:300px;”> </div>
<script type=”text/javascript”>
echarts脚本
</script>
c.减少js配置。
模块化自动加载引入了els.js之后，不需要再手动引入echarts.js等脚本文件。
d.美化图的展现。
修改div的宽度和高度。
还可以设置 chart的option参数。
改进后的示例
上面的用法示例，是我自己参照官方的例子制作的，问题很多。
向相关同事请教后，解决了遇到的问题。
再次整理如下。
Line&折线图
<!DOCTYPE html> <html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> </head> <body> <div id="line" style="width:800px;height:600px;"> </div> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/pie': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/line' ], displayChart ); function displayChart(ec) { //折线图 var lineChart = ec.init(document.getElementById('line')); var lineChartOtion = getLineChartOption(); lineChart.setOption(lineChartOtion); } //获得Line图的选项和数据 function getLineChartOption(){ var lineChartOption={ title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' }, splitArea : {show : true} } ], series : [ { name:'最高气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[11, 11, 15, 13, 12, 13, 10] }, { name:'最低气温', type:'line', itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[-2, 1, 2, 5, 3, 2, 0] } ] }; return lineChartOption; } </script> </body> </html>
Bar&柱状图
<!DOCTYPE html> <html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> </head> <body> <div id="bar" style="width:800px;height:600px;"> </div> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/pie': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/bar' ], displayChart ); function displayChart(ec) { //柱状图 var barChart = ec.init(document.getElementById('bar')); var barChartOtion = getBarChartOption(); barChart.setOption(barChartOtion); } //获得Bar图的选项和数据 function getBarChartOption(){ var option = { tooltip : { show: true, trigger: 'item' }, legend: { data:['邮件营销','联盟广告','直接访问','搜索引擎'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true, saveAsImage : true } }, calculable : true, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'邮件营销', type:'bar', itemStyle: { // 系列级个性化样式，纵向渐变填充 normal: { borderColor:'red', color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 400, 0, 300, [[0, 'green'],[1, 'yellow']] ) })() }, emphasis: { borderWidth: 5, borderColor:'green', color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 400, 0, 300, [[0, 'red'],[1, 'orange']] ) })(), label : { show : true, position : 'top', formatter : "{a} {b} {c}", textStyle : { color: 'blue' } } } }, data:[220, 232, 101, 234, 190, 330, 210] }, { name:'联盟广告', type:'bar', stack: '总量', data:[120, '-', 451, 134, 190, 230, 110] }, { name:'直接访问', type:'bar', stack: '总量', itemStyle: { // 系列级个性化 normal: { borderWidth: 10, borderColor:'tomato', color: 'red' }, emphasis: { borderColor:'red', color: 'blue' } }, data:[ 320, 332, '-', 334, { value: 390, symbolSize : 10, // 数据级个性化 itemStyle: { normal: { color :'lime' }, emphasis: { color: 'skyBlue' } } }, 330, 320 ] }, { name:'搜索引擎', type:'bar', barWidth: 40, // 系列级个性化，柱形宽度 itemStyle: { normal: { // 系列级个性化，横向渐变填充 borderRadius: 5, color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 0, 1000, 0, [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']] ) })(), label : { show : true, textStyle : { fontSize : '20', fontFamily : '微软雅黑', fontWeight : 'bold' } } } }, data:[ 620, 732, { value: 701, itemStyle : { normal: {label : {position: 'inside'}}} }, 734, 890, 930, 820] } ] }; return option; } </script> </body> </html>
Pie&饼状图
<!DOCTYPE html> <html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> </head> <body> <div id="pie" style="width:800px;height:600px;"> </div> <script type="text/javascript"> var fileLocation ='js/echarts'; require.config({ paths:{ echarts: fileLocation, 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/pie': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/pie' ], displayChart ); function displayChart(ec) { //饼图 var pieChart = ec.init(document.getElementById('pie')); var pieChartOtion = getPieChartOption(); pieChart.setOption(pieChartOtion); } //获得Pie图的选项和数据 function getPieChartOption(){ var pieChartOption = { tooltip : { show: true, formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, restore : true, saveAsImage : true } }, calculable : true, series : [ { name:'访问来源', type:'pie', center : ['35%', 200], radius : 80, itemStyle : { normal : { label : { position : 'inner', formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'}, }, labelLine : { show : false } } }, data:[ {value:335, name:'直达'}, {value:679, name:'营销广告'}, { value:1548, name:'搜索引擎', itemStyle : { normal : { label : { show : false } }, emphasis : { label : { show : true, formatter : "{b} : {d}%", position : 'inner' } } } } ] }, { name:'访问来源', type:'pie', center : ['35%', 200], radius : [110, 140], data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, { value:1048, name:'百度', itemStyle : { normal : { color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( 300, 200, 110, 300, 200, 140, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']] ) })(), label : { textStyle : { color : 'rgba(30,144,255,0.8)', align : 'center', baseline : 'middle', fontFamily : '微软雅黑', fontSize : 30, fontWeight : 'bolder' } }, labelLine : { length : 40, lineStyle : { color : '#f0f', width : 3, type : 'dotted' } } } } }, {value:251, name:'谷歌'}, { value:102, name:'必应', itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true, length : 50 } } } }, {value:147, name:'其他'} ] }, { name:'访问来源', type:'pie', startAngle: 90, center : ['75%', 200], radius : [80, 120], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( 650, 200, 80, 650, 200, 120, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']] ) })(), label : { show : true, position : 'center', formatter : "{d}%", textStyle : { color : 'red', fontSize : '30', fontFamily : '微软雅黑', fontWeight : 'bold' } } } }, data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; return pieChartOption; } </script> </body> </html>
ChinaMap&中国地图
<!DOCTYPE html> <html> <head> <meta content='text/html;charset=utf-8' http-equiv='content-type'> <title>Echarts图表Demo</title> <script src="js/esl/esl.js"></script> </head> <body> <div id="chinaMap" style="width:800px;height:600px;"> </div> <script type="text/javascript"> var fileLocation ='js/echarts-map'; require.config({ paths:{ 'echarts': fileLocation, 'echarts/chart/map': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/map' ], displayChart ); function displayChart(ec) { chinaMapChart = ec.init(document.getElementById('chinaMap')); chinaMapChartOtion = getChinaMapChartOption(); chinaMapChart.setOption(chinaMapChartOtion); } //获得Pie图的选项和数据 function getChinaMapChartOption(){ var chinaMapChartOption = { tooltip : { trigger: 'item' }, toolbox: { show : true, orient: 'vertical', x:'right', y:'center', feature : { mark : true, dataView : {readOnly: false} } }, series : [ { tooltip: { trigger: 'item', formatter: '{b}' }, name: '选择器', type: 'map', mapType: 'china', mapLocation: { x: 'left', width: 500 }, selectedMode : 'single', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京', selected:false}, {name: '天津', selected:false}, {name: '上海', selected:false}, {name: '重庆', selected:false}, {name: '河北', selected:false}, {name: '河南', selected:false}, {name: '云南', selected:false}, {name: '辽宁', selected:false}, {name: '黑龙江', selected:false}, {name: '湖南', selected:false}, {name: '安徽', selected:false}, {name: '山东', selected:false}, {name: '新疆', selected:false}, {name: '江苏', selected:false}, {name: '浙江', selected:false}, {name: '江西', selected:false}, {name: '湖北', selected:false}, {name: '广西', selected:false}, {name: '甘肃', selected:false}, {name: '山西', selected:false}, {name: '内蒙古', selected:false}, {name: '陕西', selected:false}, {name: '吉林', selected:false}, {name: '福建', selected:false}, {name: '贵州', selected:false}, {name: '广东', selected:false}, {name: '青海', selected:false}, {name: '西藏', selected:false}, {name: '四川', selected:false}, {name: '宁夏', selected:false}, {name: '海南', selected:false}, {name: '台湾', selected:false}, {name: '香港', selected:false}, {name: '澳门', selected:false} ] } ], animation: false }; var ecConfig = require('echarts/config'); chinaMapChart.on(ecConfig.EVENT.MAP_SELECTED, function(param){ var selected = param.selected; var selectedProvince; var name; for (var i = 0, l = option.series[0].data.length; i < l; i++) { name = option.series[0].data[i].name; option.series[0].data[i].selected = selected[name]; if (selected[name]) { selectedProvince = name; } } if (typeof selectedProvince == 'undefined') { option.series.splice(1); option.legend = null; option.dataRange = null; chinaMapChart.setOption(option, true); return; } option.series[1] = { name: '随机数据', type: 'map', mapType: selectedProvince, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, mapLocation: { x: 500 }, data:[ {name: '重庆市',value: Math.round(Math.random()*1000)}, {name: '北京市',value: Math.round(Math.random()*1000)}, {name: '天津市',value: Math.round(Math.random()*1000)}, {name: '上海市',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)}, {name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*1000)}, {name: '和田地区',value: Math.round(Math.random()*1000)}, {name: '哈密地区',value: Math.round(Math.random()*1000)}, {name: '阿克苏地区',value: Math.round(Math.random()*1000)}, {name: '阿勒泰地区',value: Math.round(Math.random()*1000)}, {name: '喀什地区',value: Math.round(Math.random()*1000)}, {name: '塔城地区',value: Math.round(Math.random()*1000)}, {name: '昌吉回族自治州',value: Math.round(Math.random()*1000)}, {name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*1000)}, {name: '吐鲁番地区',value: Math.round(Math.random()*1000)}, {name: '伊犁哈萨克自治州',value: Math.round(Math.random()*1000)}, {name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*1000)}, {name: '乌鲁木齐市',value: Math.round(Math.random()*1000)}, {name: '克拉玛依市',value: Math.round(Math.random()*1000)}, {name: '阿拉尔市',value: Math.round(Math.random()*1000)}, {name: '图木舒克市',value: Math.round(Math.random()*1000)}, {name: '五家渠市',value: Math.round(Math.random()*1000)}, {name: '石河子市',value: Math.round(Math.random()*1000)}, {name: '那曲地区',value: Math.round(Math.random()*1000)}, {name: '阿里地区',value: Math.round(Math.random()*1000)}, {name: '日喀则地区',value: Math.round(Math.random()*1000)}, {name: '林芝地区',value: Math.round(Math.random()*1000)}, {name: '昌都地区',value: Math.round(Math.random()*1000)}, {name: '山南地区',value: Math.round(Math.random()*1000)}, {name: '拉萨市',value: Math.round(Math.random()*1000)}, {name: '呼伦贝尔市',value: Math.round(Math.random()*1000)}, {name: '阿拉善盟',value: Math.round(Math.random()*1000)}, {name: '锡林郭勒盟',value: Math.round(Math.random()*1000)}, {name: '鄂尔多斯市',value: Math.round(Math.random()*1000)}, {name: '赤峰市',value: Math.round(Math.random()*1000)}, {name: '巴彦淖尔市',value: Math.round(Math.random()*1000)}, {name: '通辽市',value: Math.round(Math.random()*1000)}, {name: '乌兰察布市',value: Math.round(Math.random()*1000)}, {name: '兴安盟',value: Math.round(Math.random()*1000)}, {name: '包头市',value: Math.round(Math.random()*1000)}, {name: '呼和浩特市',value: Math.round(Math.random()*1000)}, {name: '乌海市',value: Math.round(Math.random()*1000)}, {name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*1000)}, {name: '玉树藏族自治州',value: Math.round(Math.random()*1000)}, {name: '果洛藏族自治州',value: Math.round(Math.random()*1000)}, {name: '海南藏族自治州',value: Math.round(Math.random()*1000)}, {name: '海北藏族自治州',value: Math.round(Math.random()*1000)}, {name: '黄南藏族自治州',value: Math.round(Math.random()*1000)}, {name: '海东地区',value: Math.round(Math.random()*1000)}, {name: '西宁市',value: Math.round(Math.random()*1000)}, {name: '甘孜藏族自治州',value: Math.round(Math.random()*1000)}, {name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*1000)}, {name: '凉山彝族自治州',value: Math.round(Math.random()*1000)}, {name: '绵阳市',value: Math.round(Math.random()*1000)}, {name: '达州市',value: Math.round(Math.random()*1000)}, {name: '广元市',value: Math.round(Math.random()*1000)}, {name: '雅安市',value: Math.round(Math.random()*1000)}, {name: '宜宾市',value: Math.round(Math.random()*1000)}, {name: '乐山市',value: Math.round(Math.random()*1000)}, {name: '南充市',value: Math.round(Math.random()*1000)}, {name: '巴中市',value: Math.round(Math.random()*1000)}, {name: '泸州市',value: Math.round(Math.random()*1000)}, {name: '成都市',value: Math.round(Math.random()*1000)}, {name: '资阳市',value: Math.round(Math.random()*1000)}, {name: '攀枝花市',value: Math.round(Math.random()*1000)}, {name: '眉山市',value: Math.round(Math.random()*1000)}, {name: '广安市',value: Math.round(Math.random()*1000)}, {name: '德阳市',value: Math.round(Math.random()*1000)}, {name: '内江市',value: Math.round(Math.random()*1000)}, {name: '遂宁市',value: Math.round(Math.random()*1000)}, {name: '自贡市',value: Math.round(Math.random()*1000)}, {name: '黑河市',value: Math.round(Math.random()*1000)}, {name: '大兴安岭地区',value: Math.round(Math.random()*1000)}, {name: '哈尔滨市',value: Math.round(Math.random()*1000)}, {name: '齐齐哈尔市',value: Math.round(Math.random()*1000)}, {name: '牡丹江市',value: Math.round(Math.random()*1000)}, {name: '绥化市',value: Math.round(Math.random()*1000)}, {name: '伊春市',value: Math.round(Math.random()*1000)}, {name: '佳木斯市',value: Math.round(Math.random()*1000)}, {name: '鸡西市',value: Math.round(Math.random()*1000)}, {name: '双鸭山市',value: Math.round(Math.random()*1000)}, {name: '大庆市',value: Math.round(Math.random()*1000)}, {name: '鹤岗市',value: Math.round(Math.random()*1000)}, {name: '七台河市',value: Math.round(Math.random()*1000)}, {name: '酒泉市',value: Math.round(Math.random()*1000)}, {name: '张掖市',value: Math.round(Math.random()*1000)}, {name: '甘南藏族自治州',value: Math.round(Math.random()*1000)}, {name: '武威市',value: Math.round(Math.random()*1000)}, {name: '陇南市',value: Math.round(Math.random()*1000)}, {name: '庆阳市',value: Math.round(Math.random()*1000)}, {name: '白银市',value: Math.round(Math.random()*1000)}, {name: '定西市',value: Math.round(Math.random()*1000)}, {name: '天水市',value: Math.round(Math.random()*1000)}, {name: '兰州市',value: Math.round(Math.random()*1000)}, {name: '平凉市',value: Math.round(Math.random()*1000)}, {name: '临夏回族自治州',value: Math.round(Math.random()*1000)}, {name: '金昌市',value: Math.round(Math.random()*1000)}, {name: '嘉峪关市',value: Math.round(Math.random()*1000)}, {name: '普洱市',value: Math.round(Math.random()*1000)}, {name: '红河哈尼族彝族自治州',value: Math.round(Math.random()*1000)}, {name: '文山壮族苗族自治州',value: Math.round(Math.random()*1000)}, {name: '曲靖市',value: Math.round(Math.random()*1000)}, {name: '楚雄彝族自治州',value: Math.round(Math.random()*1000)}, {name: '大理白族自治州',value: Math.round(Math.random()*1000)}, {name: '临沧市',value: Math.round(Math.random()*1000)}, {name: '迪庆藏族自治州',value: Math.round(Math.random()*1000)}, {name: '昭通市',value: Math.round(Math.random()*1000)}, {name: '昆明市',value: Math.round(Math.random()*1000)}, {name: '丽江市',value: Math.round(Math.random()*1000)}, {name: '西双版纳傣族自治州',value: Math.round(Math.random()*1000)}, {name: '保山市',value: Math.round(Math.random()*1000)}, {name: '玉溪市',value: Math.round(Math.random()*1000)}, {name: '怒江傈僳族自治州',value: Math.round(Math.random()*1000)}, {name: '德宏傣族景颇族自治州',value: Math.round(Math.random()*1000)}, {name: '百色市',value: Math.round(Math.random()*1000)}, {name: '河池市',value: Math.round(Math.random()*1000)}, {name: '桂林市',value: Math.round(Math.random()*1000)}, {name: '南宁市',value: Math.round(Math.random()*1000)}, {name: '柳州市',value: Math.round(Math.random()*1000)}, {name: '崇左市',value: Math.round(Math.random()*1000)}, {name: '来宾市',value: Math.round(Math.random()*1000)}, {name: '玉林市',value: Math.round(Math.random()*1000)}, {name: '梧州市',value: Math.round(Math.random()*1000)}, {name: '贺州市',value: Math.round(Math.random()*1000)}, {name: '钦州市',value: Math.round(Math.random()*1000)}, {name: '贵港市',value: Math.round(Math.random()*1000)}, {name: '防城港市',value: Math.round(Math.random()*1000)}, {name: '北海市',value: Math.round(Math.random()*1000)}, {name: '怀化市',value: Math.round(Math.random()*1000)}, {name: '永州市',value: Math.round(Math.random()*1000)}, {name: '邵阳市',value: Math.round(Math.random()*1000)}, {name: '郴州市',value: Math.round(Math.random()*1000)}, {name: '常德市',value: Math.round(Math.random()*1000)}, {name: '湘西土家族苗族自治州',value: Math.round(Math.random()*1000)}, {name: '衡阳市',value: Math.round(Math.random()*1000)}, {name: '岳阳市',value: Math.round(Math.random()*1000)}, {name: '益阳市',value: Math.round(Math.random()*1000)}, {name: '长沙市',value: Math.round(Math.random()*1000)}, {name: '株洲市',value: Math.round(Math.random()*1000)}, {name: '张家界市',value: Math.round(Math.random()*1000)}, {name: '娄底市',value: Math.round(Math.random()*1000)}, {name: '湘潭市',value: Math.round(Math.random()*1000)}, {name: '榆林市',value: Math.round(Math.random()*1000)}, {name: '延安市',value: Math.round(Math.random()*1000)}, {name: '汉中市',value: Math.round(Math.random()*1000)}, {name: '安康市',value: Math.round(Math.random()*1000)}, {name: '商洛市',value: Math.round(Math.random()*1000)}, {name: '宝鸡市',value: Math.round(Math.random()*1000)}, {name: '渭南市',value: Math.round(Math.random()*1000)}, {name: '咸阳市',value: Math.round(Math.random()*1000)}, {name: '西安市',value: Math.round(Math.random()*1000)}, {name: '铜川市',value: Math.round(Math.random()*1000)}, {name: '清远市',value: Math.round(Math.random()*1000)}, {name: '韶关市',value: Math.round(Math.random()*1000)}, {name: '湛江市',value: Math.round(Math.random()*1000)}, {name: '梅州市',value: Math.round(Math.random()*1000)}, {name: '河源市',value: Math.round(Math.random()*1000)}, {name: '肇庆市',value: Math.round(Math.random()*1000)}, {name: '惠州市',value: Math.round(Math.random()*1000)}, {name: '茂名市',value: Math.round(Math.random()*1000)}, {name: '江门市',value: Math.round(Math.random()*1000)}, {name: '阳江市',value: Math.round(Math.random()*1000)}, {name: '云浮市',value: Math.round(Math.random()*1000)}, {name: '广州市',value: Math.round(Math.random()*1000)}, {name: '汕尾市',value: Math.round(Math.random()*1000)}, {name: '揭阳市',value: Math.round(Math.random()*1000)}, {name: '珠海市',value: Math.round(Math.random()*1000)}, {name: '佛山市',value: Math.round(Math.random()*1000)}, {name: '潮州市',value: Math.round(Math.random()*1000)}, {name: '汕头市',value: Math.round(Math.random()*1000)}, {name: '深圳市',value: Math.round(Math.random()*1000)}, {name: '东莞市',value: Math.round(Math.random()*1000)}, {name: '中山市',value: Math.round(Math.random()*1000)}, {name: '延边朝鲜族自治州',value: Math.round(Math.random()*1000)}, {name: '吉林市',value: Math.round(Math.random()*1000)}, {name: '白城市',value: Math.round(Math.random()*1000)}, {name: '松原市',value: Math.round(Math.random()*1000)}, {name: '长春市',value: Math.round(Math.random()*1000)}, {name: '白山市',value: Math.round(Math.random()*1000)}, {name: '通化市',value: Math.round(Math.random()*1000)}, {name: '四平市',value: Math.round(Math.random()*1000)}, {name: '辽源市',value: Math.round(Math.random()*1000)}, {name: '承德市',value: Math.round(Math.random()*1000)}, {name: '张家口市',value: Math.round(Math.random()*1000)}, {name: '保定市',value: Math.round(Math.random()*1000)}, {name: '唐山市',value: Math.round(Math.random()*1000)}, {name: '沧州市',value: Math.round(Math.random()*1000)}, {name: '石家庄市',value: Math.round(Math.random()*1000)}, {name: '邢台市',value: Math.round(Math.random()*1000)}, {name: '邯郸市',value: Math.round(Math.random()*1000)}, {name: '秦皇岛市',value: Math.round(Math.random()*1000)}, {name: '衡水市',value: Math.round(Math.random()*1000)}, {name: '廊坊市',value: Math.round(Math.random()*1000)}, {name: '恩施土家族苗族自治州',value: Math.round(Math.random()*1000)}, {name: '十堰市',value: Math.round(Math.random()*1000)}, {name: '宜昌市',value: Math.round(Math.random()*1000)}, {name: '襄樊市',value: Math.round(Math.random()*1000)}, {name: '黄冈市',value: Math.round(Math.random()*1000)}, {name: '荆州市',value: Math.round(Math.random()*1000)}, {name: '荆门市',value: Math.round(Math.random()*1000)}, {name: '咸宁市',value: Math.round(Math.random()*1000)}, {name: '随州市',value: Math.round(Math.random()*1000)}, {name: '孝感市',value: Math.round(Math.random()*1000)}, {name: '武汉市',value: Math.round(Math.random()*1000)}, {name: '黄石市',value: Math.round(Math.random()*1000)}, {name: '神农架林区',value: Math.round(Math.random()*1000)}, {name: '天门市',value: Math.round(Math.random()*1000)}, {name: '仙桃市',value: Math.round(Math.random()*1000)}, {name: '潜江市',value: Math.round(Math.random()*1000)}, {name: '鄂州市',value: Math.round(Math.random()*1000)}, {name: '遵义市',value: Math.round(Math.random()*1000)}, {name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*1000)}, {name: '毕节地区',value: Math.round(Math.random()*1000)}, {name: '黔南布依族苗族自治州',value: Math.round(Math.random()*1000)}, {name: '铜仁地区',value: Math.round(Math.random()*1000)}, {name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*1000)}, {name: '六盘水市',value: Math.round(Math.random()*1000)}, {name: '安顺市',value: Math.round(Math.random()*1000)}, {name: '贵阳市',value: Math.round(Math.random()*1000)}, {name: '烟台市',value: Math.round(Math.random()*1000)}, {name: '临沂市',value: Math.round(Math.random()*1000)}, {name: '潍坊市',value: Math.round(Math.random()*1000)}, {name: '青岛市',value: Math.round(Math.random()*1000)}, {name: '菏泽市',value: Math.round(Math.random()*1000)}, {name: '济宁市',value: Math.round(Math.random()*1000)}, {name: '德州市',value: Math.round(Math.random()*1000)}, {name: '滨州市',value: Math.round(Math.random()*1000)}, {name: '聊城市',value: Math.round(Math.random()*1000)}, {name: '东营市',value: Math.round(Math.random()*1000)}, {name: '济南市',value: Math.round(Math.random()*1000)}, {name: '泰安市',value: Math.round(Math.random()*1000)}, {name: '威海市',value: Math.round(Math.random()*1000)}, {name: '日照市',value: Math.round(Math.random()*1000)}, {name: '淄博市',value: Math.round(Math.random()*1000)}, {name: '枣庄市',value: Math.round(Math.random()*1000)}, {name: '莱芜市',value: Math.round(Math.random()*1000)}, {name: '赣州市',value: Math.round(Math.random()*1000)}, {name: '吉安市',value: Math.round(Math.random()*1000)}, {name: '上饶市',value: Math.round(Math.random()*1000)}, {name: '九江市',value: Math.round(Math.random()*1000)}, {name: '抚州市',value: Math.round(Math.random()*1000)}, {name: '宜春市',value: Math.round(Math.random()*1000)}, {name: '南昌市',value: Math.round(Math.random()*1000)}, {name: '景德镇市',value: Math.round(Math.random()*1000)}, {name: '萍乡市',value: Math.round(Math.random()*1000)}, {name: '鹰潭市',value: Math.round(Math.random()*1000)}, {name: '新余市',value: Math.round(Math.random()*1000)}, {name: '南阳市',value: Math.round(Math.random()*1000)}, {name: '信阳市',value: Math.round(Math.random()*1000)}, {name: '洛阳市',value: Math.round(Math.random()*1000)}, {name: '驻马店市',value: Math.round(Math.random()*1000)}, {name: '周口市',value: Math.round(Math.random()*1000)}, {name: '商丘市',value: Math.round(Math.random()*1000)}, {name: '三门峡市',value: Math.round(Math.random()*1000)}, {name: '新乡市',value: Math.round(Math.random()*1000)}, {name: '平顶山市',value: Math.round(Math.random()*1000)}, {name: '郑州市',value: Math.round(Math.random()*1000)}, {name: '安阳市',value: Math.round(Math.random()*1000)}, {name: '开封市',value: Math.round(Math.random()*1000)}, {name: '焦作市',value: Math.round(Math.random()*1000)}, {name: '许昌市',value: Math.round(Math.random()*1000)}, {name: '濮阳市',value: Math.round(Math.random()*1000)}, {name: '漯河市',value: Math.round(Math.random()*1000)}, {name: '鹤壁市',value: Math.round(Math.random()*1000)}, {name: '大连市',value: Math.round(Math.random()*1000)}, {name: '朝阳市',value: Math.round(Math.random()*1000)}, {name: '丹东市',value: Math.round(Math.random()*1000)}, {name: '铁岭市',value: Math.round(Math.random()*1000)}, {name: '沈阳市',value: Math.round(Math.random()*1000)}, {name: '抚顺市',value: Math.round(Math.random()*1000)}, {name: '葫芦岛市',value: Math.round(Math.random()*1000)}, {name: '阜新市',value: Math.round(Math.random()*1000)}, {name: '锦州市',value: Math.round(Math.random()*1000)}, {name: '鞍山市',value: Math.round(Math.random()*1000)}, {name: '本溪市',value: Math.round(Math.random()*1000)}, {name: '营口市',value: Math.round(Math.random()*1000)}, {name: '辽阳市',value: Math.round(Math.random()*1000)}, {name: '盘锦市',value: Math.round(Math.random()*1000)}, {name: '忻州市',value: Math.round(Math.random()*1000)}, {name: '吕梁市',value: Math.round(Math.random()*1000)}, {name: '临汾市',value: Math.round(Math.random()*1000)}, {name: '晋中市',value: Math.round(Math.random()*1000)}, {name: '运城市',value: Math.round(Math.random()*1000)}, {name: '大同市',value: Math.round(Math.random()*1000)}, {name: '长治市',value: Math.round(Math.random()*1000)}, {name: '朔州市',value: Math.round(Math.random()*1000)}, {name: '晋城市',value: Math.round(Math.random()*1000)}, {name: '太原市',value: Math.round(Math.random()*1000)}, {name: '阳泉市',value: Math.round(Math.random()*1000)}, {name: '六安市',value: Math.round(Math.random()*1000)}, {name: '安庆市',value: Math.round(Math.random()*1000)}, {name: '滁州市',value: Math.round(Math.random()*1000)}, {name: '宣城市',value: Math.round(Math.random()*1000)}, {name: '阜阳市',value: Math.round(Math.random()*1000)}, {name: '宿州市',value: Math.round(Math.random()*1000)}, {name: '黄山市',value: Math.round(Math.random()*1000)}, {name: '巢湖市',value: Math.round(Math.random()*1000)}, {name: '亳州市',value: Math.round(Math.random()*1000)}, {name: '池州市',value: Math.round(Math.random()*1000)}, {name: '合肥市',value: Math.round(Math.random()*1000)}, {name: '蚌埠市',value: Math.round(Math.random()*1000)}, {name: '芜湖市',value: Math.round(Math.random()*1000)}, {name: '淮北市',value: Math.round(Math.random()*1000)}, {name: '淮南市',value: Math.round(Math.random()*1000)}, {name: '马鞍山市',value: Math.round(Math.random()*1000)}, {name: '铜陵市',value: Math.round(Math.random()*1000)}, {name: '南平市',value: Math.round(Math.random()*1000)}, {name: '三明市',value: Math.round(Math.random()*1000)}, {name: '龙岩市',value: Math.round(Math.random()*1000)}, {name: '宁德市',value: Math.round(Math.random()*1000)}, {name: '福州市',value: Math.round(Math.random()*1000)}, {name: '漳州市',value: Math.round(Math.random()*1000)}, {name: '泉州市',value: Math.round(Math.random()*1000)}, {name: '莆田市',value: Math.round(Math.random()*1000)}, {name: '厦门市',value: Math.round(Math.random()*1000)}, {name: '丽水市',value: Math.round(Math.random()*1000)}, {name: '杭州市',value: Math.round(Math.random()*1000)}, {name: '温州市',value: Math.round(Math.random()*1000)}, {name: '宁波市',value: Math.round(Math.random()*1000)}, {name: '舟山市',value: Math.round(Math.random()*1000)}, {name: '台州市',value: Math.round(Math.random()*1000)}, {name: '金华市',value: Math.round(Math.random()*1000)}, {name: '衢州市',value: Math.round(Math.random()*1000)}, {name: '绍兴市',value: Math.round(Math.random()*1000)}, {name: '嘉兴市',value: Math.round(Math.random()*1000)}, {name: '湖州市',value: Math.round(Math.random()*1000)}, {name: '盐城市',value: Math.round(Math.random()*1000)}, {name: '徐州市',value: Math.round(Math.random()*1000)}, {name: '南通市',value: Math.round(Math.random()*1000)}, {name: '淮安市',value: Math.round(Math.random()*1000)}, {name: '苏州市',value: Math.round(Math.random()*1000)}, {name: '宿迁市',value: Math.round(Math.random()*1000)}, {name: '连云港市',value: Math.round(Math.random()*1000)}, {name: '扬州市',value: Math.round(Math.random()*1000)}, {name: '南京市',value: Math.round(Math.random()*1000)}, {name: '泰州市',value: Math.round(Math.random()*1000)}, {name: '无锡市',value: Math.round(Math.random()*1000)}, {name: '常州市',value: Math.round(Math.random()*1000)}, {name: '镇江市',value: Math.round(Math.random()*1000)}, {name: '吴忠市',value: Math.round(Math.random()*1000)}, {name: '中卫市',value: Math.round(Math.random()*1000)}, {name: '固原市',value: Math.round(Math.random()*1000)}, {name: '银川市',value: Math.round(Math.random()*1000)}, {name: '石嘴山市',value: Math.round(Math.random()*1000)}, {name: '儋州市',value: Math.round(Math.random()*1000)}, {name: '文昌市',value: Math.round(Math.random()*1000)}, {name: '乐东黎族自治县',value: Math.round(Math.random()*1000)}, {name: '三亚市',value: Math.round(Math.random()*1000)}, {name: '琼中黎族苗族自治县',value: Math.round(Math.random()*1000)}, {name: '东方市',value: Math.round(Math.random()*1000)}, {name: '海口市',value: Math.round(Math.random()*1000)}, {name: '万宁市',value: Math.round(Math.random()*1000)}, {name: '澄迈县',value: Math.round(Math.random()*1000)}, {name: '白沙黎族自治县',value: Math.round(Math.random()*1000)}, {name: '琼海市',value: Math.round(Math.random()*1000)}, {name: '昌江黎族自治县',value: Math.round(Math.random()*1000)}, {name: '临高县',value: Math.round(Math.random()*1000)}, {name: '陵水黎族自治县',value: Math.round(Math.random()*1000)}, {name: '屯昌县',value: Math.round(Math.random()*1000)}, {name: '定安县',value: Math.round(Math.random()*1000)}, {name: '保亭黎族苗族自治县',value: Math.round(Math.random()*1000)}, {name: '五指山市',value: Math.round(Math.random()*1000)} ] }; option.legend = { x:'right', data:['随机数据'] }; option.dataRange = { orient: 'horizontal', x: 'right', min: 0, max: 1000, color:['orange','yellow'], text:['高','低'], // 文本，默认为数值文本 splitNumber:0 }; chinaMapChart.setOption(option, true); }) return chinaMapChartOption; } </script> </body> </html>
下载地址：http://download.csdn.net/detail/fansunion/6629107(修改后的示例)
原文链接：http://FansUnion.cn/articles/3319(小雷网-FansUnion.cn)
转载于:https://my.oschina.net/jiutianniao/blog/400274
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/109488.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...