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

最新推荐文章于 2025-05-27 08:38:09 发布

晓晓爱车

最新推荐文章于 2025-05-27 08:38:09 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签：前

本文链接：https://blog.youkuaiyun.com/qq_42286670/article/details/81156741

echarts 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何自定义Echarts中的折线图、柱状图、饼图和环形图的颜色。通过设置series中的areaStyle, lineStyle, itemStyle和textStyle属性，可以调整折线和区域颜色。对于环形图，通过定义colors对象和使用函数返回颜色值来实现。柱状图颜色修改同样在itemStyle的normal中设置color。饼图颜色则需要单独处理。内容仅供参考，可能存在优化空间。" 47132677,5028547,LCD1602液晶显示屏字符输入教程,"['嵌入式硬件', '单片机开发', '液晶显示屏']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做数据表格时用过echart，发现颜色不喜欢随机生成的，在这里简单记录一下自定义线条颜色。

1.折线图修改颜色：


    option2 = {

        xAxis: {
            type: 'category',
            name: 'X',
            data: ['2013', '2014', '2015', '2016', '2017']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'log',
            name: 'Y',
        },
        series: [
            {
                name: '第一个',
                type: 'line',
                areaStyle: {normal: {}},
                lineStyle: {
                    normal: {
                        width: 1,
                        color:'#e6b459'
                    }
                },
                itemStyle:{
                    normal:{
                        label: {
                            show: true,
                            textStyle: {
                                color: '#e6b459'
                            }
                        },
                        barBorderColor:'#e6b459',
                        color:'#f5e1bd'

                    },
                    emphasis:{
                        color:'white'
                    }
                },
                data: [154, 153, 159, 157, 156]
            },
            {
                name: '第二个',
                type: 'line',
            },
                data: [114, 133, 119, 117, 113]
            },
            {
                name: '第三个',
                type: 'line',
            },
                data: [94, 93, 99, 77, 97]
            }
        ]
    };

series 中的

areaStyle，lineStyle，itemStyle，textStyle中可设置自定义折线及区域颜色。

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

                    },

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

如上仅个人解决方案，试了可行，也许不是最优解决方案。

如有错误：望各位高手不吝赐教，我会及时修改，能获得成长！