版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
一、老规矩先npm安装echarts
npm install echarts --save
二、引入使用
1.全局引入main.js中配置
(这种方式在我项目中报echarts未定义错,求大神指点~。解除报错,就是在使用的组件内引入下
let echarts = require("echarts/lib/echarts");
很是蒙为什么组件全局挂载在原型了,组件内还要重新引入???)
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用
2.组件内按需引入(全局引入报错另外加载全部组件性能上也不好,果断放弃,使用按需引入main.js中不用做任何配置)
这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。具体使用干什么样子的组件需要引入什么可以参考引入示例
//引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
三、项目中应用
1.直接上效果图果断干脆
2.目录结构
每一块图表都是一个组件的形式呈现,方便对echarts的修改
以上内容有什么不妥之处欢迎下方留言指出,js+jq+echarts版本可以查看链接 点击进入