Echarts在线免费图表

 
            let barTopColor = ["#CBB835", "#33C6E2", "#16B5FF", '#157FFE', '#8F48F0', '#CD597A'];
let barBottomColor = ["#D09311", "#279AB0", "#0B5FFF", '#154AD2', '#670BFF', '#90222D'];
option = {
    backgroundColor: '#051D44',
    title: {
        show: false,
        text: '一行动一活动开展情况',
        top:20,
        left:'center',
        textStyle:{
            color:'#00eaff',
            fontSize:18,
            fontWeight:'normal'
        }
    },
    tooltip: {
        trigger: 'axis',
        formatter: '一行动一活动开展情况<br>{b}：{c}',
        backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
        textStyle: {
            color: '#fff'
        },
        borderColor: "rgba(18, 57, 60, .8)",
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(0, 11, 34, .4)',
            }
        }
    },
    grid:{
        top:'14%',
        bottom:'1%',
        left: '2%',
        right: '2%',
        containLabel: true
    },
    xAxis: {
        data: ['岗位大练兵', '业务大比拼', '关爱留守老人', '关爱留守儿童', '关爱留守妇女', '关爱特殊群体'],
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle:{
                color:'#1C82C5'
            }
        },
        axisLabel: {
            show: true,
			rotate: 20,
            margin: 30,
            textStyle: {
                fontSize: 14,
                color: '#DEEBFF',
				align:'center'
            }
        },
        interval: 0
    },
    yAxis: {
        splitLine: {
            show: true,
			lineStyle: {
				color: 'rgba(28, 130, 197, .3)'
			}
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle:{
                color:'#1C82C5'
            }
        },
        axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
                fontSize: 12,
                color: '#DEEBFF',
            }
        },
    },
    series: [{
        name: '一行动一活动开展情况',
        type: 'pictorialBar',
        symbolSize: [26, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
            normal: {
                color: function(params) {
                    return barBottomColor[params.dataIndex];
                }
            }
        },
        label: {
            show: true,
            position: 'top',
            fontSize: 16
        },
        symbolPosition: 'end',
        data: [22,23,18,14,13,18],
    }, {
        name: '一行动一活动开展情况',
        type: 'pictorialBar',
        symbolSize: [26, 10],
        symbolOffset: [0, 5],
        z: 12,
        itemStyle: {
            normal: {
                color: function(params) {
                    return barTopColor[params.dataIndex];
                }
            }
        },
        data: [22,23,18,14,13,18],
    },{
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    return new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                                offset: 1,
                                color: barTopColor[params.dataIndex]
                            },
                            {
                                offset: 0,
                                color: barBottomColor[params.dataIndex]
                            }
                        ]
                    );
                },
                opacity: .9
            }
        },
        z: 16,
        silent: true,
        barWidth: 26,
        barGap: '-100%',
        data: [22,23,18,14,13,18],
    }]
};