最近在项目中需要使用一些图表，鉴于echarts的中文API，所以选择了echarts。项目是用webpack+vue来开发的。
安装依赖
npm install echarts --save-dev
然后在你需要使用图表的模版文件中引入echarts，目前用到了全国地图这个形式的图表，因此在引入echarts的同时还需要引入中国地图文件，文件在（下图）中。其中还有全国省的地图，不过目前用不到，就用china.js这个文件好了。
引入
import echarts from 'echarts'import china from 'echarts/map/js/china'
下面开始使用和一些简单配置：
思路是通过请求获取需要展示的数据，然后给配置给echarts，在页面渲染。确定思路那么开始：在mounted中完成请求功能
接下来就是在methods中配置echarts的初始化工作
好了图表出来了，后期配置下颜色就不会这么丑了...希望如此
一、多数据地图和柱图联动
2017年7月20日 18:24:32 懒蛋楼主回来了，时隔好久补上一篇Echarts的使用案例吧，形式还是地图图表。
下面放上一个效果图
该图表每个省份共有5种数据，单选某一省份的时候右侧的小图区出现该省的数据详情柱状图。
下面列出地图图表的配置
let option = { backgroundColor: '#FFF', //地图的背景色 zoom: 1.5, //图形初始化的比例 toolbox: { //图表工具栏 show: true, top:'0', left: '1%', feature: { dataView: {readOnly: true}, //数据视图切换 restore: {}, //还原功能 saveAsImage: {} //保存图表至本地 } }, visualMap: { //地图可视化 min: 0, max: 2500, left: 'left', top: 'bottom', text: ['高','低'], calculable: true, inRange: { color: ['#e0ffff', '#006edd'] //地图区块展示颜色 }, }, legend: { //图例说明 orient: 'horizontal', left: '25%', top: '1%', data:['统建CDN','IDC','省建Cache','统建Cache','省建OTT'], }, tooltip:{ //鼠标悬停的提示框 trigger: 'item', formatter: function(obj){ let data = map4.mapdata[obj.dataIndex]; return ` 全网业务流量分布地图 省份：${data.name} 统建CDN：${data.value.CDN}GBPS IDC：${data.value.IDC}GBPS 统建Cache：${data.value.Cache}GBPS 省建Cache：${data.value.PCache}GBPS 省建OTT：${data.value.POTT}GBPS 总计流量：${data.value.POTT+data.value.CDN+data.value.IDC+data.value.Cache+data.value.PCache}GBPS ` } }, series: series, //地图数据 }; //下面是具体的地图数据 /* ** 因为数据的格式问题，这里对原始数据进行循环生成了五个独立的数据，放入series中 */ let ser = ()=>{ let array = []; let labelArray = [{name:'统建CDN',item:'CDN'},{name:'IDC',item:'IDC'},{name:'省建Cache',item:'PCache'},{name:'统建Cache',item:'Cache'},{name:'省建OTT',item:'POTT'}] for(let i=0;i { let array = []; map4.mapdata.map((item)=>{ array.push({ name: item.name, value: item.value[type] }) }) return array; } let series = ser(); //原始数据结构 mapdata : [ { name:'安徽', value:{ CDN:193.5, IDC:884.64, Cache:43.88, PCache:17.61, POTT:406.39 } }, { name: '北京', value:{ CDN:40.86, IDC:451.49, Cache:34.64, PCache:0, POTT:14.15 } } .... ] 以上就是左侧地图部分的详细说明，这样我们就得到了一个地图图表。接下来我们开始实现左右联动。
drawmap(id){ this.chart = echarts.init(document.getElementById(id)); this.chart.setOption(option); this.chart.on('click',function(data){ //为图表绑定点击事件 that.setData(data); });}, 这里楼主在使用Echarts自带的地图点击事件geoselected时，点击地图没有任何响应，不知道是什么原因，无奈只好使用了click,该方法返回一个对象：关于对象中的内容可以查看。接下来我们就是通过这个对象里的一个dataIndex值来定位用户期望查看的数据：
let {name,dataIndex} = data;let seriesData = [ { name:`${name}`, type: 'bar', data:Object.values(map4.mapdata[dataIndex].value) }]; 将数据赋给柱图中，完成一次点击联动展示。
let option = { title: { text: `${name}流量数据`, left: 'center', textStyle:{ fontSize: 16, fontWeight: 'normal' } }, tooltip: { trigger: 'item', formatter:(item)=>{ return ` ${name}流量数据 ${item.name}：${item.value}GBPS` } }, legend: { data: ['统建CDN','IDC','省建Cache','统建Cache','省建OTT'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, itemStyle:{ normal:{ color: function (params){ return Object.values(color)[params.dataIndex] } } }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['统建CDN','IDC','省建Cache','统建Cache','省建OTT'] }, series:seriesData}; 有些朋友会报错，应该是初始化时候出的问题。在项目使用，我们在`mounted`中获取图表的数据，并执行初始化图表的方法，因为请求是异步的，所以可能会出现没有数据的情况。因此我们需要使用`promise`这种方式，通过这种方式就可以让图形正常渲染出来。
this.$http.get('/data/showdaydata').then(res=>{ this.data1 = this.formatterPro(res.data.PCache);}).then(()=>{ this.$nextTick(function() { this.drawbar('map-item-1'); });});