《前端》echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景

echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景https://blog.csdn.net/orangeverity/article/details/107160849

 

 

xAxis的axisLabel：

ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层（间隔）的现象，为什么呢？其实这种现象是很正常的，它是怎么产生的呢？

原来ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。

{string | number}interval

'auto'

类目型

标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） |{number}（用户指定选择间隔）

 

默认情况下此属性值为”auto“，会自动根据刻度个数进行调整。

如果你想要设置所有刻度均显示出来，则只需要设置当前属性值为0即可，示例代码形如：

 

xAxis : [{
    type : 'category',
    boundaryGap : false,
    data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
     axisLabel:{
         //X轴刻度配置
         interval:0 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
     }
}],

想要间隔多少个这里就可以配置多少的数值即可，根据个人需要作出相应配置。

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
            axisLabel:{
                 //X轴刻度配置
                 interval:3 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

xAxis的axisTick

 

Echarts的barBorderRadius四个参数的作用：

https://blog.csdn.net/qiudechao1/article/details/96159286

ECharts图表实战经验1：如何设置图表同序列不同数据点的独立颜色值 - 王春天 - 博客园 

https://www.cnblogs.com/spring_wang/p/4112691.html

1、单序列的柱状图

http://echarts.baidu.com/doc/example/bar14.html

http://echarts.baidu.com/doc/example/bar15.html

数据点的属性首先是通过itemStyle节点进行控制的，我们要控制数据点的颜色，自然我们就需要设置color，另外根据ECharts的API介绍，color是支持Function函数的。

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
           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]
                    }
                }
            }
        }
    ]
};

示例二：通过配置数据点的颜色扩展属性来达到控制不同数据点的颜色

自己能够设置每一个数据点的颜色值，而非通过设置颜色数组的形式。

1、我们需要改写series的data格式，之前是一个一维数据类型的数组，先走我们需要将至变成一个对象类型的一维数组，如下所示；

data:[{
    value:2.0,
    color:"red"
    }, 4.9, 7.0, {
    value:23.2,
    color:"green"
}, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

某些数据点我设置了其color属性，也就是我要用所配置的颜色来渲染柱子。

2、为了没有配置颜色属性的数据点的颜色显示有所归属

（因为我们通过params找不到当前序列的颜色，所以我们最好自己给其series设置一个颜色属性。如下所示：

{
    name:'蒸发量',
    type:'bar',
    color:"#ff7f50",
    data:[{
        value:2.0,
        color:"red"
        }, 4.9, 7.0, {
        value:23.2,
        color:"green"
        , 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
     itemStyle: {
         normal: {
             color: function(params) {                    
             if(params.series.data[params.dataIndex] != null && params.series.data[params.dataIndex].color != undefined)
             {
                 return params.series.data[params.dataIndex].color;
              }else{
                 return params.series.color;
                    }
               }
          }
     }
}