echarts 多个label怎么做

发布时间 2023-04-19 08:45:09作者: 沐阳歡
option = {
  backgroundColor: '#000',
  animation: true,
  grid: {
    top: "5%",
    bottom: "17%",
    right: "5%"
  },
  xAxis: {
    show: false,
    data: [
      '总商机数',
      '已分配商机数',
      '已跟进客户数',
      '有意向客户数',
      '已签约客户数',
    ],
  },
  yAxis: {
    show: false,
  },
  series: [
    {
      name: "d",
      type: "bar",
      barWidth: 86,
      itemStyle: {
        normal: {
          color: "#F27A11FF"
        }
      },
      data: [21, 43, 56, 32, 64],
      z: 10,
      zlevel: 0,
      label: {
        show: true,
        position: ['120%', '50%'],
        distance: 10,
        color: '#fff',
        formatter: function(p){
          return p.value +"%"
        },
      }
    },
    {
      name: "背影",
      type: "line",
      smooth: true, //平滑曲线显示
      showAllSymbol: false, //显示所有图形。
      symbolSize: 0,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        color: "rgba(245, 245, 245, 0.1)"
      },
      data: [21, 43, 56, 32, 64],
      z: 5
    },
    {
      data: [21, 43, 56, 32, 64],
      type: 'line',
      lineStyle: {
        color: "rgba(1, 1, 1, 0)"
      },
      symbol: 'circle',
      symbolSize: 1,
      label: {
        normal: {
          // position: "bottom",
          show: true,
          // color: '#3779D2',
          formatter: '{title|{b}}\n{numClass|{c}}',
          rich: {
            title: {
              fontSize: 14,
            },
            numClass: {
              fontSize: 12
            }
          }
        }
      },
      showBackground: false,
    }
  ],
  dataZoom: [
    {
      type: "slider",
      show: false,
      xAxisIndex: [0],
      endValue: 6,
      startValue: 0
    }
  ]
}

效果图: