This is the third day of my participation in Gwen Challenge, for more details: Gwen Challenge!

Introduction to 👽

The need to chart in applets is becoming more and more common. However, in the past, developing applets echarts charts often had various pitfalls, including but not limited to:

  1. The Canvas chart is too hierarchical to be covered by Mask components.
  2. Does not support 2D rendering, poor performance; · · · · · ·

These problems are not without solutions, but the constant energy expended on them can be frustrating. Echarts has recently released a new version of the app, which feels much better when used in multiple projects.

Here is how to draw maps using Echats5 in the UniApp project.

👽 module introduction

👻 Import tool files

For convenience, we directly searched the UNI plug-in market for echarts-for-WX plug-ins to import into the project. (This plugin is based on the native package, the source code of the fire can be found in github echarts wechat project echarts-for-Weixin ec-Canvas folder for understanding).

👻 Thin Echarts source files

The complete echart.js file is nearly 1M in size, making even small, volume-demanding programs unbearable when compressed. If you don’t really want to use all of Echart’s features, you can simplify it as follows:

  1. Go to Echarts official custom build website;
  2. Select required modules and functions and download;
  3. Replace the echarts.js file in the project with the downloaded file.

👻 Import echarts components and prepare containers

<template>
    <view class="card-body region">
      <view class="region-box">
       <! The canvasId on the container must be unique.
        <uni-ec-canvas
          id="mychart-map"
          ref="canvas"
          canvasId="mychart-map"
          :ec="ec"
        ></uni-ec-canvas>
      </view>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '.. /uni-ec-canvas/uni-ec-canvas.vue';
import * as echarts from '.. /uni-ec-canvas/echarts';

export default {
  name: 'MapCard'.components: {
    'uni-ec-canvas': uniEcCanvas,
  },
  data() {
    return {
      ec: {
        lazyLoad: true.// Define chart lazy loading here
        //onInit: initChart// this is the case without lazy loading}}; }},Copy the code

👻 Introduce map background

Echarts can create maps in two ways: one is to use an interface such as Baidu Map implementation, the other is to use geoJson implementation. The advantage of geoJson is that the map is clean, so we chose the second option.

...<script>··· export default {// Import map file (JSON file is usually very large, it is not suitable to put directly in the small program project, Friends don't learn I 🤣) / / map resources available on the http://datav.aliyun.com/tools/atlas/ import mapdata from '@ / assets/json / 100000 _full. Json'; ··· data() {return {ec: {lazyLoad: true,}, mapJson: mapData,// geoJSON resMapData:[], [], // Processed data that can be directly bound to echarts}; }, mounted(){this.getData()}, methods: {// Echarts option setOption(chart) {const option = {tooltip: {show: true, trigger: 'item', showContent: true, alwaysShowContent: true, backgroundColor: 'rgba(255,255,255,.9)', borderColor: 'transparent', textStyle: {color: '#202020', fontSize: '18',},}, series: [{layoutCenter: ['50%', '50%'], layoutSize: '100%', Type: 'map', Map: 'Statistical map', itemStyle: {borderWidth: '0.2', areaColor: 'RGB (244,244,244)',}, label: {show: false,}, select: {label: {show: false}, itemStyle: {borderWidth: '0.2', areaColor: 'RGB (244,244,244)',},}, Emphasis: {label: {show: false}, itemStyle: BorderWidth: '0.2', areaColor: 'RGB (244,244,244)',},}, data: this.regionData,},],}; // Mount Option chart.setoption (Option); }, initChart(canvas, width, height, canvasDpr) {const chart = echarts.init(canvas, null, {width: width, height: height, devicePixelRatio: canvasDpr, }); // registerMap echarts.registermap (' statistics map ', this.mapjson, {}); // Call the option binding method this.setoption (chart); // return chart; Uni. Request ({url: t'xxx, data: {v: 1,}, method: 'GET', success:(res)=> { this.resMapData = res.data this.cookData(); }, fail(res) {console.log(' file failed to get ', res); }}); }, // cookData() {const EMPTY = {name: null, value: null, loanCount: null, itemStyle: {areaColor: '#006cff' }, label: { show: false, }, select: { label: { show: false }, itemStyle: { areaColor: '#006cff', }, }, emphasis: { label: { show: false }, itemStyle: { areaColor: '#006cff', }, }, }; Parse (json.stringify (Array(this.resmapData.length).fill(EMPTY))); this.resMapData.forEach((item, index) => { this.regionData[index].name = item.region; this.regionData[index].value = item.loanAmount; this.regionData[index].loanCount = item.loanCount; }); this.$refs.canvas.init(this.initChart); }},}Copy the code

The final result is shown as follows:

👽 epilogue

This article only introduces the map implementation in uniAPP project, the rest of the framework and chart types are similar. New Echarts is really good, everyone go!! 🙊 🙊 🙊