echars 柱状图 配置

先来图片，本文配置的是下图红圈内的柱状图
不要diss我说这个可视化界面多low，我只是个无辜的前端，我也觉得low，但是大佬们喜欢，我有啥办法，嘿嘿

引入依赖

<script type="text/javascript" src="js/echarts.js"></script>

挂载节点

 <div id="chart-line-bar" class="chart-area"></div>

配置

        //话务个时段统计 -- 左侧柱状图
        function TrafficTimeLeft(xdata, ydata) {
            console.log(xdata, ydata)
            var myChartLeft = echarts.init(document.getElementById('chart-line-bar')); //左侧柱状图
            // 指定图表的配置项和数据
            var optionLeft = {
                title: {
                    text: '话务各时段统计',
                    x: 'left',
                    textStyle: {//标题颜色
                        color: "#fff",
                        fontSize:'12px'
                    }
                },
                backgroundColor: 'rgba(4,27,76,0.43)',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: '18%',
                    left: '7%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    //设置坐标轴字体颜色和宽度
                    axisLine: {
                        lineStyle: {
                            color: "#80B8D4",
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    //设置坐标轴字体颜色和宽度
                    axisLine: {
                        lineStyle: {
                            color: "#80B8D4",
                        }
                    },
                    splitLine: { show: false },
                    // name: '话务各时段统计'
                },
                series: [
                    {
                        name: '话务统计',
                        type: 'bar',
                        barWidth: '45%',
                        data: ydata,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#1268f3" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#08a4fa" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#01ccfe" // 100% 处的颜色
                                }], false),
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                        },
                    }
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartLeft.setOption(optionLeft);
        }
        //暂无接口，模拟数据
        var xdata = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'];
        var ydata = [30, 21, 13, 38, 72, 80, 72, 101, 53, 81, 90, 80];
        TrafficTimeLeft(xdata, ydata);