关于微信小程序结合Echarts的一些问题

一.前言

       最近由于公司需要，去学习了一下微信小程序结合Echarts。作为一个Java后端工程师，其中的转型是很痛苦的，也不能说是转型把，只是去学习一个不是很完善的前端技术，而且遇到问题百度谷歌都没有解决方法，只能看着官方文档去研究，和同事研究讨论解决方法，非常之艰难。不过本人就是一个喜欢迎难而上的人，也就是头铁，越是碰到问题我越要把你搞清楚。于是乎把Echarts的官方文档研究了一遍，然后大致把微信小程序官方文档看了一遍，到最后发现那些花里胡哨的图表其实也就那回事，如果不深究Echarts的源码的话，要学会使用的话也没有想象中难。当然，你如果会在微信小程序上掌握Echarts的使用了，那你在web页面使用那就很简单了，可能是不够完善把，微信小程序很多功能都是不支持的，web上的很多技术都不能使用到小程序上。

       我会写一些学习微信小程序使用Echarts的一些博客，记录自己学习过程中遇到的问题和解决问题的过程。一是培养一下自己的写作水平，尽量去组织好语言让自己能将自己的想法表达出来，而不是心里有想法有思路真正要写出来组织出来就不行了；二是希望能给有需要的人提供一点帮助，都是一路学习过来的人，知道学习一个并不成熟完善的技术有多么辛苦，百度谷歌搜不到问题的解决方法有时候也很无奈。我会将自己的解决问题的思路和详细过程表述出来，后续有时间也会更新一些学习博客。

二.遇到的问题与分析

       如果你在微信小程序上使用过Echarts，你一定会发现微信小程序它不支持同步操作！而那些微信官方提供的Demo都是写死的数据。实际上呢？都是从网上加载数据过来的，这个时候需要一个同步操作，也就是需要从网上加载完数据之后再次渲染Echarts图表。Echarts默认是优先直接加载Echarts的，可能这个时候数据还没有加载到Data里面，这时候图表是不会渲染成功的。这个时候需要把chart和option拿出来作为全局变量，然后赋值后再设置一次option这时候option里面的data就有了数据，就能成功渲染。如下：

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

const app = getApp();
var XList = [];
var YList = [];
let chart = null;//拿出来作为全局变量
var option = {    //拿出来作为全局变量
    title: {
      text: '主标题',
      subtext: '副标题',
      x: 'center',
      align: 'right'
  }, 
  toolbox: {
    feature: {
      restore: {},
      //magicType: { type: ['line', 'bar'] },
    }
    }, 
  tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: 40,
    bottom: 75,
    show : true,
  },
    legend: {
      data: ['x'],
      x: 'left'
    },
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100
    }, {
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      handleSize: '90%',
      handleStyle: {
        color: '#fff',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      }
    }],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: { onZero: false },
        data: XList
      }
    ],
    yAxis: [
      {
        name: '单位',
        type: 'value',
      
      }
    ],
    series: [
      {
        label: {
          normal: {
            show: true
          }
        },
        name: 'x',
        type: 'line',
         // smooth:true,
        animation: false,
        areaStyle: {
          normal: {}
        },
        lineStyle: {
          normal: {
            width: 1
          }
        },
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' },
        //     { type: 'max', name: '平均值' }]
        // },

        data: YList
      }
    ]
  };

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option1=option;
  chart.setOption(option1);
  return chart;
}

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

  onLoad: function (options) {
    //页面一加载就发送请求
    wx.request({
      url: '这里填你请求数据的url',
      //回调函数成功了的话执行
      success: (res) => {
        console.log(res);
        for (var i in res.data) {
          
          XList.push("这里天获得的对应数据");
           YList.push(这里填获得的对应数据);  
        }
        setTimeout(function (){
         // console.log(XList);
          chart.setOption(option);  //赋值后再设置一次option
        },10);
        XList = [];
        YList = [];
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
});

 

三.总结

 

这也算一个从网上加载数据然后渲染的微信小程序结合Echarts的demo吧，如果需要换成其他的图，修改一下option就行了。下次把微信小程序上使用echarts不支持tooltip的解决办法分享给大家。

学习不成熟的技术还是要以官方文档为主，虽然看着吃力刚开始，但是却是学习这一门技术非常管用的方法。