Wechat applet chart development (eCharts)

1, Description

This article mainly records the use of charts in the development of wechat applet. Here is mainly about the use of echarts, and finally the use of wecharts. As for the difference between the two, echarts is more powerful, but its volume is larger. There are more than 500K imported in, even if you import custom components, it is also very large. While wxcharts is not so powerful, but its volume is relatively small, especially the lightweight version is only a little more than 30K, which is very suitable for small programs with high size requirements.

1. Use of echarts

(1) Download

Here we download the version of echarts that others have adapted on the applet. Download address

(2) Importing ecrats into applets

Extract the downloaded ecrats for Weixin master package, and then copy all the files in the EC canvas folder directly to the applet. Here I copy them to the utils directory.

! [applet directory] (https://img-blog.csdnimg.cn/20200114163643439.jpg)
(3) Conduct relevant configuration and development

First of all, you need to reference the relevant modules in the page. Here, you create a new page named echarts.json

{
  "navigationBarTitleText": "Pie chart implementation",
  "usingComponents": {
    "ec-canvas": "../../utils/ec-canvas/ec-canvas"
  }
}

Here is the code for echarts.wxml

<view class="econtainer">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

Be sure to pay attention to the style of the control, because the length and width settings are not good, which may lead to the chart can not be displayed, and be sure to pay attention to the difference between rpx and px, especially when using wxcharts, otherwise the format on different phones will be very messy. Here is the code for eckarts.wxss:

/* pages/echarts/echarts.wxss */
ec-canvas {
  width: 100%;
  height: 300px;
}

.econtainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  box-sizing: border-box;
}

The following is the code of the echarts.js file:

// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();

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

  var option = {
    title: {
      text: 'Pie chart',
      subtext: 'Pure fiction',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines']
    },
    series: [
      {
        name: 'Item:',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        label: {
          show: true,
          formatter: '{b}({d}%)'
        }, 
        data: [
          { value: 335, name: 'Direct access' },
          { value: 310, name: 'Mail marketing' },
          { value: 234, name: 'Alliance advertising' },
          { value: 135, name: 'Video advertising' },
          { value: 1548, name: 'Search Engines' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initPie
    }
  },

  onReady() {
  }
});

The following is the screenshot of the operation, debugging and running on the computer, some of which are not fully displayed:

! [pie screenshot] (https://img-blog.csdnimg.cn/20200114170028263.jpg? X-oss-process = image / watermark, type ﹣ zmfuz3pozw5nagvpdgk, shadow ﹣ 10, text ﹣ ahr0chm6ly9ibg9nlmnzzg4ubmv0l3fxzm2mjiotyx, size ﹣ 16, color ﹣ ffff, t ﹣ 70)
(4) Precautions

If you follow the above steps, you can directly copy the above code and run it.

At this time, we will have a question, what if we change to other charts? We combed the echarts.js file and found that, in fact, we can change the option in the initPie method to other charts except for the whole framework. However, one thing we should pay attention to is that the var definition in front of the option should not be removed, otherwise the chart cannot be displayed. The following is the framework of echarts.js:

import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();

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

  var option = {
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initPie
    }
  },

  onReady() {
  }
});

Why echarts is powerful? Not only is it more beautiful, but also we can directly echartsjs official website The above example code (note that it must be the chart of option code, and others should be adapted by yourself) is copied to the option of initPie method of echarts.js. Some of the simpler charts can be directly copied for use, and then the data can be changed to the data you want.

Another problem is how to load two or more charts on the same page?

Just add a label to the echarts.wxml file:

<!--index.wxml-->
<view class="econtainer">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

<view class="econtainer">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ cl }}"></ec-canvas>
</view>

Then add a method in echarts.js, and initialize it in page data. The following is the complete code of echarts.js with two charts:

// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();

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

  var option = {
    title: {
      text: 'Pie chart',
      subtext: 'Pure fiction',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines']
    },
    series: [
      {
        name: 'Item:',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        label: {
          show: true,
          formatter: '{b}({d}%)'
        }, 
        data: [
          { value: 335, name: 'Direct access' },
          { value: 310, name: 'Mail marketing' },
          { value: 234, name: 'Alliance advertising' },
          { value: 135, name: 'Video advertising' },
          { value: 1548, name: 'Search Engines' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

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

  var option = {
    title: {
      text: 'Cylindrical graph'
    },
    color: ["#ff9966"],
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    legend: {
      data: ['Sales volume']
    },
    xAxis: {
      data: ["shirt", "Cardigan", "Chiffon shirt", "trousers", "High-heeled shoes", "Socks"]
    },
    yAxis: {},
    series: [{
      name: 'Sales volume',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initPie
    },
    cl: {
      onInit: initClomn
    }
  },

  onReady() {
  }
});

Screenshots:

! [screenshot] (https://img-blog.csdnimg.cn/20200114173155437. JPG? X-oss-process = image / watermark, type ﹐ zmfuz3pozw5nagvpdgk, shadow﹐ 10, text ﹐ ahr0chm6ly9ibg9nlmnzzg4ubmv0l3fxzm2mjiotyx, size﹐ 16, color﹐ ffff, t﹐)
Published 5 original articles, won praise and 593 visitors
Private letter follow

Tags: JSON

Posted on Tue, 14 Jan 2020 05:15:04 -0500 by chanw1