echarts legend自定义样式固定宽度

最新推荐文章于 2025-03-18 11:26:56 发布

小李吖

最新推荐文章于 2025-03-18 11:26:56 发布

阅读量7.9k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_42312077/article/details/106994548

版权

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在ECharts图表中自定义图例（legend）的样式，包括设置图例的固定宽度，以实现更美观且符合设计需求的展示效果。通过对ECharts API的深入理解，可以轻松调整图例的各项属性，提升图表的视觉体验。

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

在这里插入图片描述

// 品类销售额
drawCategorySales() {
  var that = this;
  let categorySalesChart = this.$echarts.init(
    document.getElementById("categorySalesChart")
  );
  // 绘制图表
  categorySalesChart.setOption({
    title: {
      left: "center",
      text: "品类销售额",
      textStyle: {
        fontSize: 15
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      left:20,
      bottom: 10,
      //这里写a
      formatter: ["{a|{name}}"].join("\n"),
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        rich: {
        //这里定义a的样式
          a: {
            width: 70
          }
        }
      }
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["50%", "40%"],
        data: that.pieDataList
      }
    ]
  });
},