当前位置：首页 > 知识普及 > 正文内容

微信小程序图表开发（eCharts）

admin4天前知识普及7

微信小程序图表开发（eCharts）

一、说明

本篇文章主要记录微信小程序开发过程中对图表的使用。这里主要说明的使用，最后也会讲一下的使用。至于两者的区别，更强大，但是体积更大，导进来有500K以上了，即便导入自定义的组件，也很大；而虽然没有那么强大，但是体积比较小小程序图表组件 utils，特别是轻量版只有30K多一点，非常适用于对大小要求比较高的小程序。

1. 使用（1）下载

这里下载的是别人在小程序上面做过适配的版本。下载地址

（2）把导入小程序

把下载好的-for--压缩包解压微信小程序图表开发（eCharts），然后把里面的ec-文件夹全部文件直接复制到小程序当中，我这里复制到了utils目录下。

（3）进行相关配置和开发

首先，要在页面中引用相关模块，这里新建了一个名为的页面，.json的相关代码：

{
  "navigationBarTitleText": "饼状图实现",
  "usingComponents": {
    "ec-canvas": "../../utils/ec-canvas/ec-canvas"
  }
}

下面为.wxml的代码

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

一定要注意好控件的样式，因为长宽设置不好可能会导致图表无法显示，而且，一定要注意rpx和px的却别微信小程序图表开发（eCharts），特别是使用的时候，不然在不同手机上面格式会很乱。下面为.wxss的代码：

/* pages/echarts/echarts.wxss */
ec-canvas {
  width: 100%;
  height: 300px;
}
.econtainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  box-sizing: border-box;
}

以下为.js文件的代码：

// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '饼状图',
      subtext: '纯属虚构',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
      {
        name: '项目：',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        label: {
          show: true,
          formatter: '{b}({d}%)'
        }, 
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initPie
    }
  },
  onReady() {
  }
});

以下为运行截图，在电脑上面调试运行，有些显示不全：

（4）注意事项

如果按照上面的步骤来，直接把上面的代码对应复制过去应该就可以运行了。

这个时候我们会有一个疑问，如果换成其它图表怎么办？我们对.js文件进行梳理发现，其实这里我们除了整个框架不变，把方法里面的换成其它图表就行，但是有个地方小程序图表组件 utils，注意一下，就是前面的var定义不要去掉，不然无法显示图表。下面为.js的框架：

import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {

      onInit: initPie
    }
  },
  onReady() {
  }
});

为什么说强大，不仅是因为更加美观，而且，我们可以直接把上面的实例代码（注意一定要是代码的图表，其它的应该要自己去适配）复制到.js的方法的里面，里面一些比较简单的图表都可以直接复制过来用，然后把数据改成自己想要的数据就行。

还有一个问题就是，怎么在同一个页面中加载两个或以上图表？

只需要在.wxml文件加上一个标签：


<view class="econtainer">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">ec-canvas>
view>
<view class="econtainer">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ cl }}">ec-canvas>
view>

然后再在.js中再添加一个方法，然后再在page的data里面进行初始化，以下为加上两个图表的.js的完整代码：

// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '饼状图',
      subtext: '纯属虚构',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
      {
        name: '项目：',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        label: {
          show: true,
          formatter: '{b}({d}%)'
        }, 
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
  return chart;
}
function initClomn(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '柱形图'
    },
    color: ["#ff9966"],
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initPie
    },
    cl: {
      onInit: initClomn
    }
  },
  onReady() {
  }
});

截图：

首先下载，然后把.js文件复制到utils文件夹下面。

因为代码比较好理解，就是定义一个标签，然后在js文件中根据数据把图表绘画出来小程序图表组件 utils，所以直接上代码了。

.wxml文件代码：

<view class="mycontainer">
  <canvas canvas-id="feiyu1" class="canvas">canvas>
view>
<view class="mycontainer">
  <canvas canvas-id="feiyu2" class="canvas">canvas>
view>
<view class="mycontainer">
  <canvas canvas-id="feiyu3" class="canvas">canvas>
view>

.wxss文件代码：

.canvas {
  width: 750rpx;
  height: 500rpx;
}
.mycontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  box-sizing: border-box;
}

最后是.js文件的代码，有三个图表：

//wxcharts.js
const util = require('../../utils/util.js');
var wxCharts = require('../../utils/wxcharts-min.js');
Page({
  data: {
  },
  onReady: function (e) {
    var windowWidth = 320;
    var windowHeight = 150;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
      windowHeight = res.windowHeight;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    new wxCharts({
      animation: true, //是否有动画
      canvasId: 'feiyu1',
      type: 'pie',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }],
      width: windowWidth,
      height: 200,
      dataLabel: true,
    });
    new wxCharts({
      animation:true,
      canvasId: 'feiyu2',
      type: 'line',
      categories: ['2015', '2016', '2017', '2018', '2019', '2020'],
      series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0
      },
      width: windowWidth,
      height: 200
    });
    new wxCharts({
      canvasId: 'feiyu3',
      type: 'column',
      animation: true,
      categories: ['2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '订单量',
        color: '#188df0',
        data: [23, 28, 35, 54, 95],
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        },
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration'
      },
      extra: {
        column: {
          width: 15,
        },
        legendTextColor: '#000000'
      },
      width: windowWidth,
      height: 200,
    });
  
  }
});