psychosis-cms/src/views/census/parts/left-2.vue

<template>
  <div id="left-2">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__fadeInDown">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1" @click.native="toPath()"> 精神障碍患者统计 </el-col>
          <el-col :span="24" class="one_2">
            <div id="echarts4" class="canvas" style="width: 100%; height: 10vw"></div>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { EventBus } from '../eventBus';
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
echarts = require('echarts');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('statistics');
export default {
  name: 'left-2',
  props: {},
  components: {},
  data: function () {
    return {
      list: [
        { name: '2017', value: 20 },
        { name: '2018', value: 70 },
        { name: '2019', value: 150 },
        { name: '2020', value: 360 },
        { name: '2021', value: 15 },
        { name: '2022', value: 251 },
      ],
      chart: undefined,
    };
  },
  created() {
    // this.search();
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(['right1']),
    async search() {
      const res = await this.right1();
      if (this.$checkRes(res)) {
        let value = res.data;
        this.changeData(value);
      }
    },
    // 更换chart数据
    changeData(value) {
      if (!this.chart) return;
      let option = this.getOption(value);
      this.chart.setOption(option);
    },
    // 组织chart的数据函数
    getOption(data) {
      let two = data.map((i) => i.name);
      let thr = data.map((i) => i.value);
      let option;
      option = {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: two,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            textStyle: { color: '#ffffff' },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            interval: 0, //横轴信息全部显示
            textStyle: { color: '#ffffff' },
          },
        },
        series: [
          {
            data: thr,
            type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: { color: '#5470C6', width: 4, type: 'dashed' },
            itemStyle: { borderWidth: 3, borderColor: '#EE6666', color: 'yellow' },
          },
        ],
      };
      return option;
    },
    init() {
      var chartDom = document.getElementById('echarts4');
      var myChart = echarts.init(chartDom);
      myChart.on('click', (params) => {
        console.log('1');
      });
      this.chart = myChart;
      this.search();
    },
    toPath() {
      this.$router.push('/guardian/patient');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      color: #000000;
      font-size: 3vmin;
      font-weight: 700;
      position: relative;
      border-bottom: 2px solid #2441a9;
      line-height: 2.96875vw;
      text-align: left;
    }
    .one_1::before {
      background: #2441a9;
      border-radius: 50%;
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      right: -2px;
      bottom: -4px;
      z-index: 1;
      visibility: visible;
    }
    .one_1:hover {
      cursor: pointer;
      color: #66b1ff;
    }
    .one_2 {
      background: #2441a9;
    }
  }
}
.canvas {
  /deep/canvas {
    width: 18vw !important;
    // min-height: 5vw !important;
    max-height: 10vw !important;
  }
}
</style>