vue中echarts滑轮滚动数据及全屏查看

Posted 2021-06-28 晚星@

echarts的vue封装

<template>
  <div class="m-chart"
       id="fullChart"
       :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
import resize from "@/utils/resize";
import { upOrDownTo } from '@/utils/exchartsMinMax'

export default {
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    option: {
      type: Object,
      default () {
        return {
          // legend: [],
          // data: [],
          // xData:[]
        }
      }
    }
  },
  mixins: [resize],
  data () {
    return {
      chart: null,
      server: undefined,
    }
  },
  watch: {
    'option': {
      handler (newVal) {
        this.$nextTick(() => {
          this.getServer();
          this.initChart();
        });
      },
      deep: true,
      immediate: true
    }
  },

  mounted () {
    this.$nextTick(() => {
      // console.log(this.getServer1());
      this.getServer();
      this.initChart();
    });
  },


  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart () {
      // console.log(this.option.legend)
      let that = this;
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption({
        legend: {
          show: true,
          data: this.option.legend,
          bottom: 0,
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        // 全屏
        toolbox: {
          show: true,
          itemGap: 5,
          top: -5,
          feature: {
            myFull: {
              show: true,
              title: ' ',
              icon: 'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
              onclick: function (e) {
                const element = document.getElementById('fullChart');
                if (element.requestFullScreen) { // html W3C 提议
                  element.requestFullScreen();
                } else if (element.msRequestFullscreen) { // IE11
                  element.msRequestFullScreen();
                } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
                  element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
                  element.mozRequestFullScreen();
                }
                // 退出全屏
                if (element.requestFullScreen) {
                  document.exitFullscreen();
                } else if (element.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (element.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (element.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              }
            }
          }
        },
        grid: {
          top: 35,
          left: 50,
          right: 40,
          bottom: 70
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.option.xData,
          // axisLabel: {
          //   color: '#000',
          //   interval: 6,
          //   showMinLabel: true,
          //   showMaxLabel: true,
          // },
        },
        yAxis: [
          {
            type: 'value',
            max: this.getServer1()[0],
            min: this.getServer1()[1],
            name: this.option.yName,
            nameLocation: 'end'
          }
        ],
        // 滑轮滚动
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 10
        }
          // , {
          //   start: 0,
          //   end: 10
          // }
        ],
        series: this.getServer(),
      })
    },
    getServer () {
      let that = this
      let slist = []
      for (let i = 0; i < that.option.legend.length; i++) {
        slist.push({
          name: that.option.legend[i],
          type: 'line',
          connectNulls: true,
          data: that.option.data[i],
          itemStyle: {
            opacity: 0
          },
        })
      }
      return slist
    },
    getServer1 () {
      let that = this
      let listmaxmin = []
      for (let i = 0; i < that.option.legend.length; i++) {
        listmaxmin = listmaxmin.concat(that.option.data[i])
      }
      return [
        upOrDownTo(Math.max.apply(Math, listmaxmin.filter(function (val) { return val })), 'up'),
        upOrDownTo(Math.min.apply(Math, listmaxmin.filter(function (val) { return val })), 'down'),
        Math.max.apply(Math, listmaxmin.filter(function (val) { return val })),
        Math.min.apply(Math, listmaxmin.filter(function (val) { return val })),
      ]
    }
  },
}
</script>

<style scoped>
:-webkit-full-screen {
  background-color: #fff !important;
}
:-moz-full-screen {
  background-color: #fff !important;
}

:-ms-fullscreen {
  background-color: #fff !important;
}
:fullscreen {
  background-color: #fff !important;
}
</style>

封装取y轴的最大值与最小值

export function upOrDownTo (number, flag) {
  if (number === 0) {
    number = 1
  }
  var step = 0
  if (flag === 'up') {
    // if (number <= 100) {
    //   step = 100
    // } else if (number > 100 && number <= 800) {
    //   step = 100
    // } else if (number > 500 && number <= 1000) {
    //   step = 100
    // } else if (number > 1000 && number <= 3000) {
    //   step = 1000
    // } else if (number > 3000 && number <= 4000) {
    //   step = 3000
    // } else if (number > 4000 && number <= 7000) {
    //   step = 4000
    // } else if (number > 7000 && number <= 9000) {
    //   step = 7000
    // } else if (number > 9000) {
    //   step = 7000
    // }
    // step = Math.ceil(number + number * 0.1)
    step = (number + number * 0.1).toFixed()
  } else {
    // if (number <= 100) {
    //   step = -10
    // } else if (number > 100 && number <= 800) {
    //   step = -100
    // } else if (number > 800 && number <= 1000) {
    //   step = -100
    // } else if (number > 1000 && number <= 3000) {
    //   step = -1000
    // } else if (number > 3000 && number <= 4000) {
    //   step = -3000
    // } else if (number > 4000 && number <= 7000) {
    //   step = -4000
    // } else if (number > 7000 && number <= 9000) {
    //   step = -7000
    // } else if (number > 9000) {
    //   step = -7000
    // }
    // step = Math.ceil(number - number * 0.1)
    step = (number - number * 0.1).toFixed()
  }

  // var mod = number % step;

  // return mod ? number - mod + step : number;
  return step;
}