
// 基于准备好的dom,初始化echarts实例\n
// 需要传入容器的dom对象
const myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item' // 与柱状图、折线图不同
},
legend: {
orient: 'vertical', // 垂直显示图例
left: 'left',
itemWidth:5, // 图例标记的图形宽度
data: [{
name: '18-30',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
},
{
name: '31-40',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
},
{
name: '41-50',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
},
{
name: '51-60',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
},
{
name: '65岁以上',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
},
{
name: '未标明',
// 设置文本颜色
textStyle: {
color: 'rgb(131,191,246)'
}
}]
},
// textStyle:{
// color:"#fff"
// },
series: [
{
type: 'pie',
radius: '50%', // 半径是容器的一般
data: [
{
value: 335,
name: '18-30',
label:{ // 文字样式
color: 'rgb(131,191,246)' // 文字颜色
},
itemStyle:{ // 扇区样式
color:"rgb(131,191,246)" // 扇区颜色
}
},
{
value: 310,
name: '31-40',
label:{
color: 'rgb(35, 183, 229)'
},
itemStyle:{
color:"rgb(35, 183, 229)"
}
},
{
value: 234,
name: '41-50' ,
label:{
color: 'rgb(154, 168, 212)'
},
itemStyle:{
color:"rgb(154, 168, 212)"
}
},
{
value: 135,
name: '51-60' ,
label:{
color: 'rgb(86, 74, 163)'
},
itemStyle:{
color:"rgb(86, 74, 163)"
}
},
{
value: 136,
name: '65岁以上',
label:{
color: 'rgb(250,212,0)'
},
itemStyle:{
color:"rgb(250,212,0)"
}
},
{
value: 1548,
name: '未标明',
label:{
color: 'rgb(24, 141, 240)'
},
itemStyle:{
color:"rgb(24, 141, 240)"
}
},
],
emphasis: {
itemStyle: {
shadowBlur: 10, // 阴影的模糊大小
shadowOffsetX: 0, // 扇区与右侧阴影的距离
shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
原文出处:/show_1IX6k0rWOhcj.html