echartr 饼图 hover 时各个 item 的数据在中间显式

最新推荐文章于 2023-07-19 10:47:12 发布

原创最新推荐文章于 2023-07-19 10:47:12 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

echarts相关专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了如何使用ECharts库创建一个饼图，包括设置pie类型的图表，调整半径，显示标签，以及自定义标签样式。示例中展示了数据项包括'名称安安'、'Direct'和'Email'，并提供了高亮强调的标签样式。

如图：

option = {
  series: [
    {
      name: 'aaa',
      type: 'pie',
      radius: ['20%', '40%'],
      label: {
        show: false,
        position: 'center',
        formatter: '{value|{c}} \n {name|{b}} \n {percent|{d}}%',
        rich: {
          name: {
            color: '#2892E8',
            lineHeight: 28,
            fontSize: 15,
            fontWeight: 'bold'
          }
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '名称安安' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
      ]
    }
  ]
};