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

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

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

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

二、在series序列中使用

 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}'
                    }
                }
            },

优先顺序,itemStyle>color.

漏刻有时(WWW.LOCKDATA.CN),数据可视化大屏,挖掘大数据背后的价值。

已标记关键词 清除标记
echarts的图例的图形颜色怎么改变?我的一直是灰色的 然后hover滑过时 就变成了和 下面柱形图一直的颜色;我不需要hover,只需要它没有hover的时候也和柱形图的颜色保持一致 ![图片说明](https://img-ask.csdn.net/upload/201702/24/1487921689_54825.png) ![图片说明](https://img-ask.csdn.net/upload/201702/24/1487921734_446806.png) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="echarts-all.js"></script> <style> .aaa{ width: 500px; height: 500px; } </style> </head> <body> <div class="aaa" id="annular"></div> <script> var aaa = echarts.init(document.getElementById('annular')); option = { title: { x: 'center', text: 'ECharts例子个数统计' }, tooltip: { trigger: 'item' }, legend:{ //selectedMode: false, x:'right', y:70, align:'right', itemWidth:16, itemGap:20, orient:'vertical', data:[{name:'消费贷',textStyle:{color:'#C1232B'}}, {name:'现金贷',textStyle:{color:'#B5C334'}}, {name:'教育贷',textStyle:{color:'#FCCE10'}} ], selected:{ '消费贷':true, '现金贷':true, '教育贷':true } }, color:['#C1232B','#B5C334','#FCCE10'], toolbox: { show: true, feature: { dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, grid: { borderWidth: 0, y: 80, y2: 60 }, xAxis: [ { type: 'category', show: false, data: ['消费贷', '现金贷', '教育贷'] } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: 'ECharts例子个数统计', type: 'bar', 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}' } } }, data: [12,21,10], markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [ {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol:'none'}, {xAxis:1, y: 350, name:'Bar', symbolSize:20,symbol:'none'}, {xAxis:2, y: 350, name:'Scatter', symbolSize:20,symbol:'none'} ] } } ] }; aaa.setOption(option); </script> </body> </html> ```
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页