apache echarts 饼状图
时间: 2023-07-29 08:06:21 浏览: 47
Apache ECharts 是一个基于 JavaScript 的可视化库,可以用于创建各种交互式图表和地图。要创建饼状图,需要使用 ECharts 的 'pie' 类型。
以下是一个简单的饼状图示例代码:
```javascript
var myChart = echarts.init(document.getElementById('main'));
// 饼状图的数据
var data = [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
];
// 饼状图的配置
var option = {
title : {
text: '访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这个示例代码创建了一个简单的饼状图,包括一个标题、一个提示框、一个图例和一个系列数据。其中,系列数据的类型是 'pie',并且使用了 itemStyle 属性来设置鼠标悬停时的样式效果。
你可以根据自己的需求修改数据和配置项来创建不同的饼状图。