echarts柱形图

<div id="tourllEchar" ref="reftourll"></div>

　　

tourllEcharts(){
            let tourllech = this.$echarts.init(this.$refs.reftourll)
            var xdata = ['南北湖', '三毛乐园', '绮园', '海伦庄园', '泰山核电小镇', '万奥农庄', '猪猪星球','山水六旗'];
            var option = {
                color: ['#3398DB'],
                tooltip : {
                    show: false,
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : xdata,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        splitLine: {
                            show: false,//去除网格线
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#fff'
                            },
                            fontSize: 28   //轴分类字体大小
                        },
                    }
                ],
                yAxis : [
                    {
                        name: '人数/景点',
                        type : 'value',
                        nameGap: 25, //轴名称与轴线间距
                        nameTextStyle: {
                            fontSize : 24,   //y轴坐标轴名称大小
                            color: '#fff',
                        },
                        splitLine: {
                            show: true,//去除网格线
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#fff'
                            },
                            fontSize: 28,//字体大小
                        },
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '30%',
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        data:[10, 52, 200, 334, 390, 330, 220,222],
                        itemStyle: {
                            normal: {
                                label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: 'white',
                                            fontSize: 30   //柱形图每个柱上边的标注
                                        }
                                },
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#228FFE'
                                }, {
                                    offset: 1,
                                    color: '#52C5FF'
                                }]),
                            }
                        },
        
                    }
                ]
            };
            tourllech.setOption(option);

        }