ECharts 中的饼图是一种常见的图表类型,用于显示数据的占比关系。以下是一个简单的 ECharts 饼图的配置示例:
// 引入 ECharts 库
import echarts from 'echarts';

// 初始化图表
var myChart = echarts.init(document.getElementById('myPieChart'));

// 配置饼图
var option = {
    title: {
        text: '饼图示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%', // 饼图半径,可以是百分比或像素值
            center: ['50%', '60%'], // 饼图中心位置
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用配置设置图表
myChart.setOption(option);

在这个示例中,我们创建了一个简单的饼图,用于展示不同访问来源的占比情况。关键的配置选项包括:

  •  title: 配置标题,指定标题文字和位置。

  •  tooltip: 配置提示框,显示鼠标悬停时的信息。

  •  series: 配置图表系列,这里使用了 pie 类型的系列。

  - radius:设置饼图半径,可以是百分比或像素值。
  - center:设置饼图中心位置的坐标。
  - data:配置饼图的数据项。

你可以根据实际需求调整这些配置选项,以及添加其他配置来满足定制化的需求。详细的配置选项和示例可以在 [ECharts 官方文档](https://echarts.apache.org/zh/index.html) 中找到。


转载请注明出处:http://www.pingtaimeng.com/article/detail/13202/ECharts