微信小程序 echarts统计图

体验示例小程序（本文只选择了折线图）

在微信中扫描下面的二维码即可体验 ECharts Demo：

WXecharts.jpeg

第一步 下载并引入

说到统计图，大家都会想到echarts等框架，但是echarts官网没有小程序的版本，不过已经有大佬在github发布echarts的小程序版本了。感谢大佬！！！

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
在项目中 ec-canvas 是大佬提供的组件，可以直接选择引入该组件到项目中
由于ec-canvas/echarts.js文件过大，项目中不需要各式各样的统计图。可以去Echarts官网选择在线定制去自由选择所需图表、坐标系、组件进行打包下载。

ec-canvas.png

第二步 小程序的折线图demo

1.首先是在pages文件夹下面新建index文件夹，里面对应的index.js、index.json、index.wxml、index.wxss

index.wxml

<view class="index">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

index.json

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

index.wxss

.index{
  width: 100%;
  height: 100vh;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

index.js

devicePixelRatio ==> 解决echarts统计图模糊问题

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

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 解决小程序视图模糊的问题，必写
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '折线图',
      left: 'left'   // 设置标题位置
    },
    legend: {
      data: ['A', 'B', 'C'],
      top: 0,  // 设置legend位置
      left: 'right',  // 设置legend位置
      backgroundColor: 'red',  // 设置legend背景颜色
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    // 包换多条折线图
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

最终效果图

echarts.png