【echart】实现echart图的富文本样式

贴源码

  let xData = ['山西','山东','内蒙','甘肃'];
  let averData = [2, 3,1, 3];
  var eicon = 'path://M480.55,252.18L318.88,498.04c-15.95,24.25,1.08,56.57,30.11,57.12l147,2.79L448.5,696.92c-14.74,43.15,39.88,75.83,70.93,42.44l216.73-233.04c21.93-23.58,5.21-61.98-27-61.98H560.89l2.11-166.91C563.57,232.54,505.21,214.67,480.55,252.18z'
   let option = {
    grid: {
      left: '6%',
      right: '2%',
      bottom: '0%',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
          backgroundColor: itemColor[1],
        },
      },
      backgroundColor: 'rgba(0,0,0,.5)',
      padding: [5, 10],
      textStyle: {
        color: itemColor[1],
      }

    },
    legend: {
      show: false,
    },
    xAxis: {
      name: '',
      nameTextStyle: {
        color: itemColor[0],
        fontSize: fontSize(12),
      },
      splitLine: {
        show: false,
        interval: 'auto',
        lineStyle: {
          color: ['rgba(22, 51, 85, 0.2)']
        }
      },
      axisTick: {
        show: false,
        interval: 'auto'
      },
      axisLine: {
        lineStyle: {
          color: itemColor[0]
        }
      },
      axisLabel: {
        showLabel: true,
        fontSize: fontSize(12),
        color: itemColor[0],
        // interval: 0, //使x轴文字显示全
      },
      data: xData
    },
    yAxis: [
      {
        name: '',
        nameTextStyle: {
          color: itemColor[0],
          fontSize: fontSize(12),
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: ['rgba(142,164,207,0.2)']
          }
        },
        axisLine: {
          lineStyle: {
            color: itemColor[0],
          }
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 3,
          interval: 60,
          fontSize: fontSize(12),
          formatter: function(value) {
            if (value == 3)
            {
              return '高于平均值';
            }else  if (value == 1)
            {
              return '低于平均值';
            }else  if (value == 2)
            {
              return '平均值';
            }
          },
          color: itemColor[0]
        }
      },
    ],
    series: [
      {
        data: averData,
        type: 'pictorialBar',
        barMaxWidth: '30',
        symbolPosition: 'end',
        itemStyle: {
          color: function(params) {
             if (params.data == 3)
          {
            return colorList[4];
          }else  if (params.data == 1)
          {
            return colorList[1];
          }else  if (params.data == 2)
          {
            return colorList[0];
          }
            // 根据数据值的大小返回不同的颜色
          }
        },
        symbol: eicon,
        symbolOffset: [0, '-50%'],
        symbolSize: [20, 20],
        markLine: {
          symbol: ['none', 'none'],//去掉箭头
          itemStyle: {
            normal: {
              lineStyle: {
                type: 'dashed',
                color:colorList[0]
              },
              label: {
                show: false,
              }
            }
          },
          data: [{
            yAxis : 2,//这里设置false是隐藏不了的，可以设置为-1
          },]
        } ,
        zlevel: 1,
      },
    ]
  };
  yyfxOption.value = option;