web-test/src/views/dynamic/parts/top-right.vue

<template>
  <div id="top-right">
    <div id="chart" class="" style="height:450px;margin:40px 0 0 0"></div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('transaction');
const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
export default {
  name: 'top-right',
  props: {},
  components: {},
  data: () => {
    return {
      myChart: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions(['query']),
    ...personalRoom(['countRoom']),
    async init() {
      let res = await this.query();
      let rooms = await this.countRoom();
      if (this.$checkRes(res)) {
        let arr = res.data.filter(f => f.status != '3');
        let s1 = res.data.filter(f => f.status == '1'); //达成意向
        let s2 = res.data.filter(f => f.status == '2'); //对接完成
        let s3 = res.data.filter(f => f.status == '0'); //正在洽谈
        this.myChart = echarts.init(document.getElementById('chart'));
        const option = {
          title: { text: '交易情况', left: 'center' },
          tooltip: { trigger: 'axis' },
          legend: {
            data: ['正在洽谈', '达成意向', '对接完成'],
          },
          xAxis: {
            type: 'category',
            data: ['正在洽谈', '达成意向', '对接完成'],
          },
          yAxis: {},
          series: [
            {
              name: '交易情况',
              label: {
                show: true,
                position: 'top',
              },
              type: 'bar',
              data: [
                { name: '正在洽谈', value: s3.length, itemStyle: { color: '#7cb5ec' } },
                { name: '达成意向', value: s1.length, itemStyle: { color: '#ffa94b' } },
                { name: '对接完成', value: s2.length, itemStyle: { color: '#346da4' } },
              ],
              animationType: 'scale',
            },
          ],
        };
        this.myChart.setOption(option);
      }
    },
  },
  computed: {
    ...mapState(['top-right']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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