微信小程序开发使用Echarts可视化图表并渲染数据

1.第一步：

在要使用echarts图表的页面的json配置文件中引入使用echarts

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

2. 第二步：

在页面的js文件中引入echarts

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

3. 第三步：

定义一个全局变量：

var chart1;

4. 第四步：初始化echarts图表

在data对象中声明ec1初始化图表

data{
	ec1: {
      onInit: function (canvas, width, height) {
        chart1 = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart1);
        chart1.setOption(getOption());
        that.loadData();
        return chart1;
      }
    }
}

5. 获取数据并渲染

请求接口获取数据

loadData: function () {
    var that = this;
    //加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    app.request(
      '接口url', {
        id: that.options.id,
        beginTime: that.data.starDate == "开始时间" ? "" : that.data.starDate + " 00:00:00",
        endTime: that.data.endDate == "结束时间" ? "" : that.data.endDate + " 23:59:59"
      },
      (res) => {
        wx.hideLoading();
        if (res.statusCode == 200) {
          if (res.data.length <= 0) {
            that.setData({
              dataIsNull: true
            })
            return;
          }
          that.setData({
            dataIsNull: false
          })
          // 请求来的数据
          var createTime = [],
            voltageDeviation = [],
            frequencyDeviation = [],
            unblance = [],
            loadRate = [],
            powerFactor = [],
            health = []
          var array = res.data;
          array.forEach(element => {
            var time = element.createTime.slice(5, 10);
            createTime.push(time);
            // 电压偏差
            voltageDeviation.push(element.voltageDeviation);
            // 频率偏差
            frequencyDeviation.push(element.frequencyDeviation);
            // 负载率
            loadRate.push(element.loadRate);
            // 功率因数
            powerFactor.push(element.powerFactor);
            // 三项不平衡
            unblance.push(element.unblance);
            // 评分
            health.push(element.health);
          });
          var TimeValue = createTime.length;
          // 将以上获取到的数据通过echarts内置方法‘setOption({})’渲染到图表上
          chart1.setOption({
            xAxis: {
              // X轴相关数据
              data: createTime
            },
            dataZoom: [{
              startValue: TimeValue - 7,
              endValue: TimeValue - 1,
            }],
            // 折线相关数据
            series: [{
                data: voltageDeviation
              },
              {
                data: frequencyDeviation
              },
              {
                data: loadRate
              },
              {
                data: powerFactor
              },
              {
                data: unblance
              },
              {
                data: health
              }
            ]
          })
        }
      },
      () => {
        wx.hideLoading();
        wx.showToast({
          icon: 'none',
          duration: 1500,
          title: '调用接口失败, 请稍后再试',
        })
      }
    )
  }

6. 图表配置相关：

function getOption() {
  return {
    color: ['#c7f796', '#ffb214', '#fb7d1b', '#8c72fa', '#3f77e9', '#444547'],
    // 图表位置相关配置
    grid: {
      top: '5%',
      left: '1%',
      right: '3%',
      bottom: '40%',
      containLabel: true
    },
    // 提示组件相关配置
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(194, 211, 255, 0.3)'
        }
      },
      formatter: '{b}\n{a0}: {c0}\n{a1}: {c1}\n{a2}: {c2}\n{a3}: {c3}\n{a4}: {c4}\n{a5}: {c5}'
      // formatter: '{b}\n{a}: {c}'
    },
    legend: {
      x: 'center',
      bottom: 0,
      padding: [8, 45],
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      backgroundColor: '#e6eefe',
      icon: 'circle',
      textStyle: {
        color: '#777',
        fontSize: 12,
      },
      data: ['电压偏差', '频率偏差', '负载率', '功率因数', '三项不平衡', '评分']
    },
    // 图表 X轴配置
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: 'rgba(209, 230, 249, 0.7)'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ccc',
          fontSize: 12
        }
      },
      // 渲染数据是要把图表配置data中的数据清空
      data: []
    },
    // 图表Y周配置
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#ccc',
          fontSize: 12
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: ['rgba(22, 126, 226, 0.2)'],
          width: 0.8
        }
      }
    },
    // 滚动条
    dataZoom: [{
      type: 'slider',
      startValue: 4,
      endValue: 6,
      bottom: '26%',
      top: '62%',
      right: 15,
      left: 10
    }],
    // 图表折线配置，注意：以免出现BUG在渲染数据时要把data中的数据清空
    series: [{
        name: '电压偏差',
        type: 'bar',
        // 设置柱子之间的间距
        barGap: 0.5,
        data: []
      },
      {
        name: '频率偏差',
        type: 'bar',
        barGap: 0.5,
        data: []
      },
      {
        name: '负载率',
        type: 'bar',
        data: []
      },
      {
        name: '功率因数',
        type: 'bar',
        data: []
      },
      {
        name: '三项不平衡',
        type: 'bar',
        data: []
      },
      {
        name: '评分',
        type: 'line',
        showSymbol: false,
        lineStyle: {
          width: 1
        },
        data: []
      }
    ]
  }
}

7. 在页面种使用

将定义好的echarts图表引入到页面中即可

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

注意：ec-week要设置宽高

下载地址可以去官网 ==>：官网地址
小程序使用echarts所需文件我已整理好 ==>：下载地址