怎么在Vue2中使用Echarts创建图表

　　介绍

本篇文章为大家展示了怎么在Vue2中使用Echarts创建图,表内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强>一、安装插件

使用cnpm安装Echarts

cnpm  install  echarts  s

和之前介绍的axios类似,Echarts也不能通过Vue.use()进行全局调用

通常是在需要使用图表的.vue文件中直接引入

import  echarts 得到& # 39;echarts& # 39;

也可以在主。js中引入,然后修改原型链

Vue.prototype echarts 美元;=,echarts

然后就可以全局使用了

let  myChart =, echarts.init美元。(. getelementbyid (& # 39; myChart& # 39;))

<强>二、创建图表

首先需要在HTML中创建图表的容器

需要注意的是,图表的容器必须指定宽高,也就是说宽度,高度不能使用百分比,只能用px

这样确实不够灵活,不过我们可以用js来改变宽度和高度,使图表容器能够自适应,具体的实现请往后看

然后在安装中创建图,表具体的配置参考官方文档,这里不再赘述

<强>,三,按需引入

上面引入的echarts包含了所有图表,但有时候我们只需要一两个基本图表,这时候完整的echarts就显得累赘

假如只需要创建一个饼图,那么可以这么做:

,//,引入基本模板 　　,let  echarts =,要求(& # 39;echarts/lib/echarts& # 39;) 　　,//引入饼图组件 　　,要求(& # 39;echarts/lib/图表/饼# 39;) 　　,//引入提示框和图例组件 　　,要求(& # 39;echarts/lib/组件/提示# 39;) 　　,要求(& # 39;echarts/lib/组件/传说# 39;)

之所以使用需要而不是进口,是因为需要可以直接从node_modules中查找,而进口必须把路径写全

可以按需引入的模块列表见https://github.com/ecomfe/echarts/blob/master/index.js

<强>,四、适应容器

上的面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定

为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的& lt; div类=癱harts"比;就是这样的外容器

let  chartBox =, document.getElementsByClassName(& # 39;图表# 39;)[0] 　　let  myChart =, . getelementbyid (& # 39; myChart& # 39;)//,用于使图表自适应高度和宽度,通过窗体高宽计算容器高宽 　　function  resizeCharts  (), {=,,myChart.style.width  chartBox.style.width  +, & # 39; px # 39;=,,myChart.style.height  chartBox.style.height  +, & # 39; px # 39; 　　}//,设置容器高宽 　　resizeCharts () 　　,, 　　let  mainChart =, echarts.init (myChart) 　　mainChart.setOption(选项)

上述内容就是怎么在Vue2中使用Echarts创建图表,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。

怎么在Vue2中使用Echarts创建图表