Mini program - ECharts, draw beautiful charts

Introduction

• In order to be compatible with the mini program Canvas, ECharts officially provides a component of the mini program. In this way, ECharts can be used conveniently. This project is a version of the ECharts WeChat applet and contains applet components and usage examples. Developers can quickly develop charts to meet various visualization needs through the familiar ECharts configuration method.
• ec-canvas is a component provided by ECharts, and the other files are examples of how to use this component.
• There is echarts.js in the ec-canvas directory. You can download the latest release version from the ECharts project. The default echarts.js file is large and can be customized from the official website to reduce the file size.

Remark

• Mini program version ECharts project address
• ECharts official website address
• ECharts online customization
• ECharts Tutorial
• Chart configuration items and data cases

Example

1. Use WeChat development tools to create a project, create a new index folder in the pages directory and add files. You can right-click and select "New Page": index.js, index.json, index.wxml, index.wxss. Add 'pages/index/index' to pages in app.json. If you use the shortcut, it can be filled in automatically.
2. Copy the ECharts project ec-canvas file to the project.
3. Configure index.json and introduce the ec-canvas component.

{
    
    
  "usingComponents": {
    
    
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

4. The content of index.html is as follows.

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
    
    { ec }}"></ec-canvas>
</view>

5. The structure of index.js is as follows. We only need to modify the content of option to change the chart. .

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

const app = getApp();

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

  var option = {
    
    
    title: {
    
    
      text: '测试下面legend的红色区域不应被裁剪',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
    
    
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      z: 100
    },
    grid: {
    
    
      containLabel: true
    },
    tooltip: {
    
    
      show: true,
      trigger: 'axis'
    },
    xAxis: {
    
    
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
    
    
      x: 'center',
      type: 'value',
      splitLine: {
    
    
        lineStyle: {
    
    
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
    
    
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
    
    
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
    
    
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
    
    
  onShareAppMessage: function (res) {
    
    
    return {
    
    
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {
    
     },
      fail: function () {
    
     }
    }
  },
  data: {
    
    
    ec: {
    
    
      onInit: initChart
    }
  },

  onReady() {
    
    
  }
});

1. The chart is shown below.
   

common problem

1. [JS file compilation error] The following file size exceeds 500KB, and compression and ES6 to ES5 processing have been skipped.
   ec-canvas/echarts.js
   Answer: Because the size of echarts.js is too large and is still larger than 500KB even after UglifyJS compression, the WeChat development tool will give the above warning. But developers don’t need to pay too much attention. This will not affect the normal operation of the program and can be ignored. If you have obsessive-compulsive disorder, you can go to the official website to customize online to reduce the size of echarts.js.
2. When we run the official case, you may find that the chart is not displayed. What's going on?
   A: Let’s check it out. Are there any grammatical errors? No. Are the component parameters specified? Yes. Is the option data set? yes. Have the component length and width been set? It's close to the correct answer. what happened? I can only search online, but after searching for a long time, I still can’t find the answer.
   Careful young people may find that the official has actually given us hints.
   At this time, all I could think of was, "Idiot!!!" It was painful to turn around and shoot my head.
   
   Reference :
   https://github.com/ecomfe/echarts-for-weixin

OK, I can finally happily draw beautiful charts! ! !