Echarts 单序列数据颜色color交替实现

来源：互联网发布：java并发编程的艺术编辑：程序博客网时间：2024/06/08 11:18

使用了Echarts的广大朋友们一定发现了option的color属性只对多序列有效果，单序列的图形如果你不使用回调函数自定义，就只能以单一颜色展示数据。本文档通过对series.itemStyle.normal.color设置回调函数来达到多种颜色交替出现的效果。

作者：Reese
时间：2015-08-21
备注：希望这个文档能对大家有帮助，有用你就悄悄copy走，再默默地给我点个赞~ (≧▽≦)/

/**    series.itemStyle.normal.color  单序列多种颜色交替出现，交替数可控    通过设置alternateNumber控制交替数量    作者：Reese    版本：V0.1    时间：2015-08-12    使用：        在myChart.setOption(option);之前粘贴如下代码：        option.series[0].itemStyle={             normal: {                color: function(params) {                    //……                }             }        };        或者直接在series里定义 */function(params) {    var index = params.dataIndex;//表示当前的数据条的索引    var alternateNumber = 2;//表示按几种颜色交替出现    var newColor="";//表示最终显示的颜色    /**    自定义的颜色池    如果颜色池长度不够，将无法取得正确的颜色，所以有必要使    index的最大值小于colorList.length    */    var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                     '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',                     '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'                    ];    //当当前的索引值小于交替值的时候    if(index < alternateNumber){        //取出当前索引值对应的colorList的颜色        newColor = colorList[index];    }else{        /**当当前的索引值大于等于交替值的时候*/        var rowNumber=Math.floor(index/alternateNumber);//表示当前的数据出现在几次        //通过表达式计算返回正确的colorList索引        newColor = colorList[index-rowNumber*alternateNumber];        }    }    return newColor}

PS：代码不多，不过因为人笨思考了半天才想出了这个公式 (╥╯^╰╥)

Part 3 示例Demo

<!-- Echart series.itemStyle.color 单序列数据颜色交替实现效果测试文档作者：Reese版本：V0.1时间：2015-08-12                --><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Test</title></head><body>    <div id="main" style="width: 550px; height: 300px"></div>    <div id="ss" ></div>    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    <script type="text/javascript">        require.config({            paths : {                echarts : 'http://echarts.baidu.com/build/dist'            }        });        require(                [ 'echarts', 'echarts/chart/bar',                 'echarts/chart/line'                ],                function(ec) {                    var myChart = ec.init(document.getElementById('main'),                            'macarons');                    var option = {                        xAxis : {                            show : true,                            type : 'category',                            data : [ '一', '二', '三', '四',                                    '五','六','七','八','九','十']                        },                        yAxis : {                            type : 'value'                        },                        series : [ {                            name : "人数",                            type : "bar",                            data : [ 12, 24, 25, 11, 18 ,11,17,15,26,19]                        } ]                    };                    option.series[0].itemStyle={                              normal: {                                  color: function(params) {                                        var index = params.dataIndex;                                        var alternateNumber = 3;                                        var newColor="";                                                                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                                                         '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',                                                         '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'                                                        ];                                        if(index < alternateNumber){                                            newColor = colorList[index];                                        }else{                                            var rowNumber=Math.floor(index/alternateNumber);                                            newColor = colorList[index-rowNumber*alternateNumber];                                            }                                        return newColor                                        }                                    }                };                    myChart.setOption(option);                });    </script></body></html>

PS: 没错Demo是可以直接执行的哟 o(////▽////)q

0 0

Echarts 单序列数据颜色color交替实现

目录

Part 1 效果图展示

Part 2 回调函数

Part 3 示例Demo