This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Chart used by Echart

1. Cloning:git clone https://gitee.com/hhhero/echarts-for-weixin.git

2, copy,ec-canvasFolder into the small program, generally put pages directory at the same level, see the project directory design



3. What you see at this point is notecharts.min.js“, but in fullecharts.jsAt this timeCustom EchartsYou can get the chart you need by selecting code compression download under other optionsecharts.min.js.



4, modify,ec-canvas.jsImport file name

import *as echarts from './echarts.min';

5, small program page used

Json file "usingComponents": {"ec-canvas": ".. /.. /ec-canvas/ec-canvas" }Copy the code
//. WXML file <ec-canvas style="height: 500rpx; width: 100%;" id="mychart-first" canvas-id="mychart-first" ec="{{ ecEchart }}"></ec-canvas>Copy the code
//.js file let options = {barOption: {// configuration item //... }} let myChart = {chartOne: null } function init({canvas, width, height, dpr, optionKey}) { let chart = echarts.init(canvas, null, { width: Width, height: height, devicePixelRatio: DPR // pixel}); chart.showLoading(); // First display loading animation canvas.setchart (chart); let option = options[optionKey] chart.setOption(option); chart.hideLoading(); // Hide the loading animation return chart; } function initOneChart(canvas, width, height, dpr) { myChart.chartOne = init({canvas,width,height,dpr,optionKey: 'barOption'}); return myChart.chartOne; } Page({ data:{ ecEchart: { onInit: initOneChart } }, onReady() { this.getEcharts() }, getEcharts() { let setOne = { xAxis: { data: [] // Asynchronous request returns data, such as ['2021-08-01','2021-08-02',...] }, series: [{name: 'income analysis, data: [] / / asynchronous request return data, such as [12 behavior,...]}]} myChart. ChartOne. SetOption (setOne); }})Copy the code

Finish, as shown below:

The problem

  • Problem 1: When the page scrolls, the chart seems to be addedposition: fixed;Same, do not follow the parent scroll.

    Cause: Hanging on a parent of a diagram element, the following styles exist, causing
height:100vh;
overflow-y:auto;
overflow-x:hidden;
Copy the code



Solution: put the styleheight:100vh;Get rid of.

  • Problem 2: In the horizontal screen of the mobile phone, the chart cannot be redrawn, resulting in ambiguity, etc., as shown in the following figure, the X-axis coordinates in Figure 2 show some distortion.

    Figure 1: – : :



    : – : figure 2:



    Solution:

    Step 1: add the.json file"pageOrientation":"auto",Allow landscape;

    Step 2: add.js fileonResize(res){}Monitor the horizontal screen changes of mobile phones for corresponding processing;

    The third step: after the above two steps, think directchart.resize()Is that enough? Small program is not so friendly!! The pit appeared.

    Also need to work with the following steps: redraw needsWx.nexttick (() => {}) // The view is updated so that chart is not undefined, view,wx:if 和 chart.setOption(options);

    Note: The view passeswx:ifControl assembly, fitsetOption(options)In order to achieve (landscape) redraw, there is no other method found.



    :-: Portrait effect:



    :-: Landscape effect:

Other information

Making: github.com/wwmingly/ec…