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

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

function getOption(para: AnyObject) {
  const { categoryList, joinNumList, organizationsCountList, averageNum } = para
  const option =  {
    legend: {
      right: '5%',
      top: '10',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      itemGap: 10,
      selectedMode: false,
      data: [{
        name: '参加人数',
        textStyle: {
          color: '#E33723'
        }
      },
      {
        name: '组织次数',
        textStyle: {
          color: '#E47600'
        }
      },
      {
        name: '平均参加人数',
        textStyle: {
          color: '#FEAE3A'
        }
      }]
    },
    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: (3 / 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,
          fontSize: 10,
          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: [720, 832, 901, 834, 1090, 1230, 1220,720, 832, 801, 834, 1090, 1130, 1120,120, 632, 701, 534, 1090, 1230],
        type: 'bar',
        barWidth: 10,
        stack: '堆叠',
        itemStyle:{
          normal: {
            color: '#E33723'
          }
        }
      },
      {
        name: '组织次数',
        data: organizationsCountList,
        // data: [69, 72, 78, 84, 102, 118, 112, 69, 72, 78, 84, 102, 118, 112, 69, 70, 78, 84, 102, 110],
        type: 'bar',
        barWidth: 10,
        stack: '堆叠',
        itemStyle: {
          normal: {
            color: '#E47600'
          }
        }
    },{
      name: '平均参加人数',
      data: averageNum,
      // data: [1020, 1032, 1001, 1034, 1390, 1430, 1420,920, 1032, 1001, 1034, 1390, 1430, 1420,920, 1032, 1001, 1034, 1390, 1430],
      type: 'line',
      smooth: false,
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        normal: {
          color: '#FEAE3A',
          lineStyle: {
            type: 'dashed',
            width: 1.5
          }
        }
      }
    }]
  }
  // chart.setOption(option)
  return option
}

Component({
  data: {
    ec: {
      lazyLoad: true
    },
    isLoaded: false,
    isDisposed: false
  },
  properties: {
    pileBarLineObj: {
      type: Object,
      value: {
        categoryList: [],
        joinNumList: [],
        organizationsCountList: [],
        averageNum: []
      },
      observer: function (value) {
        if ('categoryList' in value) {
          setTimeout(() => {
            this.loadData(value)
          }, 500)
        }
      }
    },
    pieDeptNum: {
      type: String,
      value: '左右滑动查看22个街道'
    }
  },
  lifetimes:{
    attached () {
      // @ts-ignore
      this.ecComponent = this.selectComponent('#pile-bar-line-chart')
      this.init()
    }
  },
  methods: {
    init () {
      // @ts-ignore
      this.ecComponent.init((canvas, width, height) => {
        // @ts-ignore
        this.chart = echarts.init(canvas, null, {
          width, 
          height
        })
        // @ts-ignore
        this.chart.showLoading({
          text: '加载中...',
          color: '#c23531',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })
        
        this.setData({
          isLoaded: true,
          isDisposed: false
        })
        // @ts-ignore
        return this.chart
      })
    },
    loadData (para) {
      // @ts-ignore
      this.chart.clear()
      // @ts-ignore
      this.chart.hideLoading()
      // @ts-ignore
      this.chart.setOption(getOption(para))
    }
  }
})