微信小程序echart数据可视化应用

第一步：先去githup上面下载
地址

可以把刚下载下来的代码在微信开发者工具中跑起来
具体就不说了

项目下载下来之后吧ec-canvas拷贝到自己的目录尽量与pages同级

在pages的index下的index.js

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
	//这里的option可以去echarts官网里面的option一起使用
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, {
            value: 200,
            itemStyle: {
                color: '#a90000'
            }
        }, 150, 80, 70, 110, 130],
        type: 'bar'
  }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

在pages的index下的index.json

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas" //包的位置
  }
}

在pages的index下的index.wxml

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

在pages的index下的index.wxss

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

本人踩坑经验：
在wxss中还有假一行样式才能实现

ec-canvas {
  width: 100%;
  height: 100%;
}
.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;
} 

contarner和上面的wxml中的类名对应