npm i echarts -S 下载 echarts 图表
mian.js 文件 引入图表并且全局挂载
//echarts 图表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在用到的vue文件里
<div class="bottom" id="bottom" style="width:90%;height: 400px;margin-top:50px;"></div>
注意： ID 是必须的，下面的方法必须获取到这个ID
JS： 复制粘贴即可用，基本上的备注都用，需要可自取
mounted(){
// 在通过mounted调用即可
this.echartsInit()
},
methods:{
//初始化echarts
echartsInit() {
//柱形图
//因为初始化echarts 的时候，需要指定的容器 id='main'
this.$echarts.init(document.getElementById('bottom')).setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//顶部数据解析
legend: {
data: ['未完成', '已完成', '完成率（%）']
},
//配置切换数据
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// mark: {show: true},
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
// restore: {show: true},
// saveAsImage: {show: true}
// }
// },
//配置颜色数据
color: ['rgba(246, 144, 165, 1)','rgba(148, 114, 242, 1)', 'rgba(14, 187, 194, 1)'],
//配置 x轴的数据
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
//配置 y轴的数据
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'//纵坐标百分比
}
}
],
//数据展示
series: [
{
name: '未完成',
type: 'bar',
barGap: 0,
// label: labelOption,
emphasis: {
focus: 'series'
},
data: [10, 20, 30, 40, 50]
},
{
name: '已完成',
type: 'bar',
// label: labelOption,
emphasis: {
focus: 'series'
},
data: [12, 52, 46, 78, 99]
},
{
name: '完成率（%）',
type: 'bar',
// label: labelOption,
emphasis: {
focus: 'series'
},
data: [100, 22, 33, 45, 66]
},
]
})
}
}