安装Echarts
cnpm install echarts -S
在main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
创建图表
template
<template>
<div id="myChart" :style="{width: '1000px', height: '600px'}"></div>
</template>
script
<script>
export default {
data() {
return {
}
},
mounted(){
this.draw();
},
methods: {
draw(){
let myChart = this.$echarts.init(document.getElementById('myChart'))
var option = {
}
window.onresize = myChart.resize;
myChart.setOption(option);
}
}
}
</script>
当你需要修改内容的时候
原本是这样的
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
你需要在data中定义dataArr
data(){
return{
dataArr:[]
}
}
首先需要获取网络接口的数据
axios.get("接口地址").then(res=>{
this.dataArr=res.data.data.legend
})
让data:this.dataArr
legend: {
data: this.dataArr
},