怎么在vue项目中添加Echarts图表

　　介绍

怎么在vue项目中添加Echarts图表?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强> Echarts图表的基本使用

1。在vue-cli项目中添加webpack配置,本文引入的最新版本。在3.1.1版本之前ECharts在npm上的包是非官方维护的,从3.1.1开始由官方EFE维护npm上ECharts和zrender的包。

使用npm添加包。json文件中的配置并下载相关npm包依赖

npm  install  echarts ——保存

然后在项目文件的入口js文件主要。js中添加

import  echarts 得到“echarts"

在需要添加图标的组件中创建依赖的实例

var  echarts =,要求(& # 39;echarts& # 39;);

使用这种方式得到的是已经加载了所有图表和组件的ECharts包,因此体积会比较大。也可以只按需引入需要的模块,例如

//,引入,echarts 主模块 　　var  echarts =,要求(& # 39;echarts/lib/echarts& # 39;);//,引入柱状图 　　要求(& # 39;echarts/lib/图表/酒吧# 39;);//,引入提示框和标题组件 　　要求(& # 39;echarts/lib/组件/提示# 39;); 　　要求(& # 39;echarts/lib/组件/标题# 39;);

各种资源的列表详情请查阅官网的github仓库,,https://github.com/ecomfe/echarts/blob/master/index.js

在模板中创建所需的dom

& lt; !——, ECharts图表测试,——比; 　　,& lt; div  id=癱harts",在 　　& lt;才能div  id=癿ain",:祝辞& lt;/div> 　　,& lt;/div>

写入js:

export  default  { 　　,名字:& # 39;银行# 39; 　　,data  (), { 　　,return  { 　　,} 　　}, 　　,组件:{ 　　}, 　　,计算:{ 　　}, 　　,方法:{ 　　}, 　　,安装(){ 　　,/* ECharts图表*/,var  myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;)); 　　,myChart.setOption ({ 　　series 才能:, 　　,,{ 　　,,,名字:,& # 39;访问来源& # 39;, 　　,,,类型:,& # 39;派# 39; 　　,,,半径:,& # 39;55% & # 39; 　　,,,itemStyle:, { 　　正常:,,,,{ 　　,,,,,//,阴影的大小 　　,,,,,shadowBlur:, 200年, 　　,,,,,//,阴影水平方向上的偏移 　　,,,,,shadowOffsetX:, 0, 　　,,,,,//,阴影垂直方向上的偏移 　　,,,,,shadowOffsetY:, 0, 　　,,,,,//,阴影颜色 　　,,,,,shadowColor:, & # 39; rgba (0, 0, 0, 0.5) & # 39; 　　,,,,} 　　,,,}, 　　,,,数据:( 　　,,,,{值:400年,名字:& # 39;搜索引擎& # 39;}, 　　,,,,{值:335年,名字:& # 39;直接访问& # 39;}, 　　,,,,{值:310年,名字:& # 39;邮件营销& # 39;}, 　　,,,,{值:274年,名字:& # 39;联盟广告& # 39;}, 　　,,,,{值:235年,名字:& # 39;视频广告& # 39;} 　　,,,) 　　,,} 　　,,) 　　,}) 　　,} 　　}

<>强eCharts中的事件:

eCharts支持常规的鼠标事件类型,包括& # 39;点击# 39;& # 39;双击# 39;,& # 39;mousedown& # 39; & # 39; mousemove& # 39;, & # 39; mouseup # 39; & # 39;鼠标悬停# 39;,& # 39;mouseout& # 39;事件。

//,基于准备好的dom,初始化ECharts实例 　　var  myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));

//指定图表的配置项和数据

var  option =, { 　　,xAxis: { 　　,,数据:[“衬衫“,“羊毛衫“,“雪纺衫“,“裤子“,“高跟鞋“,“袜子“) 　　}, 　　,桠溪:{}, 　　,系列:[{ 　　,,名字:& # 39;销量& # 39;, 　　类型:才能,& # 39;酒吧# 39; 　　,,数据:[5,20岁,36岁,10日,10日,20) 　　,}] 　　};

//使用刚指定的配置项和数据显示图表。

myChart.setOption(选项);//,处理点击事件并且跳转到相应的百度搜索页面 　　myChart.on(& # 39;点击# 39;,,function  (params), { 　　,window.open (& # 39; https://www.baidu.com/s?wd=& # 39;, +, encodeURIComponent (params.name)); 　　});

所有的鼠标事件包含参数参数,这是一个包含点击图形的数据信息的对象,如下格式:

{ 　　,//当前点击的图形元素所属的组件名称, 　　,//其值如,& # 39;系列# 39;& # 39;markLine& # 39; & # 39; markPoint& # 39;, & # 39;时间# 39;等。 　　,组件类型:字符串, 　　,//系列类型。值可能为:& # 39;行# 39;& # 39;酒吧# 39;,& # 39;派# 39;,等。当,componentType 为,& # 39;系列# 39;,时有意义。 　　,seriesType:字符串, 　　,//系列在传入的,option.series 中的,指数。当,componentType 为,& # 39;系列# 39;,时有意义。 　　,seriesIndex:数字, 　　,//系列名称。当,componentType 为,& # 39;系列# 39;,时有意义。 　　,seriesName:字符串, 　　,//数据名,类目名 　　,名字:字符串, 　　,//数据在传入的,data 数组中的,指数 　　,dataIndex:数字, 　　,//传入的原始数据项 　　,数据:对象, 　　,//桑基graph 等图表同时含有,nodeData 和,edgeData 两种,数据, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在vue项目中添加Echarts图表