首页 > 其他分享 >可视化Echart模板component

可视化Echart模板component

时间:2023-01-04 03:55:06浏览次数:47  
标签:screenAdapter Echart updateChart setOption component 可视化 const chartInstance res

<template>
  <div class="com-container">
      地区销售排行图表
      <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            chartInstance: null,
            allData: null
        }
    },
    mounted() {
       this.initChart();
       this.getData();
       window.addEventListener("resize", this.screenAdapter);
       this.screenAdapter();
    },
    destroyed() {
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
       initChart() {
          this.chartInstance = this.$echarts.init(this.$refs.rank_ref);
          const initOption = {};
          this.chartInstance.setOption(initOption);
       },
       async getData() {
        // 获取服务器的数据,对this.allData进行赋值之后,调用updateChart方法更新图表
        this.updateChart();
       },
       updateChart() {
        // 处理图表需要的数据
        const dataOption = {};
        this.chartInstance.setOption(dataOption);
       },
       screenAdapter() {
        const adapterOption = {};
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
       }
    }

}
</script>
<style lang="less" scoped>

</style>

标签:screenAdapter,Echart,updateChart,setOption,component,可视化,const,chartInstance,res
From: https://www.cnblogs.com/openmind-ink/p/17023842.html

相关文章