在vue中 echarts 柱状图调后台接口

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>

4.效果实现