echarts 在 vue 随浏览器窗口改变响应

代码基于element-ui框架

<template>
  <el-row :gutter="40">
    <el-col :span="9">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <p>登记人员占比
            <span style="color:#728ffc;padding-left:10px;">(总人数{{countNum}})</span>
          </p>
        </div>
        <!-- 人员比例图表 -->
        <div style="width:100%;height:100%;" ref="_person_chart"></div>
      </el-card>
    </el-col>
    <el-col :span="15">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日报表</span>
        </div>
        <!-- 今日统计报表 -->
        <div style="width:100%;height:100%;" ref="_statistical_chart"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
// 引入 echarts 主模块。
import * as echarts from 'echarts/lib/echarts'
// 引入折线图。
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
// 引入提示框组件、标题组件、工具箱组件。
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import home from '@/api/home'
var clearId
export default {
  data() {
    return {
      countNum: 0,
      options_person: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          bottom: 'center',
          itemWidth: 20,
          itemHeight: 20,
          data: ['教职工', '学生', '访客', '社会人员', '其他']
        },
        series: [
          {
            name: '人员占比',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '22',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 0, name: '教职工', itemStyle: { color: '#728FFC' } },
              { value: 0, name: '学生', itemStyle: { color: '#FFB22D' } },
              { value: 0, name: '访客', itemStyle: { color: '#3EB934' } },
              { value: 0, name: '社会人员', itemStyle: { color: '#FF6EEC' } },
              { value: 0, name: '其他', itemStyle: { color: '#FF6E9B' } }
            ]
          }
        ]
      },
      options_statistical: {
        title: {
          text: '进出人数',
          textStyle: {
            color: '#000',
            fontWeight: '400',
            fontSize: 14
          }
        },
        tooltip: {
          //提示框组件
          trigger: 'axis',
          formatter: '{b}<br/>{a0}: {c0}<br/>',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 50,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              //        interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              //    margin:15,
              textStyle: {
                color: '#000',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              },
              rotate: 65
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#000',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#DCDCDC'],
                opacity: 1
              }
            }
          }
        ],
        series: [
          {
            name: '总数量',
            type: 'bar',
            data: [],
            barWidth: 10,
            barGap: 0, //柱间距离
            label: {
              //图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#000',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FF6EEC'
                  },
                  {
                    offset: 1,
                    color: '#728FFC'
                  }
                ]),
                barBorderRadius: 50,
                borderWidth: 0
              }
            }
          }
        ]
      },
      homeBar: '',
      homePie: ''
    }
  },
  mounted() {
    this.drawLines();
    // 重点，能够响应浏览器窗口改变的代码：原理主要是
    // 监听浏览器窗口变化，进而重新绘制图表
    window.addEventListener('resize', () => {
      this.homeBar.resize();  // 多个图表，第一个图表
      this.homePie.resize();  // 多个图表，第二个图表
    });
  },
  methods: {
    drawLines() {
      // 基于echarts，初始化 echarts 实例并绘制图表
      this.homePie = echarts.init(this.$refs._person_chart);
      this.homePie.setOption(this.options_person);
      this.homeBar = echarts.init(this.$refs._statistical_chart)
      this.homeBar.setOption(this.options_statistical)
    },
    init() {
      home.homeReportBySchool().then((res) => {
        res.map((item, index) => {
          this.options_statistical.xAxis[0].data[index] = item.name
          this.options_statistical.series[0].data[index] = item.count
        })
        this.drawLines()
      })
    },
    scaleByPerson() {
      this.countNum = 0;
      home.homeScaleByPerson().then((res) => {
        let new_res = res.filter((item) => { return item.name != '总数' })
        let count_array = res.filter((item) => { return item.name == '总数' })[0]
        this.options_person.legend.data = new_res.map((i) => { return i.name })
        new_res.map((item, index) => {
          this.options_person.series[0].data[index].name = item.name;
          this.options_person.series[0].data[index].value = item.count;
        })
        this.countNum = (count_array && count_array.count) ? count_array.count : 0;
        this.drawLines()
      })
    }
  },
  created() {
    this.init()
    this.scaleByPerson()
    clearId = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearTimeout(clearId);
  }
}
</script>

<style lang="scss" scoped>
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 4px 0 25px rgba(114, 143, 252, .1);
}

.box-card {
  height: 370px;
}
</style>