echarts 柱状图案例(屏幕自适应、元素自适应、动态显示、配置逻辑)

╰+哭是因爲堅強的太久メ 2021-07-24 20:14 930阅读 0赞

自适应:
     (1)window.onresize监听调用echarts.init对象.resize()方法实现图表自适应
     
     (2)获取图表容器的宽度/100,分成100份,然后根据份数来调整元素合适的大小
     
     (3)在第一次加载、刷新和窗口改变时,都需要实现(2)的步骤
    
    配置逻辑:
    (1)第一次option进行自适应元素高宽的配置,即在监听中进行
    (2)第二次option进行样式的配置
    (3)第三次option进行数据的配置
    
    组件卸载时需要卸载监听

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]

代码示例:

<template>
       
       <div class='s-c'>
         <div class='s-chart' ref='sell'>
           
         </div>
       </div>
    </template>
    
    <script>
    import chalk from '../../static/theme/chalk'
    
    export default { 
      name:'sell',
      data(){ 
        return{ 
          myMap:null,
          data:[],
          currentPage:1,
          totalPage:0,
          timer:null,
          first:true
        }
      },
      mounted()
      { 
        this._initChart();
        this._getData();
        //适配化配置调用
        this._resize();
        this._mouse();
    
      },
      //组件销毁前卸载监听
      beforeDestroy()
      { 
        window.onresize=null;
      },
      methods:{ 
        async _getData()
        { 
          let res=await this.$axios.get('/api/seller');
          this.data=res.data;
          //数据进行排序
          this.data.sort((a,b)=>{ 
            return a.value-b.value
          })
    
    
          //每五个显示一页,计算总页数
          this.totalPage=this.data.length%5==0? this.data.length/5:Math.ceil(this.data.length/5);
    
          this._updateChart();
          
        },
        _initChart()
        { 
          this.myMap = this.$echarts.init(this.$refs.sell,'chalk');
    
          //完成除数据和宽度适配以外的一些初始配置
          let option={ 
            title:{ 
              text:'| 商家销售统计',
              left: 20,
              top: 20,
          
            },
            grid: { 
              top: '15%',
              left: '3%',
              right: '6%',
              bottom: '3%',
              containLabel: true // 距离是包含坐标轴上的文字
            },
            xAxis:{ 
              type:'value',
              splitLine:{   //去掉坐标轴的水平虚线指示线
                show:false
              },
              scale:true,
              
            },
            yAxis:{ 
              type:'category',
              
            },
            tooltip:{ 
              trigger:'axis',
              axisPointer:{ 
                type:'line',
                z:0,
                lineStyle:{ 
                  color:'#2d3443',
                }
              },
            },
            series:[
              { 
                  type:'bar',
                  barWidth:66,
                  itemStyle:{ 
                  color:{ 
                        type: 'linear',
                        x: 0,	
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{ 
                            offset: 0, color: '#5052EE' // 0% 处的颜色
                        }, { 
                            offset: 1, color: '#AB6EE5' // 100% 处的颜色
                        }],
                        global: false, 
                  },
                },
                label:{ 
                  show:true,
                  position: 'right',
                  color:'white'
                }
              }
            ],
          }
    
          this.myMap.setOption(option);
    
        },
        //根据数据配置图表
        _updateChart()
        { 
          //根据当前页数获取对应数据
          let start=(this.currentPage-1)*5;
          let end=start+5;
    
          const showData=this.data.slice(start,end);
    
          const seriesName=showData.map((item,index)=>{ 
            return item.name;
          })
    
          const seriesValue=showData.map((item,index)=>{ 
            return item.value
          })
    
          //数据改变时配置
          let option={   
            yAxis:{ 
              data:seriesName,
              
            },
            series:[
              { 
                data:seriesValue,
              }
            ],
          }
    
          this.myMap.setOption(option);
          this._setInterval();
        },
    
        //定时器刷新当前数据
        _setInterval()
        { 
          // console.log(this.currentPage);
          if(this.timer)
          { 
            clearInterval(this.timer);
          }
    
          let that=this;
          this.timer=setInterval(() => { 
            if(this.currentPage>=this.totalPage)
            { 
              this.currentPage=1;
            }else{ 
              this.currentPage++;
            }
            this._updateChart();
          }, 3000);
        },
        //适配监听，整体图表,已经图表中的元素适配
        _resize()
        { 
          //第一次打开和刷新不改变窗口时,也进行适配
          if(this.first)
          { 
            this._resizeCode();
            this.first=false;
          }
          //标题大小适配,根据容器大小分成100份,根据份数来试
          window.onresize=()=>{ 
            this._resizeCode();
          }
        },
        //适配代码
        _resizeCode()
        { 
            let container=this.$refs.sell.offsetWidth;
            let titleFontSize=container/100*3.6;
    
            //适配图表
            let option={ 
              title:{ 
                textStyle:{ 
                  fontSize:titleFontSize
                }
              },
              tooltip:{ 
                axisPointer:{ 
                  lineStyle:{ 
                    width:titleFontSize
                  }
                }
              },
              series:{ 
                barWidth:titleFontSize,
                itemStyle: { 
                  barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
                }
    
              }
            }
            this.myMap.setOption(option);
            this.myMap.resize();
        },
        //鼠标监听,鼠标放上停止,移开播放
        _mouse()
        { 
          this.myMap.on('mouseover',()=>{ 
            clearInterval(this.timer);
          })
          this.myMap.on('mouseout',()=>{ 
            this._updateChart();
          })
        }
      }
    
    }
    </script>
    
    <style lang='less' scoped>
    .s-c{ 
        width: 100%;
        height:100%;
        .s-chart{ 
          width: 100%;
          height:100%;
        }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201020110411735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/d83d67bce13c4852b23aebcca9b238cb.png