echarts的legend和tooltip文字样式（不同颜色)formatter和rich

需求：
legend的文字颜色不同
解决：
用formatter和rich
例子：

initChart(data, sun) {
      let getchart = echarts.init(
        document.getElementById("chargingPile_count")
      );
      var option = {
        title: {
          text: "  " + sun + "台",
          subtext: "充电桩总数",
          left: "16%",
          top: "35%",
          textStyle: {
            fontSize: 20,
            color: this.$store.getters.isDark ? "#fff" : "#333",
            lineHeight: 50,
          },
 
          subtextStyle: {
            fontSize: 14,
            fontWeight: 100,
            color: this.$store.getters.isDark ? "#fff" : "#333",
          },
        },
        color: ["#3F9EFF", "#FFA94C", "#FF7A8C"],
        legend: {
          icon: "circle",
          left: "60%",
          top: "center",
          orient: "vertical",
          align: "left",
          itemGap: 30,
          selectedMode: false,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            rich: {//改样式 和下面formatter一起
	          name: {
	            color: color.legendNameColor ? color.legendNameColor : '',
	            fontSize: w / 1920 * 15 // 字体大小被覆盖了,这里重新定义
	          },
	          value: {
	            color: color.legendValueColor ?  color.legendValueColor : '',
	            fontSize: w / 1920 * 15
	          }
	        },
          },
           //formatter(name) {
             // let [first,second] = name.split(' ').filter(i=>i !== '')
              //return [
                //`{name|${first}}`,
                //`{value|${second}}`
              //].join("   ");
            //}
          formatter: function (name) {
	        const value = seriesData.find(v=>v.name===name).value
	        return [`{name|${name} :}`,`{value|${value + unit}}`].join(' ')
	      },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["50%", "65%"],
            center: ["25%", "50%"],
            labelPosition: "center",
            emphasisPadding: [30, 0, 0, 0],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },复制

eg:饼图

 initChart(color,data) {
      let { clientWidth: w } = document.body;
 
      let getchart = echarts.init(document.getElementById("echart-line"));
      var option = {
        color: ["#3f9eff", "#23D2D3"],
        tooltip: {
          trigger: "item",
          transitionDuration: 0, //防止鼠标移入时页面出现抖动
          // formatter: "{b}" + ": {c}个",
          formatter: function(params){
            return params.marker + params.name +'：'+ params.value +'个'
          }
        },
        title: {
          text: this.title,
          textStyle: {
            color: color,
            fontSize: 16,
          },
          top: "38%",
          left: "41%",
        },
        legend: {
          // icon: "circle",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 30, // 设置间距
          bottom: "10%",
          left: "26%",
          orient: "horizontal",
          textStyle: {
            color: this.$store.getters.isDark ? "#fff" : "#333",
          },
          formatter: function (name) {
            const value = data.find(v=>v.name===name).value
            return [`{name|${name}} `,` {value|${value}}个`].join('  ')
          },
          textStyle: {
                color: this.$store.getters.isDark ? "#fff" : "#333",
                rich: {
                    name: {
                        fontSize: 12
                    },
                    value: {
                        fontSize: 16
                    }
                }
            },
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "40%"],
            data: data,
            itemStyle: {
              normal: {
                //饼状图上的文本显示
                label: {
                  show: true,
                  // 	position : 'inner',
                  formatter: "{b}{d}%", //数值和百分比
                  textStyle: {
                    fontSize: 12,
                    fontWeight: "bolder",
                  },
                },
                labelLine: {
                  show: true, //显示饼状图上的文本时，指示线不显示，在第一个data时显示指示线
                },
              },
            },
          },
        ],
      };
 
      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },复制