The current repo belongs to Paused status, and some functions are restricted. For details, please refer to the description of repo status
1 Star 6 Fork 0

gitee_zhangp/easy-echarts-uniapp
Paused

Create your Gitee Account
Explore and code with more than 13.5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

easy-echarts

亮点

  • 无痛顺滑在 uni-app app 端编写 echarts 配置,几乎和在浏览器中书写方式一样。
  • 提供onCreate钩子函数,可以在此函数中添加依赖js,并等待资源完成之后,初始化echarts。
  • 支持 uniapp app 端 echarts 配置编写函数。
  • 支持 uniapp H5 移动端 echarts 交互。
  • 支持 echarts 事件,eg: datazoom,并将自动触发Option类中onDatazoom(option, event, callJsMethod)函数,在此函数中使用callJsMethod方法通知到父组件。
  • 支持 echarts 初始化完成inited事件通知。
  • 支持加载额外js资源,比如地图依赖的js。
  • 支持原生touchstart, touchmove, touchend事件。

使用方式

template:

<view class="my-echarts">
  <!-- id为option类的静态属性name -->
  <my-echarts
    id="TestOption"
    :data="data"
    :events="['click', 'datazoom']"
    @inited="onInited"
    @click="onClick"
    @datazoom="onDatazoom"
  ></my-echarts>
</view>

script: 设置echart需要展示数据

import MyEcharts from '@/components/my-echarts/my-echarts.vue'
export default {
  components: { MyEcharts },
  data() {
    return {
      data: []
    }
  },
  onLoad() {
    /** 获取数据 */
    this.setData()
  }
}

renderjs: 在renderjs层注册自定义TestOption

import myEChartsReflect from '@/components/my-echarts/MyEcharts.js'
import TestOption from '@/pages/index/TestOption.js'
export default {
  created() {
    myEChartsReflect.registOptConstructor(TestOption)
  }
}

TestOption: 自定义option类,本示例中定义y轴formatter函数和serires label展示函数

请一定要手动设置每个option类的静态属性name

  • 说明1:在uni-app打包时,视图层的this.constructor.name 和逻辑层this.constructor.name存在不一致情况, 导致无法在renderjs层重新实例化逻辑层的option构造类。
  • 说明2:id需要和name保持一致。

export default class TestOption extends MyEChartsOption {
  /** 
   * 构造函数名称,实际上可以赋值任何字符串,但建议是变量名称。
   * fix bug: 修复在uni-app打包时,视图层的this.constructor.name
   * 和逻辑层this.constructor.name不一致情况
   * 导致无法在renderjs层重新实例化逻辑层的option构造类。
   */
  static name = 'TestOption'

  /**
   * 资源异步加载
   * @params {string} id 元素的id,这里和上面name一样
   * @return {Promise<void>}
   */
  async onCreate(id) {
    await super.onCreate(id) 
    // 加载别的资源,写在这里
  }

  /**
   * @params {Object} context echarts.init返回值
   */
  onStart(context) {
    super.onStart(context)
  }

  /**
   * 数据data变化触发事件
   * 在echarts初始化完成之后,默认会触发一次
   */
  onDatachange(option, data = [], callJsMethod) {
    if (data.length === 0) {
      this.showLoading()
    } else {
      this.hideLoading()
    }
    const total = data.reduce((prev, val) => {
      return prev + val
    }, 0)
    this.option = {
      // 自定义option
      yAxis: {
        axisLabel: {
          formatter: function (value, index) {
            return value.toFixed(2)
          }
        },
      },
      series: [{
        data: [],
        label: {
          formatter: function (params) {
            if (total === 0) return '0%'
            return Math.floor(params.data / total * 100) + '%'
          }
        }
      }],
      // 自定义option
    }
    /** 需要手动返回,不要忘记他 */
    return this.option
  }

  /**
   * 触发datazoom事件
   * @return {Object|undefined} 可以返回放入setOption中的对象。
   */
  onDatazoom(option, event, callJsMethod) {
    /** 给父组件发送事件 */
    callJsMethod('datazoom', {type: event.type})
    return {}
  }

  /** 
   * touch 事件
   * @params {Object} option echarts.getOption()返回值
   * @params {Object} event echarts事件对象或者html事件对象
   * @params {function} callJsMethod 通知父组件事件
   */
  onTouchstart(option, event, callJsMethod) {

  }
}

props参数

key type desc
data any 需要展示的数据
events string[] 触发指定 echarts 支持的事件名称

约定

  • <my-echarts>的id为option类静态属性name,建议全局唯一,不然新会覆盖老的。
  • 所有option类应类似TestOption那样,继承MyEChartsOption
  • 不要在onDatachange类中修改入参data对象,这个会触发vue setter,导致无限触发change:prop函数,如果一定需要改变原入参对象请深拷贝原对象。e.g JSON.parse(JSON.stringify(data))或者使用MyEcharts.clone工具函数。
  • 如果需要对optiononDatachange方法入参data做大量数据计算,请在逻辑层预先处理好。
  • option类中事件方法定义,比如onDatazoom,则是datazoom事件首字母大写并添加on前缀方式得来。

思想

作者从java中的反射机制得到灵感,在代码运行的时候,动态实例化新对象。
所以在renderjs层先注册了echarts option的类(T extends MyEChartsOption)。
在渲染echarts时候,只用逻辑层data实际上重新实列化了option,这一步的意义是保留option中函数设置。
这样就和在浏览器中编写方式一样。

如果本项目帮助到您的话,请您不要吝啬,赠人玫瑰,手留余香。随手点个star,或者满分好评。

如遇问题,欢迎提issue,或者底部留言。

Empty file

Releases

No release

Contributors

All

Language(Optional)

Activities

can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/gitee_zhangp/easy-echarts-uniapp.git
git@gitee.com:gitee_zhangp/easy-echarts-uniapp.git
gitee_zhangp
easy-echarts-uniapp
easy-echarts-uniapp
master

Search