Echarts图表title使用富文本

printf_824

已于 2024-11-07 15:48:13 修改

阅读量2.6k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts 前端 java

于 2023-12-08 10:36:01 首次发布

本文链接：https://blog.csdn.net/m0_49083276/article/details/134872204

vue 专栏收录该内容

10 篇文章

订阅专栏

文章详细描述了如何在ECharts图表中使用配置项来控制不同情况下的文本样式，包括富文本（rich）的定义，以及如何自定义提示框（tooltip）和图例的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);