echart 对legend 使用富文本

1,431 阅读1分钟

image.png

 legend: {
            orient: 'vertical',
            left: 'center',
            top: 'bottom',
            //formatter放在textStyle外面
            formatter: [
                '{a|这段文本采用样式a}',
                '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
            ].join('\n'),
            textStyle: {
            	//rich放在textStyle里面
                rich: {
                    a: {
                        color: 'red',
                        lineHeight: 10
                    },
                    b: {
                        backgroundColor: {
                            image: 'xxx/xxx.jpg'
                        },
                        height: 40
                    },
                    x: {
                        fontSize: 18,
                        fontFamily: 'Microsoft YaHei',
                        borderColor: '#449933',
                        borderRadius: 4
                    },
                }
            }
        }
legend: {
        orient: "horizontal", //'vertical',
        top: "5%",
        left: "5%",
        // itemGap: 15,
        // itemWidth: 20,
        // itemHeight: 20,
        icon: "none",
        data: this.name,
        formatter(name){
            console.log("==========name=============",name);
            return `{a|${name}}`
        },
        textStyle: {
          //rich放在textStyle里面
          rich: {
            a: {
              color: "red",
              lineHeight: 10,
            },
            b: {
              backgroundColor: {
                image: "xxx/xxx.jpg",
              },
              height: 40,
            },
            x: {
              fontSize: 18,
              fontFamily: "Microsoft YaHei",
              borderColor: "#449933",
              borderRadius: 4,
            },
          },
        },
      },