echarts如何给柱形图的每个柱子设置不同颜色

总结下这几日用echarts库作基本图形遇到的一些问题。

echarts快速上手可参考官网:

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

在作柱形图时,如果需要给每个柱子设置不同颜色,参考以下说明:

复制代码
复制代码
var option = {
    xAxis: {
        data: ["苹果","小米","华为","其他"]  
    },
    yAxis: {
        splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
    },
    series: [{
            name: '手机品牌',
            type: 'bar',
            data: [19, 15, 40, 32],
            //设置柱子的宽度
            barWidth : 30,
            //配置样式
            itemStyle: {   
                //通常情况下:
                normal:{  
            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: function (params){ var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)']; return colorList[params.dataIndex]; } }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, }],
     //控制边距  grid: { left: '0%', right:'10%', containLabel: true, }, };
复制代码
posted @   雪莉06  阅读(2392)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示