Echarts图表title使用富文本

rich中有配置的话(如a)使用该样式,没有配置样式的话(如b)使用外层textstyle的样式,textstyle没有样式的话使用默认样式

 const option1 = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: [
            "{a|1668.61}",
            "{b|今日总用电量}",
          ].join("\n"),
          color: "#fff",
          top: "center",
          left: "center",
          fontSize: "1",
          textStyle: {
            width:"40",
            color: "#fff",
            lineHeight: 30,
            fontSize: 16,
            rich: {
              a: {
                color: "#08FFFF",
                fontSize: 26,
                fontWeight: "bold"
              }
            },
          },
        },
        legend: {
          show: true,
          // 图例
          //   data: this.pieName,
          left: "10%",
          top: "10%",
          orient: "vertical",
          textStyle: {
            // width:"40",
            color: "#fff",
          },
        },
        color: ["#5087EC", "#08FFFF", "#FF7B00", "#F2BD42"],
        series: [
          {
            center: ["50%", "50%"],
            type: "pie",
            label: {
              show: false,
              formatter: "{b} : {c} ({d}%)", // b代表名称,c代表对应值,d代表百分比
            },
            radius: ["50%", "70%"], //饼图半径
            data: [
              {
                value: 30,
                name: "办公楼",
              },
              {
                value: 50,
                name: "教学楼",
              },
              {
                value: 50,
                name: "宿舍楼",
              },
              {
                value: 50,
                name: "食堂场馆",
              },
            ],
          },
        ],
      };

      let charts1 = echarts.init(this.$refs.chart1);
      charts1.setOption(option1);

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值