1.安装echarts插件

npm install echarts@4.9.0

2.main.js引入

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;// 开启echarts

3. vue页面-静态数据案例

<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script>
export default {
data() {
return {
// 指定图表的配置项和数据
option: {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
}
}, mounted() {
var elementById = document.getElementById("main");
this.myChart = this.$echarts.init(elementById);
this.myChart.setOption(this.option);
}
}
</script>
<style scoped>
</style>

4. 数据动态赋值

<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script>
export default {
name: "RoleReport",
data(){
return {
option: {
title: {
text: '角色人员统计表'
},
tooltip: {},
legend: {
data: ['人员数量']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: '销量',
type: 'line',
data: []
}
]
}
}
},mounted() {
var myChart = this.$echarts.init(document.getElementById('main'))
this.axios.get(this.$baseUrl+'role/selectCountByPid').then(res=>{
res.data.data.map(rs=>{
this.option.xAxis.data.push(rs.name)
this.option.series[0].data.push(rs.num);//
})
myChart.setOption(this.option);
})
}
}
</script>
<style scoped>
</style>

5.效果