1.安装echarts依赖
npm install echarts -S 或cnpm install echarts -S
2.全局引用
// main.js引入echarts
import echarts from 'echarts' //有时语法报错 或使用 import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.创建组件
<template>
<div id="echarts">
<div >
<div>
<div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getarrival } from '@/api/product' //调用后台接口
export default {
name: 'Echarts',
data() {
return {
dataList: [],
obj:{
id:1
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
getarrival(this.obj).then((res) => {
this.dataList = res.data.data.arrivel_later_result.bar //接口返回数据赋值this.dataList
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: this.dataList.title.text,
subtext: this.dataList.title.subtext,
left: this.dataList.title.left
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: this.dataList.xAxis.data
},
yAxis: {
type: 'value'
// boundaryGap: [0, 0.01]
},
series: [
{
name: '迟到占比',
type: 'bar',
barWidth: 30, //柱图宽度
data: this.dataList.series[0].data
}
]
})
})
},
}
}
</script>
<style scoped>
</style>
4.效果实现
