微信小程序使用echarts画饼图、条形图

首先我们需要在GitHub，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。

抽出组件

1. 创建组件
   

2. 写好文件结构，json区域引入我们的ec-canvas组件

<script type="application/json">
  {
   
   
    "usingComponents": {
   
   
      "ec-canvas": "../../../ec-canvas/ec-canvas"
    }
  }
</script>

3.在页面上写一个容器给我们echart画图

4.对应的CSS如下

源码

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
   
   { ec }}"></ec-canvas>
  </view>
</template>
<script>
import {
   
    createComponent } from '@mpxjs/core'
import {
   
    createPage } from '@mpxjs/core'
import * as echarts from '../../../ec-canvas/echarts.js'

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 = {
   
   
    title: {
   
   
      text: '暂无数据',
      padding: [15, 100, 10, 10]
    }
  }

  chart.setOption(option)
  return chart
}
createComponent({
   
   
  data: {
   
   
    ec: {
   
   
      onInit: initChart