关于echarts环形图各块颜色设置的方法

最新推荐文章于 2024-04-15 11:37:01 发布

WALTER_CHM

最新推荐文章于 2024-04-15 11:37:01 发布

阅读量1.3w

点赞数 4

文章标签： echarts css

本文链接：https://blog.youkuaiyun.com/WALTER_CHM/article/details/115599649

版权

本文介绍了三种设置echarts环形图各块颜色的方法：方法一是通过全局color数组设定；方法二是利用itemStyle.normal.color回调函数动态设置；方法三是直接在data中指定itemStyle.color。通过这些方法，可以实现图表颜色的个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于echarts环形图各块颜色设置的方法

方法一

option下

color:[’#45C2E0’, ‘#C1EBDD’, ‘#FFC851’,’#5A5476’,’#1869A0’,’#FF9393’],
option = {
tooltip: {
trigger: ‘item’
},
legend: {
top: ‘5%’,
left: ‘center’
},
color:[’#45C2E0’, ‘#C1EBDD’, ‘#FFC851’,’#5A5476’,’#1869A0’,’#FF9393’],
series: [
{
name: ‘城市’,
type: ‘pie’,
radius: [‘50%’, ‘70%’],
avoidLabelOverlap: false,
label: {
show: false,
position: ‘center’
},
emphasis: {
label: {
show: true,
fontSize: ‘40’,
fontWeight: ‘bold’
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: ‘北京’},
{value: 735, name: ‘上海’},
{value: 580, name: ‘广州’},
{value: 484, name: ‘深圳’},
{value: 300, name: ‘杭州’},
{value:456,name:“雄安”}
]
}
]
};

方法二

series下

itemStyle: {
normal: {
color: function(colors) {
var colorList = [
‘#45C2E0’, ‘#C1EBDD’, ‘#FFC851’,’#5A5476’,’#1869A0’,’#FF9393’
];
return colorList[colors.dataIndex]
}
}
},

option = {
backgroundColor: ‘#2c343c’,

title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
        color: '#ccc'
    }
},

tooltip: {
    trigger: 'item'
},

visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
        colorLightness: [0, 1]
    }
},
series: [
    {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
        ].sort(function (a, b) { return a.value - b.value; }),
        roseType: 'radius',
        label: {
            color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
        },
        itemStyle: {
            normal: {
                          color: function(colors) {
        var colorList = [
        '#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'
        ];
        return colorList[colors.dataIndex]
    }},
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },

        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
            return Math.random() * 200;
        }
    }
]

};

方法三

data下

itemStyle: {color:“black”}

option = {
title: {
text: ‘某站点用户访问来源’,
subtext: ‘纯属虚构’,
left: ‘center’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’,
},
series: [
{
name: ‘访问来源’,
type: ‘pie’,
radius: ‘50%’,
data: [
{value: 1048, name: ‘搜索引擎’,itemStyle: {color:“black”}},
{value: 735, name: ‘直接访问’},
{value: 580, name: ‘邮件营销’},
{value: 484, name: ‘联盟广告’},
{value: 300, name: ‘视频广告’}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
};