这篇文章主要介绍了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插件
<div id="chart" style="width: 50%;height: 400px"> </div>
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.ch<div>本文来源gaodai.ma#com搞##代!^码7网</div>artColumn=echart.init(dt) this.chartColumn.setOption( //Examples中的模板 ) } }, mounted(){ this.initData() } }
为了方便大家的使用，我在这里放一个在Vue中引入echarts可视化组件的完整模板，大家直接复制使用即可
<div id="boss" style="width: 500px;height: 500px"> </div>
案例：
<div id="boss" style="width: 500px;height: 500px"> </div>
显示
以上就是Vue使用echarts可视化组件的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue使用echarts可视化组件的方法
转载请注明原文链接：Vue使用echarts可视化组件的方法
