Use echarts in the applet (hard goods, the most detailed tutorial in the whole network!)

echarts is a JS-based data visualization icon library, which provides intuitive, vivid, interactive, and customizable data visualization charts. It is generally used in vue, and the official website also explains in detail how to use it in vue, but what I want to discuss today is how to use echarts in WeChat applets :

It is introduced on the official website: The echarts-for-weixin  project provides a small program component, in this way you can use ECharts conveniently.

You can click the link above to download the project ec-canvas circled in the picture from the address specified on the official website

 Then download this project to your computer, but there is a very important point here, which determines whether your chart can be displayed. In the position circled in the picture below, you must pay attention to which version you are downloading, because echarts The .js is very large. If it is used normally, it can be customized directly on the official website . There will not be many echarts charts in the applet, otherwise the whole project will be too big and will not run.

 Customize the graphics you need: The next step is to find the official website and customize the graphics you need (I don’t need to talk about the official website address, Baidu can also find it).

Click download to enter the customization page: turn to the bottom, method three: online customization

 

Choose what you need on this page, pay attention! Notice! Notice! , the selected version here must correspond to the version of echarts.js in the ec-canvas downloaded above , it must! must! must! I suffered from this loss at the beginning, errrrr~, after the selection is completed, turn to the bottom and click the download button .

 Then you will open another window to download a file, just wait at this time. Wait until OK, indicating that the download is complete

 Find the file you downloaded: echarts.min.js

The preparations are all done! ! ! The next thing is the point

 Then start to implant it into your applet. You can create a new component by yourself, put the echarts directory in it, delete the echarts.js in the original directory, it is too big, replace it with the echarts.min.js downloaded in the previous step , and pay attention to ec-canvas The import of .js imports the original echarts.js file, you need to change it to the file you just downloaded

 Then start the operation in the file you need to import echarts, take my file as an example, I want to import the echarts chart in the fb directory

js file: import imports the file just downloaded, see where you put it, and find the location by yourself

import * as echarts from "../../../../../components/echarts/echarts.min"
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: 'rgba(255,255,255,0.8)',
    tooltip: {
      trigger: 'item'
    },
    legend: {//显示图例
      show: true,
      top: '5%',
      left: 'center'
    },
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      
      type: 'pie',
      center: ['50%', '60%'],//位置
      radius: ['20%', '30%'],//圈大小
      
      data: [{//每一项
        value: 3,
        name: '数字农业 3个'
      }, {
        value: 2,
        name: '体育产业 2个'
      }, {
        value: 7,
        name: '乡村新业态 7个'
      }, {
        value: 3,
        name: '其他产业 3个'
      }
    ]
    }]
  };
  chart.setOption(option);

  return chart;
}

Write in data:

data: {
    ec: {
      onInit: initChart
    },
  },

All operations are in the option , if you need other settings, you can find an example in echarts such as the following: all operations of the pie chart are also in the option, open the document ==> configuration item manual, find you in it what method is needed

 

JSON file: Here you can clearly see that the ec-canvas.js  in the directory is imported

{
  "component": true,
  "usingComponents": {
    "ec-canvas":"../../../../../components/echarts/ec-canvas"
  }
}

 WXML file: The ec here is the component object, corresponding to the ec of the data in the js file

<view class="ec-container">
     <ec-canvas canvas-id="echart-pie" ec="{
   
   {ec}}"></ec-canvas>
</view>

wxss file:

.ec-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 30vh;
  }
  
  ec-canvas {
    width: 100%;
    height: 100%;
  }

that's it:

If it still hasn't come out, then follow what I said above to see if there is something missing or something, this should be the most detailed on the whole network! ! !