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

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-01-29 14:45:02
 * @LastEditors: wally
 * @LastEditTime: 2021-05-14 09:46:26
-->
<template>
  <!-- <div>数据统计组件</div> -->
  <div style="width: 100%; height: 350px" class="chart-box">
    <div id="Categorymap" style="height: 350px"></div>
  </div>
</template>
<script>
import { HospitalComplete } from 'config/api';
import mixins from 'views/Mixin/mixin.js';
export default {
  name: 'Categorymap',
  mixins: [mixins],
  data() {
    return {
      // msg: 'Welcome to Your Vue.js App',
      width: '',
      height: '',
      list: [],
      xDataList: [],
      aList: [], // 未完成数组
      bList: [], // 已完成数组
      cList: [], // 进行中数组
      dList: [], // 废弃的数组
      eList: [], // 超时的数组
    };
  },
  mounted() {
    this.init(this.drawLine);
    const that = this;
    window.onresize = () => {
      return (() => {
        that.init(this.drawLine);
      })();
    };
  },

  methods: {
    async drawLine() {
      this.list = [];
      this.xDataList = [];
      this.aList = [];
      this.bList = [];
      this.cList = [];
      this.dList = [];
      this.eList = [];
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('Categorymap'));
      // 绘制图表
      await this.getData();
      var option = {
        legend: {
          data: ['新建', '数据收集按时完成', '数据收集中', '废弃', '数据收集超时'],
          top: 30,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.xDataList,
          },
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: '新建',
            type: 'bar',
            barGap: 0,
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: this.aList,
            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: this.bList,
            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: this.cList,
            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: this.dList,
            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: '#f00' }, //柱图渐变色
                  { offset: 1, color: '#F00' }, //柱图渐变色
                ]),
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#F00' }, //柱图高亮渐变色
                  { offset: 1, color: '#F00' }, //柱图高亮渐变色
                ]),
              },
            },
          },
          {
            name: '数据收集超时',
            type: 'bar',
            // label: labelOption,
            emphasis: { focus: 'series' },
            data: this.eList,
            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);
    },
    async getData() {
      try {
        const params = { param: {} };
        const res = await HospitalComplete(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          for (let i = 0; i < data.length; i++) {
            this.forList(data[i]);
          }
        } else {
          this.$message.error('获取数据失败');
        }
      } catch (error) {
        this.$message.error('获取数据失败');
      }
    },
    forList(obj) {
      this.xDataList.push(obj.hospitalName);
      this.aList.push(obj.unfinished);
      this.bList.push(obj.completed);
      this.cList.push(obj.underway);
      this.dList.push(obj.discarded);
      this.eList.push(obj.overtime);
    },
  },
};
</script>

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