echarts封装

1-1. echarts折线图

1-1 下载依赖
  1.npm install echarts
  (以下这步依情况而定,我当时写是因为大小屏要自适应)    
  2.npm install elementResizeDetectorMaker
  3.引入
    import elementResizeDetectorMaker from "element-resize-detector";
    import * as echarts from 'echarts';

1-2. 具体代码

<template>
  <div>
    <div id="chart-week" style="width: 100%;height: 300px"></div>
    以下这个div是如果返回的没有值 要展示暂无数据 如果不写下面也可以 出来的效果就是一个x轴和y轴        
    比较丑
    <div v-if="weekFlag" class="noData-item">
      <div class="noDataLabel">暂无数据</div>
    </div>
  </div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";
import * as echarts from 'echarts';
export default {
  //从父组件获取的
  props: ['list'],
  data() {
    return {
      chartHuman: null,
      optionsHuman: {},
      weekFlag: false //图标无数据时的开关
    };
  },
  mounted() {},
  created() {},
  methods: {  
    renderChartHuman(list, type) {
      this.chartHuman = echarts.init(document.getElementById("chart-week"));
      if (list.data.chatName.length == 0 && list.data.workNumberValue.length == 0 &&         
      list.data.auxiliaryValue.length == 0 && list.data.qualityValue.length == 0 && 
      list.data.auditValue.length == 0) {
        document.getElementById("chart-week").style.display = "none";
        this.weekFlag = true;
      } else {
        document.getElementById("chart-week").style.display = "block";
        this.weekFlag = false;
        this.optionsHuman = {
          title: {
            //这个type也是根据父组件一个值展示对应的  我是直接再父组件拿到数据 往里面set了一 
            个计算好的值
            text: type,
            textStyle: {
              color: '#990000'
            },
            left: 'center',
          },
          grid: {
            left: "5%",
            right: "10%",
            top: "20%",
            bottom: "15%",
          },
          tooltip: {
            trigger: "axis",
          },
          color: ["#789AE0", "#7AC8A9", '#76839B', '#E1B83F'],
          legend: {
            show: true,
            bottom: '0%',
            data: ["折线图1", "折线图2", '折现图3', '折现图4'],
          },
          xAxis: {
            type: "category",
            data: list.data.chatName,
            axisLabel: {
              //加这个判断是因为需求是x轴数据太多分割线为5挡 可是如果数据少要都显示所以这样写            
              interval: list.data.chatName.length <= 5 ? 0 : 5,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "",
              axisLabel: {
                formatter: "{value}",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
              },
              splitLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "折线图1",
              type: "line",
              data: list.lineChatListDto.workNumberValue
            },
            {
              name: "折线图2",
              type: "line",
              data: list.lineChatListDto.auxiliaryValue
            },
            {
              name: "折线图3",
              type: "line",
              data: list.lineChatListDto.qualityValue,
            },
            {
              name: "折线图4",
              type: "line",
              data: list.lineChatListDto.auditValue,
            },
          ],
        };
        this.chartHuman.setOption(this.optionsHuman);
        const _this = this;
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-week"), () => {
          _this.$nextTick(() => {
            _this.chartHuman.resize();
          });
        });
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        this.renderChartHuman(val, val.weekType);
      },
      deep: true
    },
  }

};
</script>
<style lang="scss" scoped>
.noData-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.noDataLabel {
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #303133;
  text-align: center;
}
</style>
  

1-3. 数据格式

list:{
  data:{
    //折线图x轴数据
    chartName:[],
    //折线图1数据
    workNumberValue:[],
    //折线图2数据
    auxiliaryValue:[],
    //折线图3数据
    qualityValue:[],
    //折线图4数据
    auditValue:[],
  }
}

1-4 饼状图

1-4-1  饼状图其实跟折线图大同小异

1-4-2  需要注意的是饼状图 格式是[{name:'',value:''}]

1-4-3  如需要饼状图具体代码 可私信我