The introduction of echart chart in applets

Echart and wechat applet official team work together to provide the wechat applet version of echart. Echart chart technology should be the best in China, and it's really excellent to be able to integrate into the applet application.

Preparation: applet development environment, Download ECharts component, gitHub address: ecomfe/echarts-for-weixin

The basic library of applet is required: 1.9.91 (version compatibility is not considered)

Operation process: turnCopy EC canvas to the project root.

Import component of corresponding page json file:

{
  "navigationBarTitleText": "Customer report",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

Corresponding page js file:

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = []
var list1 = []

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Customer']
    },
    grid: {
      left: '1%',
      right: '30rpx',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list,
      name: 'Month',
      nameGap: 2,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      name:'Number'
    },
    series: [
      {
        name: 'Customer',
        type: 'line',
        stack: 'total',
        data: list1
      }
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

Corresponding page wxml file:

      <view class="recommend_hot_box">
        <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}">
        </ec-canvas>
      </view>

So far, the ECharts chart has been set successfully. The option object information can be set according to the documents provided by ECharts, which is very much.

Documents correspond to each other layer by layer, which is very clear. You can find the corresponding settings for what you need to set. The settings of option are consistent with those of web pages.

In the process of development, I need linear chart to slide left and right in the small program. It can't be installed on one screen. demo provides non blocking sliding, but only development tools can slide, and it can't slide on the real machine. This is a bit awkward. Who is the God that can slide on the real machine to tell us (fist)

Example of ECharts applet

Tags: github JSON

Posted on Fri, 31 Jan 2020 18:51:46 -0500 by Vigilant Psyche