vue+echarts 数据可视化大屏视图

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36710522/article/details/93202092

一、老规矩先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版本可以查看链接 点击进入

html+js+css+echarts炫酷可视化模板（可直接在vue或者react项目中使用）点击进入