uni-app & echarts & click series All In One

echarts & clickData ✅

<template>
  <view>
    <view
      class="echarts"
      :id="option.id"
      :prop="option"
      :change:prop="echarts.update"
      @click="echarts.onClick">
    </view>
  </view>
</template>

<script>
  export default {
    name: 'Echarts',
    props: {
      option: {
        type: Object,
        required: true
      }
    },
    created() {
      // 設置隨機數id
      let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      let len = t.length
      let id = ''
      for (let i = 0; i < 32; i++) {
        id += t.charAt(Math.floor(Math.random() * len))
      }
      this.option.id = id
    },
    methods: {
      /**
       * renderjs內的點擊事件，回調到父組件
       * @param {Object} params
       */
      onViewClick(params) {
        console.log('2 viewclick', params);
        this.$emit('click', params);
      }
    }
  }
</script>

<script module="echarts" lang="renderjs">
  import echarts from '@/components/echarts/echarts.min.js'
  
  export default {
    data() {
      return {
        chart: null,
        clickData: null // echarts點擊事件的值
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      /**
       * 初始化echarts
       */
      init() {
        // 根據id初始化圖表
        this.chart = echarts.init(document.getElementById(this.option.id))
        this.update(this.option)
        // echarts的點擊事件
        this.chart.on('click', params => {
          // 把點擊事件的數據緩存下來
            console.log('0 clickData', params);
                    // componentIndex
                    // componentSubType
                    // componentType
                    // echarts.vue:25 Uncaught TypeError: Converting circular structure to JSON at JSON.stringify (<anonymous>)
            // console.log(JSON.stringify(params));
          this.clickData = params;
                    this.$ownerInstance.callMethod('onViewClick', {
            value: this.clickData.data,
            name: this.clickData.name,
            seriesName: this.clickData.seriesName
          });
            console.log('this.$ownerInstance', this.$ownerInstance);
            console.log('？ click');
          // 上次點擊數據置空
          this.clickData = null;
        })
      },
      /**
       * 點擊事件，可傳遞到外部
       * @param {Object} event
       * @param {Object} instance
       */
      onClick(event, instance) {
        // console.log('1 click');
        // if (this.clickData) {
        // 	// 把echarts點擊事件相關的值傳遞到renderjs外
        // 	instance.callMethod('onViewClick', {
        // 		value: this.clickData.data,
        // 		name: this.clickData.name,
        // 		seriesName: this.clickData.seriesName
        // 	})
        // 	// 上次點擊數據置空
        // 	this.clickData = null;
        // }
      },
      /**
       * 監測數據更新
       * @param {Object} option
       */
      update(option) {
        if (this.chart) {
          // 因App端，回調函數無法從renderjs外傳遞，故在此自定義設置相關回調函數
          if (option) {
            // tooltip
            if (option.tooltip) {
              // 判斷是否設置tooltip的位置
              if (option.tooltip.positionStatus) {
                option.tooltip.position = this.tooltipPosition()
              }
              // 判斷是否格式化tooltip
              if (option.tooltip.formatterStatus) {
                option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
              }
            }
          }
          // 設置新的option
          this.chart.setOption(option, option.notMerge)
        }
      },
      /**
       * 設置tooltip的位置，防止超出畫布
       */
      tooltipPosition() {
        return (point, params, dom, rect, size) => {
          // 其中point為當前鼠標的位置，size中有兩個屬性：viewSize和contentSize，分別為外層div和tooltip提示框的大小
          let x = point[0]
          let y = point[1]
          let viewWidth = size.viewSize[0]
          let viewHeight = size.viewSize[1]
          let boxWidth = size.contentSize[0]
          let boxHeight = size.contentSize[1]
          let posX = 0 // x坐標位置
          let posY = 0 // y坐標位置
          if (x >= boxWidth) { // 左邊放的下
            posX = x - boxWidth - 1
          }
          if (y >= boxHeight) { // 上邊放的下
            posY = y - boxHeight - 1
          }
          return [posX, posY]
        }
      },
      /**
       * tooltip格式化
       * @param {Object} unit 數值后的單位
       * @param {Object} formatFloat2 是否保留兩位小數
       * @param {Object} formatThousands 是否添加千分位
       */
      tooltipFormatter(unit, formatFloat2, formatThousands) {
        return params => {
          let result = ''
          unit = unit ? unit : ''
          for (let i in params) {
            if (i == 0) {
              result += params[i].axisValueLabel
            }
            let value = '--'
            if (params[i].data !== null) {
              value = params[i].data
              // 保留兩位小數
              if (formatFloat2) {
                value = this.formatFloat2(value)
              }
              // 添加千分位
              if (formatThousands) {
                value = this.formatThousands(value)
              }
            }
            // #ifdef H5
            result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
            // #endif
            
            // #ifdef APP-PLUS
            result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
            // #endif
          }
          return result
        }
      },
      /**
       * 保留兩位小數
       * @param {Object} value
       */
      formatFloat2(value) {
        let temp = Math.round(parseFloat(value) * 100) / 100
        let xsd = temp.toString().split('.')
        if (xsd.length === 1) {
          temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
          return temp
        }
        if (xsd.length > 1) {
          if (xsd[1].length < 2) {
            temp = temp.toString() + '0'
          }
          return temp
        }
      },
      /**
       * 添加千分位
       * @param {Object} value
       */
      formatThousands(value) {
        if (value === undefined || value === null) {
          value = ''
        }
        if (!isNaN(value)) {
          value = value + ''
        }
        let re = /\d{1,3}(?=(\d{3})+$)/g
        let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
          return s1.replace(re, '$&,') + s2
        })
        return n1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---