echarts图表怎么在vue项目中使用 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关echarts图表怎么在vue项目中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强>安装vue依赖

使用npm

npm install echarts ——保存

使用纱

yarn add echarts

使用国内的淘宝镜像:

//安装淘宝镜像　　npm install -g cnpm ——注册表=https://registry.npm.taobao.org//从淘宝镜像下载　　cnpm install echarts s

<强>引入ECharts

安装好的ECharts会放在node_modules目录下。

<强>全部引入

<强> 1。直接在项目代码引入

可以直接在项目代码中<代码>要求(& # 39;echarts& # 39;) 得到ECharts。声明一个ECharts变量,直接使用变量即可。

回家。vue//需要使用的页面

//引入　　var echarts =,要求(& # 39;echarts& # 39;);//,基于准备好的dom,初始化echarts实例　　var myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));//,绘制图表　　myChart.setOption ({ 　　,标题:{ 　　,文字:& # 39;ECharts 入门示例& # 39; 　　}, 　　,提示:{}, 　　,xAxis: { 　　,数据:[& # 39;衬衫& # 39;,,& # 39;羊毛衫& # 39;,,& # 39;雪纺衫& # 39;,,& # 39;裤子& # 39;,,& # 39;高跟鞋& # 39;,,& # 39;袜子& # 39;】　　}, 　　,桠溪:{}, 　　,系列:[{ 　　,名字:& # 39;销量& # 39;, 　　类型:大敌;& # 39;酒吧# 39; 　　,数据:[5,20岁,36岁,10日,10日,20) 　　,}] 　　});

<强> 2。全局引入

在mian.js中全局引入,并在vue.prototype属性中添加echarts属性为echarts美元,在代码中通过。echarts美元就可以使用了。

主要。js

//引入　　import echarts 得到& # 39;echarts& # 39; 　　　　Vue.prototype echarts 美元;=echarts 　　　　Home.vue //需要使用的页面//基于准备好的dom,初始化echarts实例　　var myChart =, echarts.init美元。(. getelementbyid(& # 39;主要# 39;));//,绘制图表　　myChart.setOption ({ 　　,标题:{ 　　,文字:& # 39;ECharts 入门示例& # 39; 　　}, 　　,提示:{}, 　　,xAxis: { 　　,数据:[& # 39;衬衫& # 39;,,& # 39;羊毛衫& # 39;,,& # 39;雪纺衫& # 39;,,& # 39;裤子& # 39;,,& # 39;高跟鞋& # 39;,,& # 39;袜子& # 39;】　　}, 　　,桠溪:{}, 　　,系列:[{ 　　,名字:& # 39;销量& # 39;, 　　类型:大敌;& # 39;酒吧# 39; 　　,数据:[5,20岁,36岁,10日,10日,20) 　　,}] 　　});

3。运行结果

echarts图表怎么在vue项目中使用“> <强>按需引入</强> 默认使用要求(& # 39;echarts& # 39;)得到的是已经加载了所有图表和组件的echarts包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。 如果只用到了柱状图,提示框和标题组件,在引入的时候也只需要引入这些模块,可以有效的将打包后的体积从400多KB减小到170多KB。 引入之后使用方式和全局引入相同。 1。直接在项目代码引入 回家。vue <pre类= //,引入,ECharts 主模块　　var echarts =,要求(& # 39;echarts/lib/echarts& # 39;);//,引入柱状图　　要求(& # 39;echarts/lib/图表/酒吧# 39;);//,引入提示框和标题组件　　要求(& # 39;echarts/lib/组件/提示# 39;); 　　要求(& # 39;echarts/lib/组件/标题# 39;);

2。全局引入

主要。js

import *, as echarts 得到& # 39;echarts/lib/echarts& # 39;;//,引入,echarts 主模块。　　import & # 39; echarts/lib/echarts& # 39;//,引入柱形图　　import & # 39; echarts/lib/图表/酒吧# 39;//,引入柱形图　　import & # 39; echarts/lib/图表/饼# 39;////,引入提示框组件,标题组件,工具箱,传说组件。　　import & # 39; echarts/lib/组件/提示# 39; 　　import & # 39; echarts/lib/组件/标题# 39; 　　import & # 39; echarts/lib/组件/工具箱# 39; 　　import & # 39; echarts/lib/组件/传说# 39; 　　　　Vue.prototype echarts 美元;=echarts;

<强>注意

问题:

在以上例子中,我们获取dom的方式是通过<代码> . getelementbyid(& # 39;主要# 39;),>

代码如下

& lt; div id=癿ain"祝辞& lt;/div> 　　echarts.init美元。(. getelementbyid(& # 39;主要# 39;))