使用echarts遇到一些问题总结（饼图，折线图）

1、折线图配置

getLineOption() {
    const { dayDataList, averageCompletedQty } = this.props.dataList;
    const dateArr = dayDataList.map(item =>
      moment()
        .add(item.dayNum - 7, 'days')
        .format('MM.DD')
    );
    const qtyArr = dayDataList.map(item => item.completedQty);
    const averageArr = dayDataList.map(() => averageCompletedQty);
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      color: ['#2db7f5', '#ff6600'], // 设置折线图的线条颜色，设置后线条和头部legend颜色一致
      legend: {
        textStyle: {
          color: '#fff',
        },
        icon: 'rectangle',
        data: ['完成数', '平均数'],
      },
      grid: {
        left: '0',
        top: '10%',
        bottom: '0',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dateArr,
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          show: false, // 去除X轴网格
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          show: false, // 去除y轴网格
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
      },
      series: [
        {
          name: '完成数',
          type: 'line',
          stack: '总量',
          data: qtyArr,
          smooth: true,
          // markLine: {    // 平均值配置
          //   silent: false,
          //   type: 'line',
          //   symbol: 'none',
          //   label: {
          //     show: true,
          //   },
          //   lineStyle: {
          //     normal: {
          //       type: 'solid',
          //       color: 'rgb(245, 166, 35)',
          //     },
          //   },
          //   data: [
          //     {
          //       yAxis: averageCompletedQty,
          //       name: 'target',
          //     },
          //   ],
          // },
        },
        {  // 如果觉得自带的平均值不好看，可以自己再整一条折线，前提是要去除掉默认堆叠
          name: '平均数',
          type: 'line',
          lineStyle: {
            normal: {
              type: 'solid',
              color: '#ff6600',
            },
          },
          // stack: '总量', // 删掉stack防止两条线堆叠，影响平均数显示
          data: averageArr,
          smooth: true,
        },
      ],
    };
    return option;
  }

我在使用折线图时候遇到，自定义平均值，不是显示一条直线，而是在原有线上进行变化，这不是我们想要的，查询资料原来是由于多条线时候，默认数据会堆叠，因此去除数据的堆叠，去除堆叠方法很简单就是将两条线的stack保持不一致即可，或者去除stack。

效果如下图所示：

2、百度echarts饼图的legend配置显示百分比

最终效果图：

legend: {
        orient: 'vertical',
        text: `{a|${totalQty}}\n{b| 质量总数}`,
        right: 30,
        top: 20,
        bottom: 20,
        formatter: name => {
          let index = 0;
          const clientlabels = ['已完成', '待检验']; // 数组里的名字要与series中data中name值保持一致
          const clientcounts = [Number(completedQty), Number(pendingQty)]; // 各自的数量
          let total = 0;
          for (let j = 0; j < clientcounts.length; j++) {
            total += clientcounts[j];
          }
          const occupancyOne = parseFloat(
            (parseInt((clientcounts[0] * 100000) / total, 10) / 100000) * 100
          ).toFixed(2);
          const occupancyTwo = parseFloat(100 - occupancyOne).toFixed(2);
          const occupancy = [occupancyOne, occupancyTwo];
          clientlabels.forEach((value, i) => {
            if (value === name) {
              index = i;
            }
          });
          return `${name} ${clientcounts[index]} (${occupancy[index]}%)`;
        },
        textStyle: {
          color: '#fff',
        },
      },