微信小程序+echarts-for-weixin 图表

echarts-for-weixin下载

这个是echarts官方提供的小程序版本，使用方法与web端相似，只需要使用option即可。

 

 
 

使用方法

下载echarts-for-weixin项目

echarts-for-weixin下载
 

导入echarts-for-weixin包

  下载的echarts-for-weixin项目目录，这是一个写好的微信小程序项目，可以直接导入到微信小程序编译器中查询所有的图表效果。

  使用echarts-for-weixin只需要将项目目录中的ec-canvas加入到你的项目中即可以使用echarts的图表效果。
  需要注意的是ec-canvas文件比较大，需要注意导入后超过微信小程序限制的一个包不超过2M的要求，可以分包处理，但是分包会导致js无法在其它包使用。

 
 

引入图表生成js

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

使用图表组件

 

引入自定义echarts组件

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

 
 

创建echarts组件

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

 
 

初始化图表

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

 
 

使用echarts在页面生成多张图表

 

wxml

<view style="width:400px;height:400px;position: absolute;left: 999999px;">
  <ec-canvas id="mychart-people" canvas-id="mychart-people" ec="{{ people }}"></ec-canvas>
</view>

<view style="width:400px;height:400px;position: absolute;left: 9999999px;">
  <ec-canvas id="mychart-machine" canvas-id="mychart-machine" ec="{{ machine }}"></ec-canvas>
</view>

<view style="width:400px;height:400px;position: absolute;left: 99999px;">
  <ec-canvas id="mychart-thing" canvas-id="mychart-thing" ec="{{ thing }}"></ec-canvas>
</view>

 
 

javascript

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

var chart1 = null; //人力与管理
var chart2 = null; //设备与设施
var chart3 = null; //物料与材料

Page({

  /**
   * 页面的初始数据
   */
  data: {
    people: {
      onInit: function (canvas, width, height, dpr) {
        chart1 = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart1);
        return chart1;
      }
    },
    machine: {
      onInit: function (canvas, width, height, dpr) {
        chart2 = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart2);
        return chart2;
      }
    },
    thing: {
      onInit: function (canvas, width, height, dpr) {
        chart3 = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chart3);
        return chart3;
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    rid = options.rid;
    wx.getStorage({
      key: 'token',
      success(res) {
        var token = res.data;
        wx.request({
          url: api.troubleshootScore,
          method: 'POST',
          header: {
            token: token
          },
          data: {
            RID: rid,
          },
          success(res) {
            if (res.data.status == 'success') {
              console.log(res);
              that.setData({
                hazardNo: res.data.not,
                hazardYes: res.data.data,
                url: res.data.report_url
              })
              that.produce1(res.data.score);
            } else {
              console.log(res);
              wx.showToast({
                title: '服务器错误',
                icon: 'error',
                duration: 3000
              })
            }
          },
          fail(res) {
            wx.showToast({
              title: '网络错误',
              icon: 'error',
              duration: 3000
            })
          }
        })
      },
      fail(res) {
        wx.showToast({
          title: 'token错误',
          icon: 'error',
          duration: 3000
        })
        return;
      }
    })

  },

  produce1(res) {
    var that = this;
    for (var i = 1; i < 6; i++) {
      d = res[that.data.listName[i]];
      name = that.data.listName[i];
      max = that.data.listMax[i];
      if (i == 1) {
        chart1.setOption({
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3"],
          series: [{
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 30,
                shadowBlur: 0,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [{
              value: d,
              name: name,
            }],
            min: 0,
            max: max

          }]
        })
      } else if (i == 2) {
        chart2.setOption({
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3"],
          series: [{
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 30,
                shadowBlur: 0,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [{
              value: d,
              name: name,
            }],
            min: 0,
            max: max

          }]
        })
      } else if (i == 3) {
        chart3.setOption({
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3"],
          series: [{
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%'
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 30,
                shadowBlur: 0,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [{
              value: d,
              name: name,
            }],
            min: 0,
            max: max

          }]
        })
      }
    }
  },
})

 
 

总结

  实际就是对每一个ec-canvas组件都绑定一个data数据，对每一个数据都绑定不同的内容，这样就可以生成多个不同的图表。

 
 
 
 

生成图表图片

  因为微信小程序的canvas有很多的限制（如，canvas一定是界面的最顶层，这样的会导致需要样式无法使用），所以可以将图表生成图片，这样就可以完成许多样式。

const ecComponent = this.selectComponent('#mychart-' + that.data.listMenu[i]); //获取echarts组件
      setTimeout(function () {
        ecComponent.canvasToTempFilePath({
          //安卓机型此处不会成功回调
          success: res => {
            that.setData({
              img: res.tempFilePath,
            })
            var listImg = that.data.listImg;
            listImg.push({
              img: res.tempFilePath
            });
            that.setData({
              listImg: listImg
            })
            console.log(listImg);
          },
          fail: res => console.log('失败', res)
        });
      }, 1000)

  生成图片需要设置延时，需要等待图表生成完毕；但是这样还是会出现一些无法生成的情况，目前我暂时未发现解决办法。（若发现了解决办法欢迎交流）