Echarts legend翻页滚动形式

最新推荐文章于 2024-07-04 11:13:34 发布

晚秋10

最新推荐文章于 2024-07-04 11:13:34 发布

阅读量3.6k

点赞数

分类专栏：杂记文章标签： Echarts legend

本文链接：https://blog.csdn.net/chenguizhenaza/article/details/112938719

版权

杂记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

有时legend过多，需要翻页或者滚动形式，可以设置orient: "vertical", type: 'scroll',这两个属性,完整代码如下：

var myChart = echarts.init($("#lindi_lindiArea")[0]);
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },

    legend: {
      orient: "vertical",
      type: 'scroll',
      x: "left",
      y: "-25",
      bottom:"10%",
      itemGap :2,
      itemWidth:15,
      itemHeight:7,
      data: type,
      textStyle: {
        color: "#e9ebee",
        fontSize:9,
      },
    },
    series: [
      {
        label: {
          show: false,
          position: "center",
        },
        name: "",
        type: "pie",
        radius: "80%",
        center: ["70%", "50%"],
        data: typeData,
      },
    ],
  };
  myChart.setOption(option);

效果图：