echarts图表常用到的设置

有段时间没有写博客了，今天搞点图表的设置吧,

柱状图常用

　1. 图表重合，

　2. 图表头部显示为圆角

　3. 图表宽度设置

　4. 图表设置渐变色

option = {
    tooltip: {
                trigger:"axis",
                axisPointer: {
                    type: 'shadow'  // 鼠标经过时显示数据
                }
            },
            legend: {
                data:['增长率', '降低率']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            color:['#ccc','red'],
            yAxis: {
                axisLabel:{
                    formatter:"{value}%"
                }
            },
            series: [{
                name: '降低率',
                type: 'bar',
                z:"-1",
                barGap: '-100%',
                data: [100, 100, 100, 100, 100, 100],
                barWidth: 30,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [10, 10, 0, 0],
                        label: {
                            show: true
                        }
                    },
                    normal: {
                        // 柱状图圆角
                        barBorderRadius: [10, 10, 0, 0],
                        label: {
                            show: false,
                            // 用来设置图表字体的样式
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '20',
                                fontFamily: '微软雅黑',
                                color: 'red'
                            }
                        },
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                            [
                                {offset: 0, color: '#000'},
                                {offset: 0.5, color: '#888'},
                                {offset: 1, color: '#ddd'}
                            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                        )
                    }
                }
            },
            {
                name: '增长率',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                barWidth: 30,
                itemStyle: {
                    normal: {
                        // 柱状图圆角
                        barBorderRadius: [10, 10, 0, 0],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                            [
                                {offset: 0, color: 'red'},
                                {offset: 0.5, color: 'blue'},
                                {offset: 1, color: '#ddd'}
                            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                        )
                    }
                }
            }]
};

图表重合设置

series: [{
           name: '降低率',
           type: 'bar',
           z:"-1",  // z值大的会覆盖z值小的， 和barGap配合使用
           barGap: '-100%',  // 图表偏移量，设置为 -100% 就可以达到重合的效果
           data: [100, 100, 100, 100, 100, 100],
   },
   {
           name: '增长率',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20],
           barWidth: 30,
   }]

图表头部显示为圆角

series: [{
                name: '降低率',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                itemStyle: {
                    emphasis: {  // 鼠标经过时的一些设置
                        barBorderRadius: [10, 10, 0, 0],  // 设置圆角
                        label: {
                            show: true  // 设置值是否显示
                        }
                    },
                    normal: {
                        // 柱状图圆角
                        barBorderRadius: [10, 10, 0, 0],  // 设置圆角【'左上', '右上', '右下', '左下'】
                        label: {
                            show: false,  // 设置值是否显示
                            // 用来设置值的字体的样式
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '20',
                                fontFamily: '微软雅黑',
                                color: 'red'
                            }
                        },
                    }
                }
            }]

图表宽度设置

series: [{
     name: '降低率',
     type: 'bar',
     data: [100, 100, 100, 100, 100, 100],
     barWidth: 30,  // 设置柱状图的宽度
}]

图表设置渐变色

series: [{
                name: '降低率',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 100],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                            [
                                {offset: 0, color: '#000'},
                                {offset: 0.5, color: '#888'},
                                {offset: 1, color: '#ddd'}
                            ]  // 设置渐变色 从上到下
                        )
                    }
                }
            }]

最终展示为

 

 因为只是用来实现功能，所以颜色搭配很low，请多担待