一、在 vue 中使用 echarts

1、安装 echarts

npm install echarts --save

2、在 vue 项目中使用 echarts

1. 根据后台数据 动态控制柱子的个数 和 echarts图表绘制的区域大小
2. 当控制 echarts图表 的数据动态变化时，需要每次获取数据前销毁之前的 echarts图表
3. 常见配置：X轴、Y轴、轴上文字样式、柱子样式、图表周围留白大小

<template>
  <div class="content">
    <div ref="myChart" class="echartArea" :style="{ height: echartNum }" v-if="echartsStaus"></div>
    <div class="nodata" v-else> 暂无数据 </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getOrderData } from "@/api/hwTaskCenter";
export default {
  data() {
    return {
      echartsStaus: false, // 是否绘制echart的dom节点
      echartNum: '260px', // 默认 echart 图表高度
      myChart: null, // echart 实例
    };
  },

  mounted() {
    this.initEchart()
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose(); // 清理echarts实例
    }
  },
  methods: {
    // 绘制
    drawEchart() {
      this.myChart = echarts.init(this.$refs.myChart);
      const option = {
        // 1、图表 当鼠标悬浮的时候展示文字选项
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          valueFormatter: value => value ? (value.toFixed(2) + '%') : 0 // 鼠标悬浮展示文字格式化
        },
        // 2、图表 周围留白空间
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // 3、图表 X轴 选项
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        // 4、图表 y轴 选项，数值可交换：即柱形图横竖展示
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '已完成',
            type: 'bar',
            barWidth: '60%',
            // 此轴单独定义鼠标悬浮文字展示
            tooltip: {
              trigger: 'axis',
              valueFormatter: value =>  ''
            },
            // 柱子样式
            itemStyle: {
              color: 'red'
            },
            // 描述文字
            label: {
              show: true,
              formatter: (params) => params[params.dataIndex]
            },
            // 描述文字样式
            textStyle: {
              color: '#000'
            },
            // 文字位置
            position: 'right',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
      option && this.myChart.setOption(option);
    },
    // 从接口获取数据
    initEchart() {
      // 1、当echart图表数据可动态改变时，初始化时需要清理原来的 echart 图表
      this.echartsStaus = false
      if (this.myChart) {
        this.myChart.dispose();
      }

      // 2、获取数据
      getOrderData(this.params)
        .then((res) => {
          if (res.code === 200) {
            this.taskAceptList = res.data
            if (this.taskAceptList.length > 0) {
              
              this.echartsStaus = true
              // 3、柱子越多，echart 的占用越多，动态控制 echart，否则柱子会变窄并堆叠
              this.echartNum = (82 * this.taskAceptList.length) + 'px'

              this.$nextTick(() => {
                this.drawEchart() 
              })
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  .echartArea {
    width: 100%;
    margin: 10px 0;
  }
  .nodata {
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: #ccc;
  }
}
</style>