ECharts-饼状图-扇区设置颜色,修改图例大小、修改图例文字颜色

// 基于准备好的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