echarts + vue2 实现帕累托图

找了很多都不满意 根据网上deme 自己写了一个 ，传入的数据要自己通过计算得到真实的渲染数据，依次对应渲染即可，这里的数据经过处理, tooltip也做了，未截图

• 计算
  
  接口得到的数据如上，要经过排序 ，计算累计百分比得到数据

// 计算帕累托图的折线属性  和数组排序   这里的冒泡很蠢 但是基础不太好，就没有研究其他的了  
    toParetoData(xData,yData){
        const arrx = [...xData]
        const arry = [...yData]
        // 排序
        let b = 0; //设置用来调换位置的值
        let c = 0;
        // 冒泡 从大到小排序  同时  x轴信息也同时排序
        for (let i = 0; i < arry.length; i++) {
          for(let j = 0;j <arry.length;j++){
            if(arry[j]<arry[j+1]){
              b = arry[j];
              arry[j] = arry[j+1];
              arry[j+1] = b
              c = arrx[j];
              arrx[j] = arrx[j+1];
              arrx[j+1] = c
            }
          }
        }
        // 获取总量
        const sum = arry.reduce((sum, item, index) => (sum += item), 0);
        // 计算单个百分比
        const yData1 = arry.map((item) => {
          const num = +((item / sum) * 100).toFixed(2);
          return num;
        });
        let baiFenSum = 0;
        // 计算累计百分比
        const Long1 = yData1.map((item) => {
          baiFenSum += item;
          return baiFenSum;
        });
        // 补0 是为了echarts 更好的现实   在E charts中会进行处理  不做显示
        Long1.unshift(0)
        return {
          x:arrx,
          barY:arry,
          lineY:Long1
        }
    },

• 处理后的数据，可以直接传给组件进行使用
  

• echats 组件代码

<template>
  <div class="page_box">
    <BaseEcharts :initOption="initOption" :idName="idName" />
  </div>
</template>

<script>
export default {
  props: {
    // 实例id
    idName: {
      type: String,
    },
    //折线图y轴数据
    lineYData: {
      type: Array,
    },
    // x轴刻度
    xData: {
      type: Array,
    },
    // 柱状图y轴数据
    barYData: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  computed: {
    initOption() {
      const that = this;
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
          // 自定义tip 显示
          formatter: function (params) {
            // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
            let data = params[1].data;
            // 找到 柱状图x 值对应的下标  取出对应的百分比
            const index = params[1].dataIndex;
            const sum = that.lineYData[index + 1];
            return "百分比：" + sum + "%" + "<br />" + " 警报时长：" + data;
          },
        },
        grid: {
          left: "3%",
          top: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.showXData,
            axisLabel: {
              padding: [0, 0, 0, 100], // 四个数字分别为上右下左与原位置距离
              interval: 0,
              // 去掉因为长度所导致的 数组加1
              formatter: function (value) {
                if (+value === 0) {
                  return "";
                }
                return value;
              },
            },
          },
          {
            type: "category",
            boundaryGap: true,
            show: false,
            // 隐藏的数据   其实是x轴的真实对应数据  主要是为了 柱状图的刻度 和折线图的刻度对应
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "分钟",
            max: this.xDataSum,
            // max: 1500,
            min: 0,
            //网格线
            splitLine: {
              show: false,
            },
            // boundaryGap: [0.2, 0.2],
            // boundaryGap: [0, 0],
          },
          {
            axisLabel: {
              formatter: function (value) {
                return value + "%";
              },
            },
            //网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(255,255,255,0.2)"],
                width: 1,
                type: "dashed",
              },
            },
            type: "value",
            scale: true,
            name: "耗时占比",
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: "分钟",
            type: "bar",
            barWidth: "100%",
            xAxisIndex: 1,
            yAxisIndex: 0,
            data: this.barYData,
          },
          {
            name: "百分比",
            type: "line",
            yAxisIndex: 1,

            data: this.lineYData,
            // data:[0,98,97,95,11]
          },
        ],
      };
    },
    // x轴显示数据  这里多加的0 是为了 显示
    showXData() {
      const arr = [...this.xData];
      arr.push(0);
      return arr;
    },
    xDataSum() {
      const sum = this.barYData.reduce((sum, item) => (sum += item), 0);
      return sum;
    },
  },
};
</script>

<style scoped lang="less">
.page_box {
  width: 100%;
  height: 100%;
}
</style>