个人技术总结 —— 在小程序中使用ECharts

技术概述

• 介绍：Echarts技术是用来可视化数据的，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
• 用到的情况：在需要数据分析和展示时可以使用该技术来给人更好的体验。
• 学习该技术的原因：团队项目中使用小程序进行开发，账单数据需要可视化分析展示给用户。
• 难点：ECahrts本身是纯JS的技术，微信小程序也不支持DOM操作，Canvas接口也和浏览器的不同，所以想在小程序中用图表可视化数据的话要学习如何在小程序中使用，也比Web端引用JS文件来的困难。

技术详述

如下是实现流程图

• 首先，通过下载ECharts团队和微信小程序官方团队合作开发的ECharts的微信小程序版本，导入项目的components目录中，为有使用到该组件的页面配置组件路径。引用这步很关键，成功与否直接决定了接下去使用组件是能否成功的问题。

{
  "usingComponents": {
    "ec-canvas":"../../components/hb/ec-canvas/ec-canvas",  //写组件目录中所放的位置
  }
}

• 在WXML文件中使用ec-canvas来引用该组件，并在WXSS文件设置好图标的位置，大小等等样式。代码如下。其中class就是在WXSS文件中为其设置的样式。

<ec-canvas class="datatable" id="mychart-dom" canvas-id="mychart" ec="{{ec}}"></ec-canvas>

• 在js文件中，为设置图标内容，就是上方代码中的ec，初始化ec的内容。接下来自定义可视化图表。
• 在series中的type设置选择什么类型图标，通过以下xAxis和yAxis设置一下x，y轴样式，以及背景可以设置渐变色，曲线粗细、颜色、平滑度、每个数据点的样式、tip小弹窗的样式信息，以及
  边框区域等等。都可以进行自定义设置。以下代码省略了实际设置的值。

设置option的值
{
    tooltip: { //点击tip弹窗样式更改
      trigger: \'axis\',
      backgroundColor:
      color: 
      borderWidth:  //边框宽度设置1
      borderColor: //设置边框颜色
      textStyle: {
        color:  //设置文字颜色
      },
      formatter: function (params) {        //设置弹窗内容
        return tip;
      }
    },
    grid: {     //设置边框
    },
    xAxis: {       //设置x轴样式 
    },
    yAxis: {        //设置y轴样式
    },
    series: [{
      itemStyle: {
    
      },
      areaStyle: {//设置背景样式
      },
      data: //!!!!!!最关键的图表设置
      type: \'line\',        //选择图标类型，折线或者柱状或者饼状等等
      smooth: true          //设置曲线平滑
    }],
    ],
  }

• 通过云函数调用异步获取数据，并在调用代码中可以使用设置图表data，这样就可以实现图表的异步刷新，就不会当图表数据改变时整个页面卡住了（如果图表数据不需要变化则不用设置这些自定义数据函数）

ec: {
      onInit: initChart     //初始化函数中将chart图表作为返回值赋给ec
    },

    wx.cloud.callFunction({   //云开发调用云函数的精髓
        name:       //所调用的函数名称
        data: { //传递的参数

        }
      }).then(res => {
        data = res.result       //data为上方option中设置的数据值
        chart.setOption(getOption())        //重新刷新图表
      })

• 最后如上放代码中使用chart.setOption()方法即可重新绘制图表内容

技术使用中遇到的问题和解决过程。

• 问题一：起步使用组件时的坑，导入后使用ec-canvas，图表也不显示。这也是我一开始卡在的最基础的一个地方。
  解决过程：检查上方提到的在该界面的.json文件中是否配置组件路径以及路径正确与否。这不仅仅是这单个组件的问题，在所有微信小程序开发过程中有运用到components的地方，如果组件不生效，第一个检查的就是组件路径的配置。
• 问题二：同样，在检查完路径配置问题后任然无法显示图标的问题。
  解决过程：对WXSS文件中样式进行修改，组件是不会默认设置大小的，不像在web中直接引用即可，需要先给图表设置默认宽高，而这些在参考文献中第一个的官方在微信开放社区中给出的教程里是没有的。这些宽高只能在WXSS中设置，而文档中只讲到了路径配置、引用组件、以及JS文件的编写。这个问题对新手来说是容易遗漏的地方。
• 问题三：在以上两个坑都踩完了以后，还是无法显示图表，此时一定很绝望，但请接着往下看。
  解决过程：在技术详述的代码中可以看到ec-canvas绑定了一个名叫ec的数据。而这个数据一定要写在page({data:{}})的data中，这样才能与WXML的标签所绑定。

以上三个问题确实是很简单的问题，但是在初次使用时，碰壁这么多次，不断查找原因解决问题还是不能使用时，会给初学者一个很大的打击，所以如果无法在小程序中使用ECharts时跟随这三个问题一步步检查可以有一个很好的开端。

• 问题四：使用时发现图表的样式不生效，跟着屏幕滑动一起移动的BUG，如下图。
  解决过程：这个是新版微信的canvas的bug，在开发者工具中会有区别，但是在实际的真机上调试时并不会出现这个bug，不用太过担心。如果想在编译器上就看到真机上的效果，只需要添加一个属性force-use-old-canvas="true"，使用旧版的canvas显示即可。
  

总结

• ECharts是一个非常好用的将数据可视化成图表的一个工具，方便快捷，简单，容易上手。
• 在微信中缺乏这样的一个工具，幸运的是ECharts官方和微信官方合作提供了小程序版的ECharts。虽然使用起步有些繁琐，但是后续的使用很简单，功能也很丰富。
• 总而言之，使用起来，首先像上方详述中所说的先引用组件，之后的自定义图表样式完全可以根据参考文献中ECharts的官方文档的知识来定制，希望有疑惑的同学看到了这篇文章可以有一些收获。

参考文献、博客

• ECharts团队与微信小程序官方合作的说明文档 —— 羡辙

• 在微信小程序中使用Echarts —— 丸子四喜的吗

• ECharts官方文档