epdc-analysis-mp-yushan/miniprogram/subpages/governRanking/components/gridListItem/gridListItem.ts

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

function setOption(chart: any, chartData: AnyArray, echartsColorList: AnyArray) {
  const option = {
    color: echartsColorList,
    series: [
      {
        type: 'pie',
        radius: ['72%', '95%'],
        silent: true,
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false,
          normal: {
            show: false
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: '2'
        },
        data:chartData
      }
    ]
  }
  chart.setOption(option)
}

Component({
  data: {
    ec: {
      lazyLoad: true
    },
    colorList: ['#fe6963', '#ffc600', '#e7a756', '#cfedec'],
    echartsColorList: [],
    chartData: [],
    width:0
  },
  properties: {
    order: {
      type: Number,
      value: 0
    },
    contentObj: {
      type: Object,
      value: {},
      observer: function (value) {
        let chartData = []
        let echartsColorList = []
        if (value.byselfPercent == 0 && value.whistleCommunityPercent == 0 && value.whistleStreetPercent == 0){
          if (value.byselfPercent == 0) {
            chartData.push({
              value: value.byselfPercent,
              name: '自治率'
            })
            echartsColorList.push('#29B9A5')
          }
          if (value.whistleCommunityPercent == 0) {
            chartData.push({
              value: value.whistleCommunityPercent,
              name: '吹哨社区率'
            })
            echartsColorList.push('#FFA270')
          }
          if (value.whistleStreetPercent == 0) {
            chartData.push({
              value: value.whistleStreetPercent,
              name: '吹哨街道率'
            })
            echartsColorList.push('#FFC600')
          }
        }else{
          if (value.byselfPercent > 0) {
            chartData.push({
              value: value.byselfPercent,
              name: '自治率'
            })
            echartsColorList.push('#29B9A5')
          }
          if (value.whistleCommunityPercent > 0) {
            chartData.push({
              value: value.whistleCommunityPercent,
              name: '吹哨社区率'
            })
            echartsColorList.push('#FFA270')
          }
          if (value.whistleStreetPercent > 0) {
            chartData.push({
              value: value.whistleStreetPercent,
              name: '吹哨街道率'
            })
            echartsColorList.push('#FFC600')
          }
        }
       
        this.setData({
          // @ts-ignore
          chartData: chartData,
           // @ts-ignore
          echartsColorList: echartsColorList
        })
      }
    }
  },
  lifetimes: {
    attached () {
      this.setData({
        width:wx.getSystemInfoSync().windowWidth
      })
      // @ts-ignore
      this.ecComponent = this.selectComponent('#mychart-dom-bar')
      this.init()
    },
    ready(){
      wx.createSelectorQuery().in(this).selectAll('.street-name').boundingClientRect((res)=>{
        console.log(this.data.width)
        let height = this.data.width > 500?"60":"30"
        if(res[0].height>height){
          this.setData({
            "contentObj.overHeight": true
          })
        }
      }).exec()
  }
  },
  methods: {
    // 点击按钮后初始化图表
    init () {
      // @ts-ignore
      this.ecComponent.init((canvas: any, width: any, height: any) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        setOption(chart, this.data.chartData, this.data.echartsColorList)
        return chart
      })
    }
  }
})