Vue使用echarts可视化组件的方法 Vue使用echarts可视化组件的方法

echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html
1.找到脚手架项目所在地址，执行cnpm install echarts，安装echarts组件（脚手架的地址就是你vue项目的地址）

文章图片

（E:\demo\vuepro）这是我的项目地址，vuepro为项目名
2.按需导入，以加快打开速度

//引入echarts组件import echarts from "echarts"// 引入基本模板let echart = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')

3.准备div标签容纳报表图形
div的 id用于绑定echarts插件

4.script标签的内容

//引入echarts组件import echarts from "echarts"// 引入基本模板let echart = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')export default{name: 'App',data(){return{chartColumn:null}},methods:{initData(){let dt=document.querySelector("#boss")this.chartColumn=echart.init(dt)this.chartColumn.setOption(//Examples中的模板)}},mounted(){this.initData()}}

为了方便大家的使用，我在这里放一个在Vue中引入echarts可视化组件的完整模板，大家直接复制使用即可

案例：

显示效果：