小程序使用echarts-条形统计图

timg.jpg

先看效果图

image.png

下载 GitHub 上的 ecomfe/echarts-for-weixin 项目

1.首先在app.json中新建一个页面("pages/echarts/echarts")

image.png

2.将下载好的echarts-for-weixin-master进行解压后找到ec-canvas该文件夹，将该文件夹粘贴到项目中

image.png
3.在echarts.json中进行配置

{
  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "统计图"
}

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: '本周销量统计图'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ["周一", "周二", "周三", "周四", "周五", "周六",'周日']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 13, 20,38]
    }]
  };
  chart.setOption(option)
  return chart
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
   ec:{onInit:initChart}
  },
  /**
   * 用户点击右上角分享
   */
  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;
}