MiniPrograms_Activity/components/lineChart/lineChart.js

// 线图
import * as echarts from '../../ec-canvas/echarts';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    canvasId:{
      type: String,
      value: "mychart-dom-bar"
    },
    id:{
      type: String,
      value: "mychart-bar"
    },
    type: {
      type: String,
      value: "bar"
    },
    isShow: {
      type: Boolean,
      value: false,
      observer: function (n) {
        const select = this.data.select === '6m' || this.data.select === '24h';
        if (!select) return
        console.log("需要更新");
        if (n) this.triggerEvent("lineChenge", this.data.select);
      }
    },
    select: {
      type: String,
      value: ""
    },
    btnList: {
      type: Array,
      value: [],
    },
    list: {
      type: Array,
      value: [],
      observer: function (n, o) {
        if (!n || !n.length) return;
        if (this.data.select !== '24h' && this.data.select !== '6m' && this.setInterval) clearInterval(this.setInterval)
        if (this.data.select !== '24h' && this.data.select !== '6m' && this.setTimeout) clearInterval(this.setTimeout)
        let xData = [], yData = [];
        yData = {
          type: this.data.type,
          smooth: 0.6,
          symbolSize: 1,
          itemStyle: {
            color: "#1890ff"
          },
          lineStyle: {
            width: 1
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(24,144,255, .8)' },
                { offset: 1, color: 'rgba(24,144,255, 0)' },
              ]
            )
          },
          data: []
        }

        n.map((v, i) => {
          yData.data.push(v[this.data.yType]);
          xData.push(v[this.data.xType])
        })
        if (this.chart) {
          const option = this.chart.getOption();
          option.series = yData;
          option.xAxis[0].data = xData;
          option.series = yData;
          this.chart.setOption(option);
          this.setData({
            xData,
            yData,
            show: true
          })
        } else {
          this.setData({
            ec: {
              onInit: this.initChart.bind(this)
            },
            xData,
            yData,
            show: true
          })
        }
      }
    },
    yType: {
      type: String,
      value: ""
    },
    xType: {
      type: String,
      value: ""
    }
  },
  chart: undefined,
  setInterval: undefined,
  setTimeout: undefined,
  ready() {
    wx.setStorageSync('nextTime', 0)
  },

  // 销毁组件
  detached: function () {
    this.chart && this.chart.dispose && this.chart.dispose();
    this.setInterval && clearInterval(this.setInterval);
    this.setTimeout && clearInterval(this.setTimeout);
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    ec: {
      onInit: undefined
    },
    xData: [],
    yData: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initChart: function (canvas, width, height, dpr) {
      this.chart && this.chart.dispose && this.chart.dispose();
      this.chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
      canvas.setChart(this.chart);
      var option = {
        animation: false,
        tooltip: {
          show: true,
          textStyle: {
            color: "#fff"
          },
          backgroundColor: 'rgba(0,0,0,.5)',
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line',        // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: "rgba(150,150,150,0.2)"
            },
          },
          formatter: "{b}\n{c}",
        },
        color: ['#1890ff'],
        grid: {
          top: "10px",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          interval: 0,
          type: 'category',
          boundaryGap: false,
          data: this.data.xData,
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#bfcbd9',
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: true, lineStyle: { type: "dotted", color: '#4e5358' } },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#bfcbd9',
            }
          },
          axisLabel: {
            formatter: function (val, index) {
              let out = val;
              if (val >= 1000 && val < 10000) {
                out = (val / 1000).toFixed(2) - 0 + "千"
              } else if (val >= 10000 && val < 100000000) {
                out = (val / 10000).toFixed(0) - 0 + "万"
              } else if (val >= 100000000) {
                out = (val / 100000000).toFixed(2) - 0 + "亿"
              }
              return out
            }
          }
        },
        series: this.data.yData
      };
      this.chart.setOption(option);
      return this.chart;
    },
    changeselect: function (e) {
      let type = e.currentTarget.dataset.type;
      if (type === this.data.select) return;
      this.setInterval && clearInterval(this.setInterval);
      this.setTimeout && clearInterval(this.setTimeout);
      if (type === '24h' || type === '6m') this.countFun(type);
      this.triggerEvent("lineChenge", type)
    },
    countFun(type) {
      let time = new Date();
      let min = time.getMinutes();
      let remainder = min % 10;
      if (remainder === 1) {
        this.setInterval = setInterval(() => {
          console.log("定时")
          this.triggerEvent("lineChenge", type);
        }, 600000)
      } else {
        this.setTimeout = setTimeout(() => {
          clearTimeout(this.setTimeout);
          this.triggerEvent("lineChenge", type);
          this.setInterval = setInterval(() => {
            console.log("定时")
            this.triggerEvent("lineChenge", type);
          }, 600000)
        }, (11 - remainder) * 1000 * 60);
      }

    }
  }
})