zoukankan      html  css  js  c++  java
  • echarts 柱状图颜色设置

    • 在使用echarts时,遇到一个问题,就是本来应该直接在color中设置的多个颜色不起作用,只显示第一个颜色

    用demo中的代码举例:

    option = {
        color: ['#c23531','#2f4554', '#61a0a8'],
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    };
    

    对应显示的样式为:

    在这里插入图片描述

    这种情况下更改柱形图颜色的话,可以这样写:

    option = {
    	//这里就不重要了,可以删掉
        color: ['#c23531','#2f4554', '#61a0a8'],
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],

                      //设置柱的宽度,要是数据太少,柱子太宽不美观~
                        barWidth:70,

            type: 'bar',
            itemStyle: {
                normal: {
            //这里是重点
                    color: function(params) {
                    	//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                        return colorList[params.dataIndex]
                    }
                }
            }
        }]
    };
    

    如果希望自动循环已经有的颜色循环显示,可以添加一个判断:

    	//给大于颜色数量的柱体添加循环颜色的判断
    	if (params.dataIndex >= colorList.length) {
    	    index = params.dataIndex - colorList.length;
    	}

    最终效果图:

    在这里插入图片描述

     
    
    
     
  • 相关阅读:
    页面置换算法
    常见内存分配算法
    进程枚举
    NET程序之小试牛刀
    周易起名大师 v18.0算法分析
    VMP分析笔记(cmp命令在VM中的表达)
    一个重启验证软件的算法分析
    一次艰辛的算法分析---------飘零4.0封包分析
    某音频格式转换器算法分析
    一次苦中作乐的追码过程(下)
  • 原文地址:https://www.cnblogs.com/net-sky/p/13731867.html
Copyright © 2011-2022 走看看