#实例展示，使用echarts做一个电子地图，可视化大屏
最近因为工作原因，需要给销售部门做一个数据可视化大屏，显示产品的全国销售地图信息，做出来的样子就是下面这个样子。
引入echarts.js模块
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="/examples/vendors/echarts/echarts-all-3.js"></script><script src="/examples/vendors/echarts/map/js/china.js"></script></head>
这个地方引入了网上的echarts.js文件，还有中国地图。
创建一个Dom
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id = "id1" style="width: 1440px;height:980px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart1 = echarts.init(document.getElementById('id1'));
编写echarts可视化部分，使用var option={ }定义一个charts图表内容，backgroundColor：“ #2c343c“，表示背景颜色，title：{}后面的内容是表示标题
var option1={backgroundColor: '#2c343c',title: {text: 'xx全国分布图',subtext: '仅个人用户',left: 'center',textStyle:{fontSize:25,color:"#fff"},subtestStyle:{fontSize:20,color:"#A68B36"}},tooltip: {trigger:"item",position:"inside",},'''5.可视化映射，visualMap: {min: 1,max: 500,text: ['销量Hight', '销量Low'],calculable: true,textStyle:{color:"#fff"},inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},toolbox: {show: true,orient: 'vertical',itemSize:15,iconStyle:{color:'#fff',borderColor:"#666",},left:"1%",top: '8%',feature: {mark: {show: true},dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},restore: {show: true},saveAsImage: {show: true}}},grid: [{left:"10%",top:"65%",bottom:"5%",right:"10%",show:'true',tooltip:{show:'true',trigger:"item",},textStyle: {color: '#fff'}},{left:"55%",top:"15%",bottom:"45%",right:"5%",textStyle:{color:"#fff"},tooltip:{show:'true',trigger:"item",}}],xAxis: [{data: ["0-10岁","10-20岁","20-30岁","30-40岁","40-50岁","50-60岁","60-70岁","70-80岁","80岁以上","未知"],gridIndex:0,name:"年龄层（10岁每段）",axisLabel:{color:"#2A8339"},nameTextStyle: {color: '#fff'}},{data:['','','','','','','','','','','','',''],gridIndex:1,name:"时间/年",axisLabel:{color:"#2A8339"},nameTextStyle:{color:'#fff'}}],yAxis: [{name:"个人用户数量/人",axisLabel:{color:'#2A8339'},nameTextStyle: {color: '#fff'},gridIndex:0},{name:"产品年度销量/台",axisLabel:{color:'#2A8339'},nameTextStyle:{color:"#fff"},gridIndex:1}],legend: {orient: 'horizontal',data:[{name:'A产品',icon:"circle"},{name:'B产品',icon:"circle"},{name:'C产品',icon:"circle"}],selectorLabel:{fontStyle:"normal",fontWeight:"bold",fontSize:"16"},left:"left",textStyle: {color: 'white',fontStyle:"normal",}},series: [{name: 'A产品',type: 'bar',color:'#003366',data: [64, 225, 241, 193, 211, 214,124,31,5,91],xAxisIndex:0,yAxisIndex:0,},{name:"B产品",type:"bar",color:'#006699',data:[24,97,128,117,97,136,70,34,3,83],xAxisIndex:0,yAxisIndex:0,},{name:"C产品",type:"bar",color:'#4cabce',data:[0,753,1041,201,17,1,1,0,1,152],xAxisIndex:0,yAxisIndex:0,},{name:"总数量",type:"line",color:'blue',data:[88,1075,1410,511,325,351,195,65,9,326],xAxisIndex:0,yAxisIndex:0,},{name:"A产品",type:"scatter",symbol:"pin",data:[24,77,112,176,168,68,107,127,91,166,157,96,29],xAxisIndex:1,yAxisIndex:1,symbolSize: function (data) {return Math.sqrt(data)*2;},color:"lightskyblue",},{name:"B产品",type:"scatter",symbol:"arrow",data:[0,0,1,0,99,133,81,75,74,113,101,74,38],xAxisIndex:1,yAxisIndex:1,symbolSize: function (data) {return Math.sqrt(data)*2;},color:"lightskyblue",},{name:"C产品",type:"scatter",symbol:"circle",data:[0,0,11,41,169,270,268,288,338,266,282,176,58],xAxisIndex:1,yAxisIndex:1,symbolSize: function (data) {return Math.sqrt(data)*2;},color:"lightskyblue",},{name:"三种分布",type:"pie",roseType:'angel',labelLine:{lineStyle:{color:"rgba(255,255,255,0.3)"}},center:["80%","75%"],radius:80,data:[{value:1399,name:"A产品"},{value:789,name:"B产品"},{value:2163,name:"C产品"}]},{name: 'A产品',type: 'map',layoutCenter:['25%',"35%"],layoutSize:700,tooltip:{trigger:"item"},mapType: 'china',roam: true,label: {normal: {show: true},emphasis: {show: true}},data:[{name: '北京',value: 70 },{name: '天津',value: 21 },{name: '上海',value: 76 },{name: '重庆',value: 1 },{name: '河北',value: 65},{name: '河南',value: 88 },{name: '云南',value: 2 },{name: '辽宁',value: 146 },{name: '黑龙江',value:235},{name: '湖南',value: 2 },{name: '安徽',value: 6},{name: '山东',value: 129},{name: '新疆',value: 50},{name: '江苏',value: 64 },{name: '浙江',value: 16 },{name: '江西',value: 7 },{name: '湖北',value: 38 },{name: '广西',value: 15},{name: '甘肃',value: 9 },{name: '山西',value: 81},{name: '内蒙古',value: 21 },{name: '陕西',value: 68 },{name: '吉林',value: 43 },{name: '福建',value: 9 },{name: '贵州',value: 3 },{name: '广东',value: 69 },{name: '青海',value: 3 },{name: '西藏',value: 1},{name: '四川',value: 53 },{name: '宁夏',value: 6 },{name: '海南',value: 0 },{name: '台湾',value: 1 },{name: '香港',value: 1 },{name: '澳门',value: 0}]},{name: 'B产品',type: 'map',layoutCenter:['25%',"35%"],layoutSize:700,tooltip:{trigger:"item"},mapType: 'china',label: {normal: {show: true},emphasis: {show: true}},data:[{name: '北京',value: 13 },{name: '天津',value: 25},{name: '上海',value: 12 },{name: '重庆',value: 1 },{name: '河北',value: 54},{name: '河南',value: 103 },{name: '云南',value: 3},{name: '辽宁',value: 66 },{name: '黑龙江',value:82},{name: '湖南',value: 1 },{name: '安徽',value: 1},{name: '山东',value: 136},{name: '新疆',value: 30},{name: '江苏',value: 14 },{name: '浙江',value: 2 },{name: '江西',value: 1 },{name: '湖北',value: 28 },{name: '广西',value: 8},{name: '甘肃',value: 10},{name: '山西',value: 19},{name: '内蒙古',value: 6 },{name: '陕西',value: 74},{name: '吉林',value: 31 },{name: '福建',value: 1},{name: '贵州',value: 2 },{name: '广东',value: 26 },{name: '青海',value: 0},{name: '西藏',value: 1 },{name: '四川',value: 35 },{name: '宁夏',value: 4},{name: '海南',value: 0 },{name: '台湾',value: 0 },{name: '香港',value: 10 },{name: '澳门',value: 0}]},{name: 'C产品',type: 'map',layoutCenter:['25%',"35%"],layoutSize:700,tooltip:{trigger:"item"},mapType: 'china',label: {normal: {show: true},emphasis: {show: true}},data:[{name: '北京',value: 84 },{name: '天津',value: 23},{name: '上海',value: 115 },{name: '重庆',value: 11},{name: '河北',value: 81},{name: '河南',value: 294},{name: '云南',value: 9},{name: '辽宁',value: 64 },{name: '黑龙江',value:95},{name: '湖南',value: 70},{name: '安徽',value: 131},{name: '山东',value: 100},{name: '新疆',value: 11},{name: '江苏',value: 217},{name: '浙江',value: 129},{name: '江西',value: 56},{name: '湖北',value: 143},{name: '广西',value: 18},{name: '甘肃',value: 38},{name: '山西',value: 34},{name: '内蒙古',value: 32},{name: '陕西',value: 63},{name: '吉林',value: 17},{name: '福建',value: 33},{name: '贵州',value: 16},{name: '广东',value: 139},{name: '青海',value: 5},{name: '西藏',value: 3},{name: '四川',value: 129},{name: '宁夏',value: 5},{name: '海南',value: 1},{name: '台湾',value: 0},{name: '香港',value: 0},{name: '澳门',value: 1}]}]};
3.4 加载配置项及数据显示。
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);</script></body></html>
