Echarts在线免费图表

 
            
var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yData = [110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220]
var maxNum = Math.max.apply(null, yData);
var yDataMax = Array.from({ length: xData.length }, () => maxNum * 1.2)
var option = {
    backgroundColor: '#111c4e',
    tooltip: {
        trigger: 'axis',
        formatter: function (prams) {
            return '用电量：' + prams[0].data + '千瓦时';
        },
    },
    grid: {
        left: 100,
        top: 100,
        right: 100,
        bottom: 50,
    },
    xAxis: [
        {
            type: 'category',
            gridIndex: 0,
            data: xData,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#0c3b71',
                },
            },
            axisLabel: {
                show: true,
                color: '#fff',
                fontSize: 14,
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            nameTextStyle: {
                color: 'rgb(170,170,170)',
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#266399', //网格线的颜色
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#008de7", //网格线的颜色
                },
            },
            axisLabel: {
                color: '#fff',
                fontSize: 14,
                formatter: '{value}',
            },
        },
    ],
    series: [
        {
            type: 'bar',
            barWidth: 30,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(243,200,5,1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(243,200,5,0.5)',
                        },
                    ]),
                },
            },
            data: yData,
            zlevel: 0,
            markLine: {
                precision: 1, //标线数值的精度，在显示平均值线的时候有用（即小数点后第几位）
                data : [
                    {type : 'average', name: '平均值'}
                ],
                lineStyle: {
                    normal: {
                        type: 'dashed',
                        color: '#ffffff',
                        width: 2,
                    },
                },
                label:{
                    show: true,
                    color:'#ffffff',
                    fontSize:10,
                    formatter:function(params){ //强制设置平均值
                        var res = `平均值:${params.value}千瓦时`
                        return res;
                    }
                }
            },
        },
        {
            // 值分隔
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#0F375F',
                },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 3,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [30, 3],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            // symbolBoundingData: this.total,
            data: yData,
            width: 25,
            zlevel: 3,
        },
        {
            name: '背景',
            type: 'bar',
            tooltip: { show: false },
            barWidth: 30,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(243,200,5,0.1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(243,200,5,0.5)',
                        },
                    ]),
                },
            },
            barGap: '-100%',
            data: yDataMax, // 最大值
            zlevel: -1,
        },
        {
            // 值分隔
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#0F375F',
                },
            },
            symbolRepeat: 'fixed',
            symbolMargin: 3,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [30, 3],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            data: yDataMax,
            barGap: '-100%',
            width: 25,
            zlevel: 0,
        }


    ],
};