适用于Taro项目的ECharts图表组件

Taro-Echarts

适用于Taro项目的ECharts图表组件，基于项目echarts-for-weixin封装

安装

npm i -S taro-echarts

配置

修改Taro项目的配置config/index

copy

-- -------------------- ---- -------
----- -
  --------- -
    -- -------
    -
      ----- --------------------------------------------------
      --- ---------------------------------------------
      ------- ---------------- ---------------
    -
  --
  -------- -
  -
-

h5.esnextModules

h5: {
  // 需添加如下配置
  esnextModules: ['taro-echarts'],
  ...
}

使用

引入

import Chart from 'taro-echarts'

示例代码：以折线图为例

-- -------------------- ---- -------
------
  ---------
    ------ -
      ----- -----------
      ----- ------- ------ ------ ------ ------ ------ ------
    --
    ------ -
      ----- -------
    --
    ------- --
      ----- ----- ---- ---- ---- ----- ----- ------
      ----- ------
    --
  --
--

API

属性名	说明	类型	默认值
width	图表的宽	string	100%
height	图表的高	string	200px
option	ECharts的option配置	object	-
onBeforeSetOption	在echarts首次调用setOption前执行该方法，该方法会返回echarts的引用，可以在该方法中注册地图，注册主题等	(echarts)=>void	-
customStyle	自定义容器样式	string	-
loading	是否显示loading效果	bool	false
loadingConf	loading效果的样式配置	object	-

支持度

h5	微信小程序	ReactNative	支付宝小程序	百度小程序	字节跳动小程序
√	√	×	×	×	×

微信小程序获取图片示例代码

-- -------------------- ---- -------
------ ----- - --------- - ---- --------------
------ - ----- ------ - ---- --------------------
------ ----- ---- --------------

------ ------- ----- ---- ------- --------- -

  ----------- - ---- -- ------------- - ----

  ------- - ----- -- -- -
    -- ---------
    ----- ---- - ----- ----------------------------
    ------------------- -------- ----- ----- ------ --
  -

  -------- -
    ------ -
      ------
        ------- --------------------------------------
        ------
          ----------------------
          -------------- ---------- --- --
          ---------
            ------ -
              ----- -----------
              ----- ------- ------ ------ ------ ------ ------ ------
            --
            ------ -
              ----- -------
            --
            ------- --
              ----- ----- ---- ---- ---- ----- ----- ------
              ----- ------
            --
          --
        --
      -------
    -
  -
-

License

MIT

HomePage

https://github.com/eyelly-wu/taro-echarts#readme

Repository

git+https://github.com/eyelly-wu/taro-echarts.git

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600673defb81d47349e53bd4