Echarts在线免费图表

 
            var color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: '#fff'
}, {
    offset: 0.4,
    color: '#d3beff'
}, {
    offset: 0.9,
    color: '#6862ff'
}]);
var color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: '#FFFFC2'
}, {
    offset: 1,
    color: '#F8F876'
}]);
option = {
    backgroundColor: '#000',
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['教师（人）', '占比(%)'],
        align: 'left',
        left: 'center',
        textStyle: {
            fontSize: 20,
            color: '#fff'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['高级', '一级', '二级', '三级', '未评'],
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 32,
                color: '#fff'
            }
        }
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        axisTick: {
            show: true
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                fontSize: 32,
                color: '#fff'
            }
        },
        splitLine: {
            show: true
        },
        splitArea: {
            show: false
        },
        max: 30000
    }, {
        type: 'category',
        axisTick: {
            show: true
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                fontSize: 32,
                color: '#fff'
            }
        },
        splitLine: {
            show: false
        },
        splitArea: {
            show: false
        },
        data: ['0%', '10%', '20%', '30%', '40%', '50%', '60%']
    }],
    series: [{
        name: '教师（人）',
        type: 'bar',
        barWidth: '34',
        data: [28010, 19960, 10030, 28570, 25470],
        itemStyle: {
            normal: {
                barBorderRadius: 36,
                color: color1
            }
        }
    }, {
        name: '占比(%)',
        type: 'line',
        symbol: 'circle',
        symbolSize: 20,
        itemStyle: {
            normal: {
                color: '#fff'
            }

        },
        lineStyle: {
            normal: {
                color:'#ffff48',
                width: 6
            }
        },
         areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(241,244,75,0.5)'
                }, {
                    offset: 1,
                    color: 'rgba(199, 237, 250,0.2)'
                }], false)
            }
        },
        data: [16010, 12960, 5030, 2570, 15470]
    }]
};