React has grown so fast that we’ve become more comfortable with the way it’s written and the way it’s written. Small applications have become so popular that the common compilation mode is no longer suitable for developers. Taro was born out of a constant search for a language framework that could be compiled in small applications like React. The most powerful executive in the universe. It supports the use of React development method to write applications that can run on multiple platforms such as wechat applet, Web, React Native, etc. Through constant iteration and improvement, Taro has been reborn from the ashes.

TaroEcharts profile

This project is a set of diagram framework for Taro version based on EC-Canvas package summarized in the actual development. With simple configuration and React syntax, developers can quickly develop charts to meet various visualization requirements.

Making address:Github.com/WsmDyj/echa…

Wechat applet preview:

The implementation process

1 download

In order to be compatible with small program Canvas, we first build EC-Canvas and download it locally. Ec-canvas is a component provided by the official website of Echarts. You can download or customize your own chart or plug-in from the official website.

2 Importing Components

Introduce the component library we need in the project, and place it in the SRC/Components /ec-canvas folder. You can import this folder into your project. Echarts.js is the echarts chart plug-in we just downloaded. You can download the required chart according to the actual project needs and then import it.

3 Creating a chart (pie chart as an example)

3.1 Creating a Chart Component

Create the piecharts.js component under the Components folder. Introduce the component we just created

import * as echarts from “./ec-canvas/echarts”;

3.2 Lazy loading of rendering charts

Configure our EC-Canvas

config = {
    usingComponents: {
        "ec-canvas": "./ec-canvas/ec-canvas"}};Copy the code

Use the newly imported EC-canvas in the render function

<ec-canvas
    ref={this.refChart}
    canvas-id="mychart-area"
    ec={this.state.ec}
/>
Copy the code

Build the Refresh function initialization diagram

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);
Copy the code

Configure lazy loading charts

state = {
    ec: {
      lazyLoad: true}};Copy the code

3.3 Configuring the option for the chart we need

Here the configuration is carried out in setChartData and the charts and data parameters are passed in.


function setChartData(chart, data) {
  let option = {
    series : [
      {
        name: 'Access source'.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); }Copy the code

The pie chart has been created. For details, see the pie chart

4 Instantiate the diagram

Import the newly created chart (pie chart) in the page where the chart is needed

import PieChart from “.. /.. /components/PieChart”;

Render function import

<PieChart ref={this.refPieChart} />
Copy the code

Instantiate the chart and pass in data

componentDidMount() {
    const chartData = [
      {value:335, name:'Direct access'},
      {value:310, name:'Email marketing'},
      {value:234, name:'Affiliate advertising'},
      {value:135, name:'Video advertising'},
      {value:1548, name:'Search engines'}]; this.pieChart.refresh(chartData); } refPieChart = (node) => this.pieChart = nodeCopy the code

At this point, the pie chart has been created, and everything else is similar. Just set options this way and we can create the diagram you want.

5 Creation of other charts

Sliding chart:

Multiple charts on a page:

Multiple charts combined:

conclusion

From unknown to a household name, Taro is now gradually accepted by developers. Should be even more popular down the road, after all, the most powerful executive in the universe. However, a good framework also requires most tools. It’s like an ADC with an auxiliary. There is no unified development specification for diagrams in Taro, which is currently only one of the methods used by our team. The taro-Echarts package is also being drawn out separately. Welcome to join us.