微信小程序使用 echarts 图表

做小程序时使用到了一些图表比较直观的显示数据，也可以看到数据变化的趋势，我选择了 echarts

准备工作

先下载 ec-canvas，下载地址 下载之后将 ec-canvas 文件夹拖入项目的 components 文件夹

在使用 echarts 组件的页面的 json 文件引入

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

在 wxml 写入

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

在 wxss 给 container 一个宽高，随便给自行测试

在 js 文件使用时

首先引入

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

获取屏幕宽度，然后声明一个方法进行 px 和 rpx 的转换

var winWidth = wx.getSystemInfoSync().windowWidth;
function px2rpx(px) {
  return Number((px * winWidth / 750).toFixed(1));
}

声明一个 chart

let chart

在 data 写入

ec: {
  onInit: initChart
},

使用时在 page 以外直接声明 initChart 方法

function initChart(canvas, width, height) {
	[如果数据由接口获取可以在此处写接口，将下面的写在返回函数里]
	chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    var option = {
     //此处写配置项
    };
    chart.setOption(option);
    return chart;
  })
}

如果后面需要重新渲染直接使用以下方式即可

let option = {
 xAxis: {
    data: []
  },
  series: [{
    data: [],
  }]
}
chart.setOption(option)

举例

1. 将 ec-canvas 放入 components

2. 在使用的页面的 json 文件引入

3. 在 wxml 使用

4. 随便给个样式

5. 引入 echarts，获取屏幕宽，写 px2rpx 方法，声明 chart1，data 绑定图表，使用绑定的图表函数进行首次渲染

使用 px2rpx 的原因主要是 echarts 图表内部的字体只能使用数字型，不能带有 px 或 rpx，默认单位是 px，所以改变图表字体或者距离时就可以使用 px2rpx 方法，我这里配置项太长隐藏了

6. 重新获取数据使图表重新渲染

重新声明配置项，然后用 setOption 更新就好了，我这里是只更改 x 和 y 的值，所以就添加了两项

后面会加入一些 echarts 常用的配置项说明，持续更新

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀