// 引入 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