柱形图固定区间echarts 柱状配置项内容和展示

固定区间~

      //------------------------------------引用请注明出处

var dataBeast = [660, 841, 521, 820, 578, 727, 598, 792, 701, 660, 729, 782, 660, 841, 541, 513, 792, 701, 660, 729, 782, 660, 841, 521, 820, 578, 727, 598,789,549,523,549,754];
var dataBeauty = [541, 513, 792, 701, 660, 729, 782, 660, 841, 521, 820, 578, 727, 598, 660, 841, 521, 820, 578, 727, 598, 792, 701, 660, 729, 513, 792, 701,789,549,523,549,754];
var xAxisData = ['奥伦达部落', '皇后镇休闲度假村', '顶秀美泉小镇', '印象山庄', '普拉托休闲小镇', '爱斐堡国际酒庄', '古北水镇', '青龙峡', '云蒙山', '雁栖湖', '黄花城', '云蒙山', '黑龙潭', '白河大峡谷', '奥伦达部落', '皇后镇休闲度假村', '顶秀美泉小镇', '印象山庄', '普拉托休闲小镇', '爱斐堡国际酒庄', '古北水镇', '青龙峡', '云蒙山', '雁栖湖', '黄花城', '云蒙山', '黑龙潭', '白河大峡谷','第一','第二','第三','第四','第五'];
var dataTotal = function() {
    var data = [];
    for (var i = 0; i < dataBeauty.length; i++) {
        data.push(dataBeauty[i] + dataBeast[i]);
    }

    return data;
}

console.log(dataTotal());

option = {
    color: ['#019aba', '#7a201f', '#11565d'],
    backgroundColor: '#000',
    title: {
        text: '北京各春游景点人数统计',
        textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',

        },
        subtextStyle: {
            color: '#ddd',
        },
    },
    legend: {
        right: '20%',
        textStyle: {
            color: '#666',
            fontSize: 12,
        },
        data: ['帅哥', '美女', '总人数'],

        // 自定义legend图标
        // data: [
        //     {
        //         name: '帅哥',
        //         icon: 'image://url',
        //         textStyle: {
        //             color: 'red'
        //         }
        //     },
        //     {
        //         name: '美女',
        //         icon: 'image://url',
        //         textStyle: {
        //             color: 'red'
        //         }
        //     },
        //     {
        //         name: '总人数',
        //         icon: 'image://url',
        //         textStyle: {
        //             color: 'red'
        //         }
        //     },
        // ]
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#ddd',

            },

        },
    },

    toolbox: {
        right: 20,
        feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {
                type: ['line', 'bar']
            },
            // brush: {},
        }
    },

    grid: {
        left: 5,
        right: 20,
        top: 80,
        bottom: 50,
        containLabel: true,
    },
    xAxis: {
        show: true,

        axisLabel: {
            interval: 0,
            rotate: -20,
            margin: 30,
            textStyle: {
                color: '#ddd',
                align: 'center'

            },
        },
        axisTick: {
            alignWithLabel: true,
            lineStyle: {
                color: '#ddd',

            },
        },
        data: xAxisData,
    },
    yAxis: [{
            type: 'value',
            name: '(人/次)',
            nameTextStyle: {
                color: '#ddd',
            },
            axisLabel: {
                textStyle: {
                    color: '#ddd',
                },
            },
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: '#ddd',

                },
            },
            splitLine: {
                show: false,
            },
        },
        {
            type: 'value',
            name: '总人次',
            nameTextStyle: {
                color: '#ddd',
            },
            axisLabel: {
                textStyle: {
                    color: '#ddd',
                },
            },
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: '#ddd',

                },
            },
            splitLine: {
                show: false,
            },
        },
    ],
    dataZoom: [{
            show: true,
            height: 20,
            bottom: 10,
            start: 10,
            end: 60,
            zoomLock: true,//固定滑动区间
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "#d3dee5",
            },
            textStyle: {
                color: "#fff"
            },
            borderColor: "#90979c",
        },
        {
            type: "inside"
        }
    ],
    series: [{
            type: 'bar',
            name: '帅哥',
            stack: '游客人数',
            data: dataBeast,
            label: {
                normal: {
                    show: true,
                    position: 'insideTop',
                    offset: [0, 20],
                    textStyle: {
                        color: '#000',
                    },
                },
                emphasis: {
                    textStyle: {
                        color: '#fff',
                    },
                },
            },
        },
        {
            type: 'bar',
            name: '美女',
            stack: '游客人数',
            data: dataBeauty,
            label: {
                normal: {
                    show: true,
                    position: 'insideTop',
                    offset: [0, 20],
                    textStyle: {
                        color: '#000',
                    },
                },
                emphasis: {
                    textStyle: {
                        color: '#fff',
                    },
                },
            },
        },
        {
            type: 'line',
            name: '总人数',
            yAxisIndex: 1,
            stack: '游客人数',
            data: dataTotal(),
            label: {
                normal: {
                    show: true,
                    position: 'insideTop',
                    offset: [0, -30],
                    textStyle: {
                        color: '#666',
                    },
                },
                emphasis: {
                    textStyle: {
                        color: '#fff',
                    },
                },
            },
            // symbol:'image://../imgs/point1.png',
            symbolSize: 8,
            itemStyle: {
                normal: {
                    // "color": "#01B3D7",
                    barBorderRadius: 0,
                    label: {
                        show: false,
                        position: "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            lineStyle: {
                normal: {
                    color: '#01B3D7',
                    width: 1,

                },
            },
        },
    ]
};