一、在vue2中使用echarts

在vue2中使用echarts，和在原生js中使用echarts步骤差不多，只不过我们需要在mounted钩子中写逻辑代码，具体步骤如下，

安装`echarts``

npm install echarts -S

在main.js中导入

import ECharts from "echarts"; Vue.prototype.$echarts = ECharts;

将其挂载到vue的原型上，这样我们在全局都可以通过this.$echarts来访问echarts了 准备工作做好了，咱们看个例子 绘制如图所示的一个示例图

代码只是圈住的图的部分

二、使用vue-echarts同样实现上图例子

还是得先安装，导入 安装 vue-echarts是依赖echarts的，如果你没有安装echarts,记得在安装vue-echarts时一起安装了

npm install echarts vue-echarts -S

导入

import VueECharts from "vue-echarts"; Vue.component("v-chart", VueECharts);

使用vue.component注册组件之后我们全局都可以直接使用组件了

可以看到使用 组件了之后可以省去那些繁琐的获取dom和初始化操作

三、使用v-charts

v-charts官网 同样的安装导入，v-charts同样依赖echarts 安装 v-charts是依赖echarts的，如果你没有安装echarts,记得在安装v-charts时一起安装了

npm install echarts v-charts -S

导入

import VCharts from 'v-charts' import 'v-charts/lib/style.css' Vue.use(VCharts)

示例：

精彩内容

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。