MiniPrograms_Activity/components/Chart/Chart.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"
    },
    btnList: {
      type: Array,
      value: [],
      observer: function (n, o) {
        if (!n || n === o) return
        this.setData({
          select: n[0].type
        })
      }
    },
    list: {
      type: Array,
      value: [],
      observer: function (n, o) {
        if (!n || !n.length) return
        let xData = [], yData = [];
        let type = this.data.select || this.data.yType;
        n.map((v, i) => {
          yData[i] = {
            type: this.data.type,
            barMaxWidth: 30,
            label: {
              show: true,
              shadowColor: 'transparent',
              position: 'top',
              color: "#fff",
              formatter: function (d) {
                let v = d.value;
                if (isNaN(v)) {
                  return 0
                } else if (v >= 10000 && v < 100000) {
                  return (v / 10000).toFixed(2) - 0 + '万'
                } else if (v >= 100000 && v < 100000000) {
                  return (v / 10000).toFixed(0) - 0 + '万'
                } else if (v >= 100000000) {
                  return (v / 100000000).toFixed(2) - 0 + '亿'
                }
                return v
              }
            },
            data: []
          }

          if (v.length) {
            v = v.sort((a, b) => {
              return b[type] - a[type]
            })
            let sLi = JSON.parse(JSON.stringify(v));
            if (v.length > 10) sLi = sLi.splice(0, 10);
            sLi.map(val => {
              i === 0 && xData.push(val[this.data.xType]);
              yData[i].data.push(val[type]);
            })
          }
        })
        if (this.chart) {
          const option = this.chart.getOption();
          option.series = yData;
          option.xAxis[0].data = xData;
          option.series = yData;
          this.chart.clear();
          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,

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

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

  /**
   * 组件的方法列表
   */
  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: false,
          textStyle: {
            color: "#fff"
          },
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.5)',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: "rgba(150,150,150,0.2)"
            },
          },
          formatter: "{b}\n{c}",
        },
        color: ['#1890ff'],
        grid: {
          top: "20px",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: this.data.xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#bfcbd9"
            }
          },
          axisLabel: {
            interval: 0,
            formatter: function (v, index) {
              const li = v.split("");
              v = li.map((nameString, i) => {
                i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
                return nameString
              }).join("");
              return v
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: true, lineStyle: { type: "dotted", color: '#4e5358' } },
          axisLine: {
            show: false,
            lineStyle: {
              type: "dotted",
              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 < 100000) {
                out = (val / 10000).toFixed(2) - 0 + "万"
              } else if (val >= 100000 && val < 100000000) {
                return (val / 10000).toFixed(0) - 0 + '万'
              } else if (val >= 100000000) {
                out = (val / 100000000).toFixed(2) - 0 + "亿"
              }
              return out
            }
          }
        },
        series: this.data.yData
      };
      // this.chart.on("finished", () => {
      //   console.log("绘图结束");
      // })
      this.chart.setOption(option);
      return this.chart;
    },
    changeselect: function (e) {
      let type = e.currentTarget.dataset.type;
      if (type === this.data.select) return;
      let yData = [], xData = [];
      this.data.list.map((v, i) => {
        yData[i] = {
          type: this.data.type,
          data: []
        }
        if (v.length) {
          v = v.sort((a, b) => {
            return b[type] - a[type]
          })
          let sLi = JSON.parse(JSON.stringify(v));
          if (v.length > 10) sLi = sLi.splice(0, 10);
          sLi.map(val => {
            yData[i].data.push(val[type]);
            i === 0 && xData.push(val[this.data.xType]);
          })
        }
      })
      this.setData({
        select: type,
        yData,
        xData
      }, () => {
        let option = this.chart.getOption();
        option.series = yData;
        option.xAxis[0].data = xData;
        this.chart.setOption(option);
      })
    },
  }
})