北京各春游景点人数统计echarts 柱状配置项内容和展示

支持区域缩放 symbol图形自定义(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];
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];
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',
            
        },
        subtext:'作者:花自飘凌水自流',
        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,
        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,
                
                    },
                },
        },
    ]
};