The use of echart in WeChat applet

The use of echart in WeChat applet

echarts is not displayed in the WeChat applet

<!-- 微信小程序的echart的使用 -->
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
    
    { ec }}"></ec-canvas>
</view>

css style

ec-canvas {
    
    
    width: 100%;
    height: 100%;
  }
  .container {
    
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  } 

Detailed explanation of the grid attribute of echarts

grid configuration item: the distance between the icon and the container
show: whether to display the rectangular coordinate system grid ----------- Value: true? false
left: the distance between the chart and the left side of the container -------- ---------- Value: number? Percentage
top: The distance between the chart and the top of the container ----------------- Value: number? Percentage
right: The distance between the chart and the container Distance from the right --------------- Value: number? Percentage
bottom: Distance from the chart to the bottom of the container ------------ Value: number? Percentage
backgroundColor : grid background color -------------- value: rgba or #000000
borderColor: grid border color -------------- value: rgba or # 000000
borderWidth: grid border line width ------------- value: number
Remarks: background color - border - line width take effect prerequisite: set show:true, the margin is not affected by show

js

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

let chart = null;

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

  var option = {
    
    
    tooltip: {
    
    
        trigger: 'axis',
        axisPointer: {
    
    
          type: 'shadow'
        }
      },
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel:{
    
    
            fontSize:10
        },
      },
      yAxis: {
    
    
        type: 'value',
      },
      series: [
        {
    
    
          data: [-120, 200, 150, 80, -70, 110, 130],
          type: 'bar'
        }
      ]
  };

  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() {
    
    
    setTimeout(function () {
    
    
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});