vue如何使用Echarts图表
为vue-cli项目添加webpack配置，本文介绍的最新版本。在3.1.1版本之前，ECharts在npm上的包是非官方维护的。从3.1.1版本开始，npm上的ECharts和zrender的包由EFE官方维护。使用npm在package.json文件中添加配置并下载相关的npm包依赖npminstallecharts--save然后在项目文件的入口js文件main.js中添加importechartsfrom"echarts"创建依赖需要添加图标的组件示例varecharts=require('echarts');这样，已经加载了所有图表和组件的ECharts包，所以体积会比较大。您也可以按需只导入您需要的模块。例如//importECharts主模块varecharts=require('echarts/lib/echarts');//importhistogramrequire('echarts/lib/chart/bar');//引入提示框和标题组件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');各种资源列表可以参考官网github仓库https://github.com/ecomfe/echarts/blob/master/index.js在模板中创建需要的dom
写js:exportdefault{name:'Bank',data(){return{}},components:{},computed:{},methods:{},mounted(){/*ECharts图表*/varmyChart=echarts.init(document.getElementById('main'));下面代码防止越界，重新发送画布，是可以解决屏幕缩小的方法，图表不会相应适配。原理是当浏览器发生resize事件时，让它触发echart的resize事件，重画canvas//防止越界重画canvaswindow.onresize=myChart.resize;myChart.setOption({series:[{name:'accesssource',type:'pie',radius:'55%',itemStyle:{normal:{//阴影大小shadowBlur:200,//阴影水平方向的偏移量shadowOffsetX:0,//阴影垂直方向的偏移量shadowOffsetY:0,//阴影颜色shadowColor:'rgba(0,0,0,0.5)'}},data:[{value:400,name:'searchengine'},{value:335,name:'directaccess'},{value:310,name:'emailmarketing'},{value:274,name:'affiliateadvertising'},{value:235,name:'VideoAds'}]}]})}}eCharts中的事件：ECharts支持常规的鼠标事件类型，包括'click','dblclick','mousedown','mousemove','mouseup','mouseover','mouseout'事件是根据准备好的dom，初始化ECharts实例varmyChart=echarts.init(document.getElementById('main'));//指定的配置项和数据图表varoption={xAxis:{data:["shirt","cardigan","chiffonshirt","pants","highheels","socks"]},yAxis:{},series:[{name:'销售',类型:'bar',数据:[5,20,36,10,10,20]}]};使用刚刚指定的配置项和数据来显示图表。myChart.setOption(option);//处理点击事件，跳转到对应的百度搜索页面myChart.on('click',function(params){window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name));});所有的鼠标事件都包含参数params，params是一个包含被点击图形的数据信息的对象，格式如下：{//当前被点击的图形元素所属的组件name,//其值如'series','markLine'、'markPoint'、'timeLine'等componentType:string,//系列类型。可能的值有：'line'、'bar'、'pie'等。componentType为'series'时有意义。seriesType:string,//传入的option.series中系列的索引。当componentType为'series'时有意义。seriesIndex:number,//系列名称。当componentType为'series'时有意义。seriesName:string,//数据名称，类别名称name:string,//传入数据数组中数据的索引dataIndex:number,//传入原始数据项data:Object,//sankey,graph等图表包含nodeData和edgeData。//dataType的值为'node'或'edge'，表示当前点击是在节点还是边上。//其他图表大多只有一种数据，dataType无意义。dataType:string,//传入的数据值value:number|Array//数据图的颜色。当componentType为'series'时有意义。color:string}如何区分鼠标点击的位置：myChart.on('click',function(params){if(params.componentType==='markPoint'){//点击了markPointif(params.seriesIndex===5){//点击索引为5的series的markPoint}}elseif(params.componentType==='series'){if(params.seriesType==='graph'){if(params.dataType==='edge'){//点击了图的边。}else{//点击了图的节点。}}}});可以在回调函数中获取这个对象中的数据名和系列名后，在自己的数据仓库中索引获取其他信息，更新图表，显示浮层等，示例代码如下：myChart.on('click',function(parmas){$.get('detail?q='+params.name,function(detail){myChart.setOption({series:[{name:'pie',//使用饼图图表来表示单列数据中的数据分布：[detail.data]}]});});});
