微信小程序Echarts 图表组件使用整理

原创
2020/12/19 15:33
阅读数 2.2K

一、 微信小程序中 Echarts 组件使用

组件源码下载地址:

https://github.com/ecomfe/echarts-for-weixin

 

二、使用步骤

第一步下载 echarts ,把 ec-echart插件添加到项目中

app.css 中修改和处理 ec-charts的样式设置

/**app.wxss**/
.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;
} 

ec-canvas {
  width: 100%;
  height: 100%;
}

 

第二步,引用 ec-echarts 组件

json文件中

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

wxml中

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

第三步,获取数据并初始化显示组件

import * as echarts from '../../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 = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  };
  chart.setOption(option);
  return chart;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    }
  },
})

 

显示效果:

 

更多:

 微信小程序 wx.getSystemInfo 返回的platform的值有哪些?

 微信小程序分享朋友圈功能上线

 iphone虚拟键小黑条布局处理_安全区域(Safe Area)在微信小程序和H5的屏幕适配

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部