TaroEcharts-各种图表在Taro中的实践

随着React的快速发展，我们也越来越接受它的写法和思想，如今小程序如火中天，普通的编译模式早已不适应开发者的需求。人们在不断的寻求一种React能够在小程序中编译的语言框架，因此Taro便诞生了。宇宙中最强的执行官。它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用。经过不断地迭代完善，已经让 Taro 浴火重生。

TaroEcharts简介

本项目是在实际开发中总结出来的一套基于ec-canvas封装的适用于Taro版本的图表框架。开发者可以通过简单的配置及 React 的语法，快速开发图表，满足各种可视化需求。

Github地址：github.com/WsmDyj/echa…

微信小程序预览：

实现过程

1 下载

为了兼容小程序 Canvas，我们首先去构建ec-canvas下载到本地。其中ec-canvas是echarts官网提供的组件，我们可以自行下载或者去官网自定义构建选择自己需要的图表或插件进行下载。

2 引入组件

在项目中引入我们需要的组件库，这里统一将其放在src/components/ec-canvas文件夹下。大家可将该文件夹导入到自己项目中去。其中echarts.js就是刚我们自行下载的echarts图表插件，可根据实际项目需求自定义下载所需图表然后将其导入。

3 创建图表(以饼图为例)

3.1 新建图表组件

在components文件夹下创建pieCharts.js组件。引入我们刚创建的组件

import * as echarts from "./ec-canvas/echarts";

3.2 懒加载渲染图表

配置我们的ec-canvas

config = {
    usingComponents: {
        "ec-canvas": "./ec-canvas/ec-canvas"
    }
};
复制代码

在render函数中使用刚导入的ec-canvas

<ec-canvas
    ref={this.refChart}
    canvas-id="mychart-area"
    ec={this.state.ec}
/>
复制代码

构建refresh函数初始化图表

refresh(data) {
    this.Chart.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setChartData(chart, data);
      return chart;
    });
  }

  refChart = node => (this.Chart = node);
复制代码

配置懒加载图表

state = {
    ec: {
      lazyLoad: true
    }
 };
复制代码

3.3 配置我们所需图表的option

这里在setChartData进行配置，并传入charts,data参数。


function setChartData(chart, data) {
  let option = {
    series : [
      {
        name: '访问来源',
        type: 'pie',
        center: ['50%', '50%'],
        radius: [0, '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
}
复制代码

至此饼图已经创建完成，具体的可参考饼图

4 实例化图表

在需要图表的页面中导入刚创建的图表(饼图)

import PieChart from "../../components/PieChart";

render函数中导入

<PieChart ref={this.refPieChart} />
复制代码

实例化图表并传入data

componentDidMount() {
    const chartData = [
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:234, name:'联盟广告'},
      {value:135, name:'视频广告'},
      {value:1548, name:'搜索引擎'}
    ];
    this.pieChart.refresh(chartData);
  }
  refPieChart = (node) => this.pieChart = node
复制代码

至此饼图已经创建完成，饼图如此其他的都是类似的。只要照着这个方式去设置option,我们就可以创建你想要的图表了。

5 其他图表的创建

可滑动图表：

一个页面多个图表:

多个图表结合在一起:

总结

从不为人知到家喻户晓，Taro现在也逐渐被开发者所接受。在未来的道路上应该还会更火，毕竟是宇宙中最强的执行官。然而一个好的框架也是需要大部分工具辅助的。就好比ADC旁边总跟着个辅助。其中图表在Taro中目前还没有一个统一的开发规范，目前这仅是我们团队中使用的一种方式。目前也正在抽离出单独针对Taro-echarts包。志同道合欢迎提issue一起加入我们。