微信小程序如何使用ecahrt 使用ecahrt踩坑收录

一、引入ecahrt图表组件

已经有大牛把ecahrt图表组件做了出来,地址：git地址 把文件下载到本地，取出ec-canvas这个文件夹，放到你的小程序分包里然后在页面在json里按地址引入wxml：

<view class="echart"  >
  <ec-canvas    ec="{{ ecLine }}"></ec-canvas>
</view>

用父元素套住ec-canvs，给定图表宽高就好

js：
引入echarts图表

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

创建一个函数，用来动态的更改ecahrt图表数据

function getOption(xData) {
 var option = {  
   
    series: [{
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [25, 90],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 2,
        borderColor: '#fff',
        borderWidth: 2
        },
        label:{
          fontSize:12,
        },
        labelLine: {
          show: true,
          length: 5,
          length2: 5
        },
        data:xData,
      }
    ]
  };
  return option;
}

获取图表的像素比，这点很重要，要不然图表很糊

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

然后把像素值取出来
定义一个变量，用于把图表绑定到data上

var dpr = getPixelRatio()
let chartLine;

在data里绑定好echart，用于图表初始化

ecLine: {
      onInit: function (canvas, width, height){
          //初始化echarts元素，绑定到全局变量，方便更改数据
          chartLine = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio:dpr
          });
          canvas.setChart(chartLine);
      }
  }

在给图表写入数据图表就生成啦

let XDate=[1,2,3,4]
 var option = getOption(XDate);
      chartLine.setOption(option);

踩得坑：

1.第一次生成图表的时候，图表不显示，再次点击才会出现图表
答：这是因为图表组件还没有加载完成，就开始往里面塞数据，导致图表没有数据，自然是空的，第二次点击的时候图表已经加载好了，图表自然会显示出来了。
解决办法：在塞数据的时候给一个定时器，等图表组件加载一会就可以了

 setTimeout(()=>{
     var option =getOption(this.data.nutritionList);
    chartLine.setOption(option);
        },500)

2.第二次点击，替换图表数据的时候图表视图还会保存之前的数据
答 ：setOption( )更新图表数据的时候还有一个参数，第二参数为true时，表示不合并。为false时，表示合并，不设置默认为false
解决办法： 第二个参数设置为true就行

  setTimeout(()=>{
          var option = getOption(this.data.nutritionList);
        chartLine.setOption(option,true);
        },100)

3.图表悬浮在页面之上
答：遇到这种情况建议先真机调试一下，有的时候编译器上有bug，真机不会。然后打开调试器，挨个往他的所有父元素上找看有没有定位，或者设置了百分比的宽高，去掉试一试。