echarts 饼图基本配置

Echarts饼图配置指南

最新推荐文章于 2025-08-09 13:06:12 发布

iwusan

最新推荐文章于 2025-08-09 13:06:12 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_25027593/article/details/82454836

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Echarts中配置饼图，包括基本设置和样式调整。详细步骤可参照已有的柱状图教程进行迁移。

var getOption1 = function(chartType) {
	var chartOption1 = {
		calculable: false,
		title: {
			text: '2018年投标情况概览',
			x: 'center',
			textStyle: {
				"color": "#8ECBFF"
			},
		},
		legend: {
			top: 25,
			data: ['中标', '落标', '未开标', '评标中'],
			textStyle: { //图例文字的样式
				color: '#8ECBFF',
				fontSize: 13
			}
		},
		series: [{
			type: 'pie',
			radius: '65%',
			center: ['50%', '63%'],
			label: { //饼图图形上的文本标签
				normal: {
					show: true,
					textStyle: {
						fontWeight: 700,
						fontSize: 13 //文字的字体大小
					},
					formatter: '{b}:{c}: ({d}%)',
				}
			},
			data: [{
				value: 10,
				name: '中标',
				itemStyle: {
					normal: {
						color: '#F4AA61'
					}
				}
			}, {
				value: 32,
				name: '落标',
				itemStyle: {
					normal: {
						color: '#4EC7B8'
					}
				}
			}, {
				value: 10,
				name: '未开标',
				itemStyle: {
					normal: {
						color: '#90C9F6'
					}
				}
			}, {
				value: 1,
				name: '评标中',
				itemStyle: {
					normal: {
						color: '#CACACB'
					}
				}
			}]
		}]
	}
	return chartOption1;
};

怎么使用参考另一篇柱状图文章。

效果图：