timg.jpg

先看效果圖

image.png

下載 GitHub 上的 ecomfe/echarts-for-weixin 項(xiàng)目

1.首先在app.json中新建一個(gè)頁面("pages/echarts/echarts")

image.png

2.將下載好的echarts-for-weixin-master進(jìn)行解壓后找到ec-canvas該文件夾，將該文件夾粘貼到項(xiàng)目中

image.png

{
  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "統(tǒng)計(jì)圖"
}

4.echarts.wxml

<view class="content-echarts">
    <ec-canvas id="mychart-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
  </view>

5.echarts.js

// pages/echarts/echarts.js
import * as echarts from '../../ec-canvas/echarts'
function initChart(canvas,width,height){
  const chart = echarts.init(canvas,null,{
    width:width,
    height:height
  })
  canvas.setChart(chart)
  var option = {
    color: ['#FFCC00'],
    title: {
      text: '本周銷量統(tǒng)計(jì)圖'
    },
    tooltip: {},
    legend: {
      data: ['銷量']
    },
    xAxis: {
      data: ["周一", "周二", "周三", "周四", "周五", "周六",'周日']
    },
    yAxis: {},
    series: [{
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 13, 20,38]
    }]
  };
  chart.setOption(option)
  return chart
}
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
   ec:{onInit:initChart}
  },
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '在微信中使用echarts',
      path: 'pages/echarts/echarts',
      success: function (res) { },
      fail: function () { }
    }
  }
})

6.echarts.wxss

/* pages/echarts/echarts.wxss */
.content-echarts{
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
ec-canvas{
  width:100%;
  height: 600rpx;
  background: #fff;
}