基础饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
饼状图显示信息,内容,值,百分比都显示的代码
series: [{
name: '产品成本',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: production,
label: {
normal: {
show: true,
formatter: '{b}:{c}' + '\n\r' + '({d}%)'
}
}
}]
最简单的饼图
饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例--拾光分享网</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'pie',
data: [{
value: 335,
name: '直接访问'
},
{
value: 234,
name: '联盟广告'
},
{
value: 1548,
name: '搜索引擎'
}
],
label: {
normal: {
show: true,
formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
}
}
}],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
