Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

Echart使用属性


1、修改每个柱状图颜色

 

    series: [

        {

            name: ‘2011年’,

            type: ‘bar’,

            data: [18203, 23489, 29034, 104970, 131744, 630230],

               itemStyle: {   

                //通常情况下:

                normal:{  

         //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组

                    color: function (params){

                        var colorList = [‘rgb(164,205,238)’,’rgb(42,170,227)’,’rgb(25,46,94)’,’rgb(195,229,235)’];

                        return colorList[params.dataIndex];

                    }

                }

            },

        }

    ]

2、设置x轴和y轴的文字颜色和大小

代码红色部分,y轴的也是这样设置

 xAxis: {

            type: ‘value’,

            boundaryGap: [0, 0.01],

            axisLabel :{

                color:’#C8C8C8′,

                fontSize:’60%’

               formatter:'{value} %’//给x轴坐标数据添加%

            }

        },

3、为每个柱状图的柱子设置不同颜色

 

series: [

            {

                name: ‘年度数据’,

                type: ‘bar’,

                data: [20, 89, 90, 10, 31],

            itemStyle: {  

                //通常情况下:

               normal:{ 

            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环

使用该数组

                    color: function (params){

                        var colorList = [‘#E29B21′,’#4D691E’,’#01C1BA’,’#00E2FF’,’#006B92′];

                        return colorList[params.dataIndex];

                    }

                },

                //color:’transparent’,

                //borderColor:[‘#E29B21′,’#4D691E’,’#01C1BA’,’#00E2FF’,’#006B92′],

                borderWidth:’1′

            },

            }

             

           

        ]

 

 

4、设置x轴堆叠图属性

 

  series : [

            

                {

                    name:’邮件营销’,

                    type:’bar’,

                    data:[220, 182, 191, 234, 290, 330, 310,320,290],

                    itemStyle :{

                        color: ‘transparent’,//设置柱子中间的颜色为空

                        borderWidth:1,//设置柱子的边框宽度

                        borderType:”solid”,

                        borderRadius:0,

                        barBorderRadius:[30, 30, 30, 30],//设置柱子四个角的弧度

                        borderColor:’#00E6FF’, //设置柱子边框的颜色

                      

                    },

                 

                },

                {

                    name:’联盟广告’,

                    type:’bar’,

                    barGap :’-100%’,

                    data:[120, 132, 101, 134, 90, 230, 210,120,160],

                    itemStyle :{

                        color: ‘transparent’,

                        borderColor : ‘#6BC305’,

                        borderWidth:1,

                        borderRadius:0,

                        borderType:”solid”,

                        barBorderRadius:[30, 30, 30, 30],

                        

                    },

              

                

                }                

            ]

效果图

5、legend属性

 

legend : {

                   // orient : ‘horizontal’, //布局横向布局,纵向布局属性:vertical

                    x : ‘right’,   // 图例显示在右边

                    padding: [10,30,0,0],    // 设置图例的位置,与css中的padding属性很像

                    textStyle:{    // 图例文字的样式

                        color:’#FFFFFF’,

                        fontSize:12

                    },

            //设置每个图例的颜色和形状

                    data : [

                    {

                        name:’name1′,

                        textStyle: { color:’#00E6FF’},

                        icon:’line’

                    },{

                        name:’name2′,

                        textStyle: { color:’#00FF00′},

                        icon:’line’

                    }

                    ]

                    

                },

 

效果:

6、雷达图网格颜色设置

备注效果图中蓝色折线的颜色通过color来控制,如果有多个线条,颜色用数组的形式

 

 radar: {

                // shape: ‘circle’,

                name: {

                    color:’#C8C8C8′,

                    textStyle: {

                        color: ‘#C8C8C8’,

                        backgroundColor: ‘#999’,

                        borderRadius: 3,

                        padding: [3, 5]

                   }

                },

                splitArea : {

                    show : false,  

                },

              //设置发散网格的颜色和是否显示

                axisLine: {

                    show:true,

                    lineStyle: {

                        color: ‘#232323’

                    }

                },

             //设置圆环网格的颜色

                splitLine: {

                    lineStyle: {

                        color: ‘#232323’

                    }

                } }

效果图

7、设置柱状图的颜色显示百分比    opacity:0.5

效果:

转载自:https://blog.csdn.net/m0_37027631/article/details/82985120