echarts的treemap如何给展示出来的内容添加百分比

rainbowyx

已于 2022-05-26 16:57:09 修改

阅读量1.6k

点赞数

分类专栏：技巧文章标签： echarts javascript vue.js

于 2022-03-10 11:14:36 首次发布

本文链接：https://blog.csdn.net/rainbowyx/article/details/123396694

版权

本文介绍如何在Echarts的Treemap组件中为每个区块显示对应的百分比信息。通过深入理解Echarts的配置项，我们可以为Treemap的每一个节点添加计算得出的百分比值，提升数据可视化的效果。

摘要由CSDN通过智能技术生成

drawline4() {
      this.chartColumn4 = echarts.init(this.$refs.refcolumn4);
      // this.chartColumn1.clear();
      this.chartColumn4.setOption({
        title: {
          text: "",
          left: "center",
          textStyle: {
            fontSize: 20,
            // color: "#ff7f50",
            color: "gray",
          },
        },
        series: [
          {
            // roam: false,
            breadcrumb: { show: false },
            title: {
              text: "",
              left: "center",
              textStyle: {
                fontSize: 20,
                // color: "#ff7f50",
                color: "gray",
              },
            },
            type: "treemap",

            legend: {
              x: "center",
              y: "bottom",
            },

            data: [
              {
                name: "",
                value: this.y