自定义样式的Echarts图例

Question

我有这个图表，其中添加了图例标签和值。我想实现类似的目标：

标签与其值之间始终有一个空格（类似于 flex: justify- Between ）。尝试了

align

，如 Echarts 文档中所述，但似乎在这种情况下没有帮助。

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, 'dark', {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

const dataList = [
  { value: 1048, name: 'Search Engine', count: 245 },
  { value: 735, name: 'Direct', count: 56 },
  { value: 580, name: 'Email', count: 45 },
  { value: 484, name: 'Union Ads', count: 21 },
  { value: 300, name: 'Video Ads', count: 54 }
];

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    formatter: function (name) {
      return `${name} {count|${dataList
        .filter((a) => a.name === name)
        .map((a) => a.count)}}`;
    },
    textStyle: {
      rich: {
        'count': {
          align: 'right',
          color: 'red'
        }
      }
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: dataList,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Referer of a Website - Apache ECharts Demo</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="chart-container"></div>
    <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

Answer 1

作者已经回答了，但我还是不太难理解这个评论。我想我会添加格式更好的代码并链接到文档

工作代码看起来像这样

legend: {
    orient: 'vertical',
    left: 'left',
    formatter: function (name) {
      return `${name} {count|${dataList
        .filter((a) => a.name === name)
        .map((a) => a.count)}}`;
    },
    textStyle: {
      rich: {
        'count': {
          align: 'right',
          color: 'red'
        }
      }
    }
  }

自定义样式的Echarts图例

问题描述投票：0回答：1

1个回答

最新问题

自定义样式的Echarts图例

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1