Echarts在线免费图表

 
            let data = [];
data[0] = [ 0, 786, 835, 0];
data[1] = [ 786, 105, 56, 835];
xLabel = ['期初数', '本期增加数', '本期减少数', '期末数'];
option = {
    title: {
        text: '',
        subtext: '',
        sublink: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '10%',
        top:'5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        splitLine: {show: false},
        data: xLabel
    },
    yAxis: {
        name:'门店数量',
        type: 'value',
        axisLine: {
            symbol: ['none', 'arrow'], //两端都显示箭头
            symbolOffset: [0, 10] //箭头距离两端的距离,可为负数
        }
    },
    series: [
        {
            name: '辅助',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
            },
            emphasis: {
                itemStyle: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: data[0]
        },
        {
            name: '生活费',
            type: 'bar',
            stack: '总量',
            label: {
                show: false,
                position: 'inside'
            },
            data: data[1],
            itemStyle: {
                //通常情况下：
                normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function(params) {
                        var colorList = ['#516b91', '#edafda', '#93b7e3', '#516b91'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        },
    ]
};