echart 折线图、柱状图、饼图、环形图颜色修改

来源：互联网发布：流体力学计算软件编辑：程序博客网时间：2024/05/17 23:24

之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！

1、折线图修改颜色：

xAxis: {type: 'category',boundaryGap: false,data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']},yAxis: {type: 'value'},series: [{name:'员工数',type:'line',stack: '总量',itemStyle:{normal:{                       lineStyle:{                           color:'#b5b5b6'                       }   }},data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号！}]

其中的series 中的lineStyle中的 color 就是折现的颜色！

2、环形图修改颜色：

     function queryData2(){     var i=0;     var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];     myChart2 = echarts.init(document.getElementById('main2'));    option2 = {        tooltip : {            trigger: 'item',            formatter: "{a} <br/>{b} : {c} ({d}%)"        },        legend: {            orient : 'vertical',            x : 'left',            data:['女','男']        },        toolbox: {            show : true,            feature : {                    saveAsImage : {show: true}            }        },        calculable : true,        series : [            {                name:'性别结构',                type:'pie',                radius : ['30%', '70%'],                itemStyle : {                    normal : {                    color:function(){                    return colors[i++];                     },                        label : {                            show : false                        },                        labelLine : {                            show : false                        }                    },                    emphasis : {                        label : {                            show : true,                            position : 'center',                            textStyle : {                                fontSize : '30',                                fontWeight : 'bold'                            }                        }                    }                },                data:[]            }        ]    };          }

其中函数开始定义了一个 colors 对象这里保存的都是颜色值，而在series中的itemStyle中的normal 中定义了一个color：function(){ return colors[i++]} 函数，这个函数的作用就是随机获取颜色值。这样就修改了

3、柱状图：

 yAxis : [             {                 type : 'value'             }         ],         series : [             {                 name:'部门人数',                 type:'bar',                 data:[],                 //颜色                 itemStyle:{                     normal:{                       color:'#f5b031',                       }                },                 markPoint : {                     data : [                         {type : 'max', name: '最大值'},                         {type : 'min', name: '最小值'}                     ]                 },                 markLine : {                     data : [                         {type : 'average', name: '平均值'}                     ]                 }             }         ]

颜色的修改还是在series 中的itemStyle 中的normal 中的color这个值。

4、饼图颜色修改：

var  option = {              tooltip: {               trigger: 'item',               formatter: "{a} <br/>{b}: {c} ({d}%)"                 },              //设置饼图的颜色             color:['#f6da22','#bbe2e8','#6cacde'],             legend: {                      orient: 'vertical',                      x: 'left',                      data:['柴油','汽油','附属油'],                      show:false                    },

饼图的颜色修改和折线图环形图不同，他是单独出来的！

0 0