taro-main-echarts v1.0.2

taro-main-echarts

开箱即用的 Taro3（2.0 请参照 master 分支） echarts 组件. 据有以下特性：

• 支持多种使用方式。
• 支持自定义构建的 echarts
• 支持导出图片

其实用法与 npm i techarts是一样的，只是因为techarts没有添加构建的echar 导致去官网下载的echarts.js放入本地太大所以这边就将echarts.js放入包内，以便减少小程序的包内存

安装

npm install taro-main-echarts

使用

import MainEChart from 'taro-main-echarts';
// 自定义构建的echar

// 基本用法
<MainEChart 
    // echarts={echarts}  支持自定义构建的echar
    option={{//option:https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step2直接去官网复制
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}}
/>;

// 通过组件实例设置数据
<MainEChart ref={this.chart} echarts={echarts} />

this.chart.current.setOption({...});

// 自定义初始化
<MainEChart echarts={echarts} onInit={this.onInit} />;

onInit = (canvas, width, height, dpr) => {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
  });
  return chart; // 必须return
};

// 以上三种用法可以结合使用

参数

实例 API

示例

参照项目 demo 目录

注意事项

• Taro H5 本地开发时样式加载延时，导致 echarts 初始化宽高读取错误。build 之后正常
• canvasToTempFilePath h5 未实现定制宽高位置等功能