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

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-01-29 14:45:02
 * @LastEditors: wally
 * @LastEditTime: 2021-01-29 18:20:26
-->
<template>
  <!-- <div>数据统计组件</div> -->
  <div style="width: 100%; height: 350px" class="chart-box">
    <div id="Categorymap" style="height: 350px"></div>
  </div>
</template>
<script>
export default {
  name: 'Categorymap',
  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: {
    async drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('Categorymap'));
      // 绘制图表
      var option = {
        legend: {
          data: ['未完成', '已完成', '进行中', '废弃'],
          top: 30,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['附属医院', '人民医院', '第五人民医院', '国药同煤总医院'],
          },
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: '未完成',
            type: 'bar',
            barGap: 0,
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: [320, 332, 301, 334],
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: '12',
                    color: '#000',
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#FCB155' }, //柱图渐变色
                  { offset: 1, color: '#EC535F' }, //柱图渐变色
                ]),
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#FCB155' }, //柱图高亮渐变色
                  { offset: 1, color: '#EC535F' }, //柱图高亮渐变色
                ]),
              },
            },
          },
          {
            name: '已完成',
            type: 'bar',
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: [220, 182, 191, 234],
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: '12',
                    color: '#000',
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#6D46FF' }, //柱图渐变色
                  { offset: 1, color: '#360CE6' }, //柱图渐变色
                ]),
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#6D46FF' }, //柱图高亮渐变色
                  { offset: 1, color: '#360CE6' }, //柱图高亮渐变色
                ]),
              },
            },
          },
          {
            name: '进行中',
            type: 'bar',
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: [150, 232, 201, 154],
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: '12',
                    color: '#000',
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#96E5F4' }, //柱图渐变色
                  { offset: 1, color: '#21B0DC' }, //柱图渐变色
                ]),
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#96E5F4' }, //柱图高亮渐变色
                  { offset: 1, color: '#21B0DC' }, //柱图高亮渐变色
                ]),
              },
            },
          },
          {
            name: '废弃',
            type: 'bar',
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: [98, 77, 101, 99],
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: '12',
                    color: '#000',
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#F5D041' }, //柱图渐变色
                  { offset: 1, color: '#FF9000' }, //柱图渐变色
                ]),
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#F5D041' }, //柱图高亮渐变色
                  { offset: 1, color: '#FF9000' }, //柱图高亮渐变色
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

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