Echarts自定义图形颜色的写法总结

66 阅读 0 评论 44 点赞

我是靠谱客的博主大意烤鸡，这篇文章主要介绍Echarts自定义图形颜色的写法总结，现在分享给大家，希望可以做个参考。

一、官方文档，直接在选项属性中设置。

复制代码

1
2
3
4
5
6
7
  color:[ 
    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', 
    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', 
    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', 
    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' 
],

默认颜色序列，循环使用。

二、在series序列中使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}n{c}'
                    }
                }
            },