<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div></div> /*<script src="https://www.jb51.net/node_modules/echarts/theme/shine.js"></script>*/ <script src="https://www.jb51.net/js/echarts.js"></script> <script src="https://www.jb51.net/node_modules/echarts/map/js/china.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), 'shine'); function randomData() { return Math.round(Math.random()*1000); } option = { title: { text: 'iphone销量', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data:['iphone3','iphone4','iphone5'] }, visualMap: { min: 0, max: 2500, left: 'left', top: 'bottom', text: ['高','低'], // 文本，默认为数值文本 calculable: true }, toolbox: { show: false, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, series: [ { itemStyle: { normal: { color: function (params) { var colorList = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] }, } }, name: 'iphone3', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, data:[ {name: '北京',value: randomData() }, {name: '天津',value: randomData() }, {name: '上海',value: randomData() }, {name: '重庆',value: randomData() }, {name: '河北',value: randomData() }, {name: '河南',value: randomData() }, {name: '云南',value: randomData() }, {name: '辽宁',value: randomData() }, {name: '黑龙江',value: randomData() }, {name: '湖南',value: randomData() }, {name: '安徽',value: randomData() }, {name: '山东',value: randomData() }, {name: '新疆',value: randomData() }, {name: '江苏',value: randomData() }, {name: '浙江',value: randomData() }, {name: '江西',value: randomData() }, {name: '湖北',value: randomData() }, {name: '广西',value: randomData() }, {name: '甘肃',value: randomData() }, {name: '山西',value: randomData() }, {name: '内蒙古',value: randomData() }, {name: '陕西',value: randomData() }, {name: '吉林',value: randomData() }, {name: '福建',value: randomData() }, {name: '贵州',value: randomData() }, {name: '广东',value: randomData() }, {name: '青海',value: randomData() }, {name: '西藏',value: randomData() }, {name: '四川',value: randomData() }, {name: '宁夏',value: randomData() }, {name: '海南',value: randomData() }, {name: '台湾',value: randomData() }, {name: '香港',value: randomData() }, {name: '澳门',value: randomData() } ] } ] }; myChart.setOption(option); </script> </body> </html>
运行结果
5、城市地图（以北京为例）
beijing.js可以到官网下载所有代码，在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可
代码
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <div></div> </body> <script src="https://www.jb51.net/js/echarts.js"></script> <script src="https://www.jb51.net/js/map/js/province/beijing.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = { title: { text : '北京地图', subtext : '-。-' }, tooltip : { trigger: 'item', formatter: function(a){ return a[2]; } }, legend: { orient: 'vertical', x:'right', data:['数据名称'] }, dataRange: { min: 0, max: 1000, color:['orange','yellow'], text:['高','低'], // 文本，默认为数值文本 calculable : true }, series : [ { name: '数据名称', type: 'map', mapType: '北京', selectedMode : 'single', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, 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)}, ] } ] }; myChart.setOption(option); </script> </html>
运行结果
