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

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

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

效果图:
在这里插入图片描述

代码示例:

<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>