微信小程序中的ECharts动态加载

        因为个人工作需要，本人需要在微信小程序中插入图表，基于种种原因选择使用ECharts完成此功能。同时因为小程序中的图表需要根据后端传递数据进行动态加载或修正，或者在页面交互过程中发生变化，而若直接在开始便直接写定，则无法发生变化，或在重新加载选定元素时出现问题，因此本人采用了如下方式完成了个人需求，感兴趣的可以参考一下。

 1、获取像素比

        为了保证在微信小程序ECharts中图标可以以正常像素显示，则首先获取像素比，用以在后续的ECharts的配置项中进行相关配置

//获取像素比
const getPixelRatio = () => {
    let pixelRatio = 0
    wx.getSystemInfo({
        success: function (res) {
            pixelRatio = res.pixelRatio
        },
        fail: function () {
            pixelRatio = 0
        }
    })
    return pixelRatio
}
var dpr = getPixelRatio()

 2、配置图表配置信息

完成获取像素比的操作后，则完成Echart图表的其余配置项

// 绘图的各种配置
const option = {
    title: {
      text: '',
      left: 'center',   
      textStyle: {
        fontSize: 15
      },
    subtext:'市值增长',
      subtextStyle: {
        fontSize: 20
      }
    },
    // 图标标签
    legend: {
      data: ['市值增长', '价值增长'],
      top: 30,
      backgroundColor: 'white',
 
    },
//图表网格形式和位置
    grid: {
      containLabel: true,
      x: '5%', y: '25%', x2: '5%', y2: '5%',
    },
// 点击图表时显示的提示信息
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {},
      textStyle:{
        textShadowBlur: 10, // 去掉文字阴影
        textShadowColor: "transparent" // 去掉文字阴影
      },
    },
// 数据图表缩放形式
    dataZoom: {
        type:"inside"
    },
// x轴的样式
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLabel:{
        rotate: -90, // 角度值：Number
        fontSize: 11, // 顺便调小一点字体大小
        interval: 9000, //度标签的显示间隔 前一个标签和下一个标签的间隔
        showMaxLabel: true, //是否显示最大值
        alignMinLabel:'left',
        alignMaxLabel:'right'
    },   
      data: [],// x轴对应的标签，可以提前传入也可以后续再配置，当前是后续动态修改
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
// 实际传入的数据序列，两个图系列的值均由后续传入
    series: [{
      name: '价值增长',
      type: 'line',
      connectNulls:true,
      smooth: true,
      symbol:'none',
      data: [] 
    }, {
      name: '市值增长',
      type: 'line',
      smooth: true,
      symbol:'none',
      data: []
    }]
  };

3、初始化图表函数

function initChart(el) {
    el.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr //前文加载的像素比
        });
        Chart.setOption(option); // 前文配置的配置项
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });
}

前三步均在js的page外完成相关配置或编写 

 4、前端配置ECharts信息

（1）、wxml的配置

ec需要与后续data中配置的图表数据名称对应

  <view class="container" wx:if="{{ec}}">
                <ec-canvas id="mychart-dom-line" isUseNewCanvas="{{true}}" canvas-id="mychart-mkt-line" ec="{{ ec }}"></ec-canvas>
  </view>

（2）、wxss的配置

父元素宽高均需指定，然后图表元素最好顶满

/* 绘图部分 */

.container {
    text-align: center;
    width: 705rpx;
    height: 700rpx;
    position: relative;
    overflow: hidden;
    border-radius: 10rpx;
    background-color: #fff;
}

ec-canvas {
    width: 100%;
    height: 100%;
}

 5、js的page的相关操作

（1）、data中配置图表数据名称

  // 绘图数据
    ec: {
        lazyLoad:true
      },

（2）、完成option未完成部分的配置

此处完成的option配置的相关数据自行传递加载即可

//前文option中未完成配置
 option.xAxis.data = xAxis // 列表
 option.series[0].data=MKTSeries
 option.series[1].data=IVSeries
 option.title.text = this.data.name

（3）、动态加载图表

 this.emotionsEcharts = this.selectComponent('#mychart-dom-line'); // 此处名称必须与前文的wxml中的id对应
        
 let ec = { onInit: initChart(this.emotionsEcharts) }; // 调用前文完成的加载函数
  this.setData({
          ec
       });