数字分析--热力同比echarts 柱状配置项内容和展示

      var legendData = ['今日', '昨日'];
var xdata = [0, 500, 1000, 1500, 2000, 2500, 3000, 3500];
var xdata2 =  [0, 2000, 4000, 6000, 8000, 10000, 12000, 14000];
var dataArr=[
     [8400, 12500, 4200],
     [800, 2800, 1600]
    ];
option = {
    backgroundColor: 'rgba(0,0,0,.5)',
    tooltip: {
        // trigger: 'axis'
    },
    grid: {
        // left: "8%",
        // top: "12%",
        // right: "5%",
        // bottom: "8%",
        // containLabel: true
    },
    legend: {
        data: legendData,
        textStyle: {
            color: '#fff'
        },
    },
    calculable: false,
    xAxis: [{
            type: 'value',
            // boundaryGap: [0, 1],
            data: xdata,
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: "#02E3FF",
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0)'
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
        },
        {
            // type: 'category',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0)'
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                   color: "#02E3FF",
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
            data:xdata2
        }
    ],
    yAxis: [{
            type: 'category',
            data: ['车流', '客流', '资源消耗'],
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            axisTick: "none",
            axisLine: {
                lineStyle: {
                    color: '#135184',
                    width: 3
                }
            },
        },

    ],
    series: [{
            name: legendData[0],
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#248ff7'
                    }, {
                        offset: 1,
                        color: '#6851f1'
                    }]),
                    barBorderRadius: [0, 10, 10, 0],
                }

            },
            data:dataArr[0],
        },
        {
            name: legendData[1],
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                 normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                         color: 'rgba(1,38,93,0)'
                    }, {
                        offset: 1,
                        color: 'rgba(1,78,134.8)'
                    }]),
                    barBorderRadius: [0, 10, 10, 0],
                }
            },
            data: dataArr[1]

        }
    ]
};