微信小程序绘制echarts图标

一、使用官方的demo

GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

直接在微信开发者工具中运行。

 

二、手动书写

1.引入官方js文件夹

2.json文件中引入

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

 3.wxml和wxss中

<view class="contain">
  <ec-canvas id="canvas" canvas-id="chart1" ec="{{ec}}"></ec-canvas>
</view>

.contain {
  width: 750rpx;
  height: 500rpx;

}

ec-canvas {
  width: 600rpx;
  height: 100%;
  margin: 0 auto;
  display: block;
  border: 1px solid red;
}

特别注意：

• 单独嵌套不会出现图标脱离文档流，给ec-canvas加上display：block也不会脱离文档。
• wxml中ec是固定写法，不需要纠结（具体是啥我也没有研究）

4.js

这也是最重要的一环，下面进行逐步使用

第一步：引入echarts，并定义chart实例

import * as echarts from "../../ec-canvas/echarts"
let chart = null

第二步：data中声明ec

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

注意：ec为一个对象，且含有onInit初始化方法，如果进行延迟（手动）加载图标可以观看官方demo

第三步：定义initChart方法

function initChart(canvas, width, height, dpr) {

  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })

  chart.setOption(getChartOption())
  return chart
}

这里的使用方法和正常h5基本相似，只是获取元素的方式不同，

特别注意：方法最后一定要返回chart实例

第四步：定义getChartOption方法

function getChartOption() {
  return {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }]
  };
}

这一步就是简单的return一个配置项option，可以去echarts官网进行寻找Examples - Apache ECharts

最后一步就是刷新页面了。

感谢您的观看，祝您学习愉快！！！！！