epdc-analysis-mp-yushan/miniprogram/subpages/basicReality/components/lineChart/lineChart.ts

//@ts-ignore
import * as echarts from '../../../../components/ec-canvas/echarts';

function getOption(para: any) {
  const { categoryList, joinNumList, organizationsCountList, averageNum } = para
  const option =  {
    legend: {
      right: '5%',
      top: '10',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      selectedMode: false,
      data: [{
        name: '参加人数',
        textStyle: {
          color: '#FEAE3A'
        }
      },
      {
        name: '组织次数',
        textStyle: {
          color: '#DC1E20'
        }
      },
      {
        name: '平均参加人数',
        textStyle: {
          color: '#DD7B2A'
        }
      }]
    },
    tooltip: {
      trigger: 'axis',
      triggerOn: 'click',
      axisPointer: {
        type: 'line',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '15%',
      right: '5%',
      bottom: '20%',
      top: '50'
    },
    dataZoom: {
      start:0, //默认为0  
      end: (6/ 22) * 100,  
      type: 'inside',
      zoomLock: true,
      show: true,  
      xAxisIndex: [0],
      backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色  
      showDataShadow: false,//是否显示数据阴影 默认auto  
      showDetail: false,//即拖拽时候是否显示详细数值信息 默认true 
      filterMode: 'filter'
    },
    xAxis: {
        type: 'category',
        axisLabel: {
          rotate: 45,
          color: '#999999',
          margin: 17,
          lineHeight: 15,
          fontSize: 9,
          formatter: function (params: any) {
            var newParamsName = ''
            var paramsNameNumber = params.length
            var provideNumber = 5
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            for (let row = 0; row < rowNumber; row++) {
              newParamsName +=
                params.substring(
                  row * provideNumber,
                  (row + 1) * provideNumber
                ) + '\n'
            }
            return newParamsName
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#999999'
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        data: categoryList
        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '十三月', '十四月', '十五月', '十六月', '十七月', '十八月', '十九月' ,'二十月']
    },
    yAxis: {
        type: 'value',
        show: true,
        axisLine: {
          show: false // 是否显示坐标轴线
        },
        axisLabel: {
          color: '#444444'
        },
        axisTick: { 
          show: false // 是否显示坐标轴刻度
        }
    },
    series: [
      {
        name: '参加人数',
        data: joinNumList,
        // data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330],
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle:{
          normal: {
            color: '#FEAE3A',
            lineStyle: {
              type: 'dashed',
              width: 1.5
            }
          }
        }
      },
      {
        name: '组织次数',
        data: organizationsCountList,
        // data: [690, 720, 780, 840, 1024, 1180, 1120, 690, 720, 780, 840, 1024, 1180, 1120, 690, 720, 780, 840, 1024, 1180],
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: '#DC1E20',
            lineStyle: {
              type: 'dashed',
              width: 1.5
            }
          }
        }
    },{
      name: '平均参加人数',
      data: averageNum,
      // data: [430, 520, 580, 640, 890, 1024, 900, 430, 520, 580, 640, 890, 1024, 900, 430, 520, 580, 640, 890, 1024],
      type: 'line',
      smooth: false,
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        normal: {
          color: '#DD7B2A',
          lineStyle: {
            type: 'dashed',
            width: 1.5
          }
        }
      }
    }]
  }
  // chart.setOption(option)
  return option
}

Component({
  data: {
    ec: {
      lazyLoad: true 
    },
    isLoaded: false,
    isDisposed: false
  },
  properties: {
    lineChartObj: {
      type: Object,
      value: {
        categoryList: [],
        joinNumList: [],
        organizationsCountList: [],
        averageNum: []
      },
      observer: function (value) {
        if ('categoryList' in value) {
          setTimeout(() => {
            this.loadData(value)
          }, 500)
        }
      }
    },
    deptNum: {
      type: String,
      value: '左右滑动查看22各街道'
    }
  },
  lifetimes: {
    attached () {
      // @ts-ignore
      this.ecComponent = this.selectComponent('#line-chart')
      this.init()
    }
  },
  methods: {
    // 点击按钮后初始化图表
    init () {
      // @ts-ignore
      this.ecComponent.init((canvas, width, height) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        // @ts-ignore
        this.chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        // @ts-ignore
        this.chart.showLoading({
          text: '加载中...',
          color: '#c23531',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        // @ts-ignore
        this.setData({
          isLoaded: true,
          isDisposed: false
        })
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        // @ts-ignore
        return this.chart
      })
    },
    loadData (para) {
       // @ts-ignore
       this.chart.clear()
       // @ts-ignore
       this.chart.hideLoading()
       // @ts-ignore
       this.chart.setOption(getOption(para))
    },
    dispose () {
      // @ts-ignore
      if (this.chart) {
        // @ts-ignore
        this.chart.dispose();
      }
      this.setData({
        isDisposed: true
      });
    }
  }
})