cnpm install echarts -S 1 在main.js中引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts 12 创建图表 template
<template> <div id="myChart" :style="{width: '1000px', height: '600px'}"></div> </template> 123 script
<script> export default { data() { return { } }, //钩子函数 mounted(){ this.draw(); }, methods: { draw(){ // 初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 var option = { //此处占用篇幅过大，先省略等下会进行解释 } //防止越界，重绘canvas window.onresize = myChart.resize; myChart.setOption(option);//设置option } } } </script>
1234567891011121314151617181920212223242526 省略的地方在echarts官网中复制 当你需要修改内容的时候原本是这样的 legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, 你需要在data中定义dataArr data(){return{dataArr:[]} } 首先需要获取网络接口的数据 axios.get("接口地址").then(res=>{this.dataArr=res.data.data.legend }) 让data：this.dataArr legend: { data: this.dataArr },
1234567891011121314151617181920212223
