mzBigScreen/src/components/index/4.vue

<template>
  <div id="myChartindex4" style="width: 100%; height: 100%;"></div>
</template>

<script>
import { visitDept, visitPerson, deptCollect, PersonCollect } from '../../api'
import echarts from 'echarts'

export default {
  name: "Mz_tx_charts",
  data() {
    return {
      dataArr: [],
      myChart: null
    }
  },
  methods: {
    getArrByKey(data, k) {
      let key = k || "value";
      let res = [];
      if (data) {
        data.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    },
    getMaxValueOfArray(data) {
      if (data == null || data.length == 0) {
        return 0;
      }
      let maxValue = data[0].value;
      for (let i = 1; i < data.length; i++) {
        if (maxValue < data[i].value) {
          maxValue = data[i].value;
        }
      }
      return maxValue;
    },
    // 地区巡访
    async draw1() {
      const result = await visitDept({}, 'POST');
      this.dataArr = result;

      const seriesArr = [];
      // for(let i = 0; i < this.dataArr.length; i++) {
      //     const kkArr = new Array(length).fill({});
      //     kkArr[i] = { value: 100, symbolPosition: 'start' };
      //     let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
      //     if(i < 4) {
      //         symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
      //     }
      //     seriesArr.push({
      //         type: 'pictorialBar',
      //         symbol: symbolImage,
      //         symbolSize: [24, 24],
      //         symbolOffset: [-40, -8],
      //         data: kkArr,
      //         label: {
      //             show: true,
      //             position: 'left',
      //             offset: [-19, -6],
      //             color: '#fff',
      //             fontSize: this.fontSize(0.17),
      //             formatter: `${ i + 1 }`
      //         },
      //         z: 2
      //     });
      // }

      if (this.myChart != null) {
        this.myChart.clear();
      }

      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
      this.myChart.setOption({
        grid: {
          top: '10%',
          bottom: '-18%',
          right: '0%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          max: this.getMaxValueOfArray(this.dataArr)
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // shadowOffsetX: '-0px',
            // align: 'right',
            // verticalAlign: 'bottom',
            lineHeight: 0,
            fontSize: this.fontSize(0.16),
            color: '#fff',
            formatter: (value, index) => {
              return this.dataArr[index].value + '次';
            },
          }
        }],
        series: [{
          type: 'bar',
          showBackground: true,
          barBorderRadius: 50,
          yAxisIndex: 0,
          data: this.dataArr,
          barWidth: 6,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#0071fc'
              }, {
                offset: 1,
                color: '#4be2ec'
              }]);
            },
            barBorderRadius: 30,
          },
          label: {
            normal: {
              color: '#00b8ff',
              show: true,
              position: [0, -this.fontSize(0.18)],
              textStyle: {
                fontSize: this.fontSize(0.16)
              },
              formatter: function (a,) {
                return a.name;
              }
            }
          }
        }, ...seriesArr]
      });
    },
    // 个人巡访
    async draw2() {
      const result = await visitPerson({}, 'POST');
      this.dataArr = result;
      const seriesArr = [];
      if (this.myChart != null) {
        this.myChart.clear();
      }
      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
      this.myChart.setOption({
        grid: {
          top: '10%',
          bottom: '-18%',
          right: '0%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          max: this.getMaxValueOfArray(this.dataArr)
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // shadowOffsetX: '-50px',
            // align: 'right',
            // verticalAlign: 'bottom',
            // lineHeight: 30,
            fontSize: this.fontSize(0.16),
            color: '#fff',
            formatter: (value, index) => {
              return this.dataArr[index].value + '次';
            },
          }
        }],
        series: [{
          type: 'bar',
          showBackground: true,
          barBorderRadius: 30,
          yAxisIndex: 0,
          data: this.dataArr,
          barWidth: 6,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#0023ff'
              }, {
                offset: 1,
                color: '#75c6ff'
              }]);
            },
            barBorderRadius: 30,
          },
          label: {
            normal: {
              color: '#00b8ff',
              show: true,
              position: [0, -this.fontSize(0.18)],
              textStyle: {
                fontSize: this.fontSize(0.16)
              },
              formatter: function (a,) {
                return a.name;
              }
            }
          }
        }, ...seriesArr]
      });
    },
    // 地区采集
    async draw3() {
      const result = await deptCollect({}, 'POST');
      this.dataArr = result;
      const seriesArr = [];
      if (this.myChart != null) {
        this.myChart.clear();
      }
      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
      this.myChart.setOption({
        grid: {
          top: '10%',
          bottom: '-18%',
          right: '0%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          max: this.getMaxValueOfArray(this.dataArr)
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // shadowOffsetX: '-50px',
            // align: 'right',
            // verticalAlign: 'bottom',
            // lineHeight: 30,
            fontSize: this.fontSize(0.16),
            color: '#fff',
            formatter: (value, index) => {
              return this.dataArr[index].value + '次';
            },
          }
        }],
        series: [{
          type: 'bar',
          showBackground: true,
          barBorderRadius: 30,
          yAxisIndex: 0,
          data: this.dataArr,
          barWidth: 6,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#0023ff'
              }, {
                offset: 1,
                color: '#75c6ff'
              }]);
            },
            barBorderRadius: 30,
          },
          label: {
            normal: {
              color: '#00b8ff',
              show: true,
              position: [0, -this.fontSize(0.18)],
              textStyle: {
                fontSize: this.fontSize(0.16)
              },
              formatter: function (a,) {
                return a.name;
              }
            }
          }
        }, ...seriesArr]
      });
    },
    // 个人采集
    async draw4() {
      const result = await PersonCollect({}, 'POST');
      this.dataArr = result;
      const seriesArr = [];
      if (this.myChart != null) {
        this.myChart.clear();
      }
      this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
      this.myChart.setOption({
        grid: {
          top: '10%',
          bottom: '-18%',
          right: '0%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          max: this.getMaxValueOfArray(this.dataArr)
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: this.getArrByKey(this.dataArr, 'label'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // shadowOffsetX: '-50px',
            // align: 'right',
            // verticalAlign: 'bottom',
            // lineHeight: 30,
            fontSize: this.fontSize(0.16),
            color: '#fff',
            formatter: (value, index) => {
              return this.dataArr[index].value + '次';
            },
          }
        }],
        series: [{
          type: 'bar',
          showBackground: true,
          barBorderRadius: 30,
          yAxisIndex: 0,
          data: this.dataArr,
          barWidth: 6,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#0023ff'
              }, {
                offset: 1,
                color: '#75c6ff'
              }]);
            },
            barBorderRadius: 30,
          },
          label: {
            normal: {
              color: '#00b8ff',
              show: true,
              position: [0, -this.fontSize(0.18)],
              textStyle: {
                fontSize: this.fontSize(0.16)
              },
              formatter: function (a,) {
                return a.name;
              }
            }
          }
        }, ...seriesArr]
      });
    },
    fontSize(res) {
      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    }
  },
  mounted() {
    // this.draw4();
  }
}
</script>

<style scoped>
</style>