chinese-medicine/src/components/Echarts/Piemap.vue

<template>
  <!-- <div>数据统计组件</div> -->
  <div style="width: 100%; height: 300px" class="chart-box">
    <div id="Piemap" style="height: 300px"></div>
  </div>
</template>
<script>
export default {
  name: 'Piemap',
  data() {
    return {
      // msg: 'Welcome to Your Vue.js App',
      width: '',
      height: '',
      timer: null,
    };
  },
  mounted() {
    this.drawLine();
    this.timer = setInterval(() => {
      this.drawLine();
    }, 10000);
    let wh = window.innerWidth;
    let hg = window.innerHeight;
    this.width = wh + 'px';
    this.height = hg + 'px';
    console.log(this.height);
    window.onresize = () => {
      return (() => {
        wh = window.innerWidth;
        hg = window.innerHeight;
        this.width = wh + 'px';
        this.height = hg + 'px';
      })();
    };
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('Piemap'));
      // 绘制图表
      var option = {
        color: ['#FE9C58', '#7AEBFF', '#FFCC00', '#744CFF'],
        legend: { top: 'bottom' },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [20, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: { borderRadius: 8 },
            data: [
              { value: 40, name: '附属医院' },
              { value: 38, name: '人民医院' },
              { value: 32, name: '第五医院' },
              { value: 30, name: '国药同煤总医院' },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="stylus" scoped ></style>