一、Echarts 简介

  Echarts是一个基于JavaScript的开源可视化图表库，可以用于创建各种类型的图表，包括折线图、柱状图、散点图、饼图、地图等。Echarts具有丰富的交互功能，可以通过鼠标滚轮缩放、拖拽、点击等方式与图表进行交互，同时也支持动态数据更新和多图表联动等高级功能。Echarts的使用非常灵活，可以通过简单的配置实现各种复杂的图表效果，同时也支持自定义主题和扩展插件。Echarts广泛应用于数据可视化、商业分析、地理信息系统等领域。

二、在小程序中引入echarts

那如何将 echarts 引入到微信小程序项目中呢？

1.下载echarts插件

官网中介绍到：echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。

  echarts-for-weixin 下载地址：github.com/ecomfe/echa…

下载下来后解压后目录文件如下：

将 “ec-canvas”文件夹放置小程序的项目目录下（无要求 components里pages里 均可 根据个人习惯，我是直接放到pages里）

github 网页下载时，可以看到 ec-canvas 的版本号为 5.3.3 版本尤为重要，后面会说明原因

2.定制图形，生成 echarts.min.js 文件

因为小程序限制大小的原因 用“ec-canvas” 目录中的 echarts.js有些大，小程序后期上线对文件大小有要求，所以建议进行定制下载导入可减少文件大小占比

接下来就是找到官网，去定制自己需要的图表;

  官网地址：echarts.apache.org/zh/index.ht…

  进入官网后，点击下载如下图：

进入在线定制页面后，

第一步，选择下载的版本；必须和上面下载的ec-canvas中的echarts.js的版本一致，否则是无法正常使用的，如下图所示：

第二步，选择要打包的图表，其它默认，如下图所示：

第三步，翻到最下面，点击下载按钮，生成 echarts.min.js 文件，如下图：

3、替换 echarts.js 文件

下载完成后， 找到你下载的文件：echarts.min.js；然后把项目中 “ec-canvas” 目录中的 echarts.js 文件替换为 echarts.min.js；

注意： ec-canvas.js的import引入的是原来的echarts.js文件，你需要自己改成刚才下载的文件，如下图所示：

三、小程序中使用 Echarts

上面我们已经将echarts引入到项目中了，接下来就是如何去使用它生成图表。下面我将以代码的形式详细阐述用法：

正常创建page，各文件配置如下：

pages/index/index.json

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

pages/index/index.wxml

<view class="container">
  <view class="echarts">
    <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas>
  </view>    
    <button bindtap="change">改变</button> //相当于模拟动态改变echarts数据
</view>

pages/index/index.wxss

.container {
  width: 100%;
}
.echarts {
  width: 100%;
  height: 500rpx;
}
.ec-canvas {
  width: 100%;
  height: 100%;
}

pages/index/index.js

// 1、引入脚本
import * as echarts from '../../ec-canvas/echarts';
 
Page({
  data: {
    ec: {
      lazyLoad: true // 懒加载
    }
  },
  //button绑定事件----动态修改表的内容,和初始化一样
  change(){
    let data = [2, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    this.initchart(data);
  },
 
  loadchart(data){
    // 绑定组件（ec-canvas标签的id）
    let ec_canvas = this.selectComponent('#myChart');
    ec_canvas.init((canvas,width,height,dpr)=>{
      const chart =echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 解决模糊显示的问题
      })
      // echart表格的内容配置
      var myoption = {
        title: {},
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} '
          }
        },
        series: [
          {
            name: 'price',
            type: 'line',
            data: data, // 动态修改的数据
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            }
          }
        ]
      }
      chart.setOption(myoption);
      return chart;
    })
  },
  initchart(data){
    // 传递后台数据到图表中，进行懒加载图表
    this.loadchart(data);
  },
 
  onLoad: function (options) {
    //模拟后台数据初始化
    let data = [1, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    this.initchart(data);
  },
})

四、常见的坑(持续更新)

小程序中echarts图滑动消失

tooltip提示框显示后拇指移动到图表外时echart图消失
在tooltip属性中添加triggerOn: 'click', 使提示框只能在点击时出现

微信小程序echarts中formatter配置全部无效

更新数据时setOption将formatter加上如：

let option = {
					xAxis: {
						data: this.recordTime,
						axisLabel: {
							interval: this.recordTime.length - 2,
							formatter: function(value, index) {
								let [c, n] = value.split(" ")
								if (n) {
									return c + "\n" + n
								}
								return c
							}
						}
					},
					yAxis: myref.option.yAxis
				}

				option.yAxis[1].axisLabel = {
					formatter: value => {
						return value != 0 ? value : ''
					},
				}
				chart.setOption(option)

关于引入依赖，引入库，按照官方的使用方法使用后，echarts 图不显示的问题

html在使用 echarts 时，外层包裹着的 view 标签也要设置宽高，也就是上面wxss代码中的container （官方的方法样式里没有设置外层元素的宽高，在官方的示例中又可以显示，这就误导了很多人会掉坑）

关于 devicePixelRatio 的作用

当你设置了 devicePixelRatio 后，会发现echarts的图表在微信开发者工具中看到的 echarts 图表像素是很差的，用手机预览的时候，是很清晰的，当把 devicePixelRatio 去掉后，微信开发者工具中看到的 echarts 图表像素变得很清晰，手机看到的是像素变差了，所以这个属性根据自己实际情况需要去选择是否添加devicePixelRatio

const chart =echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 解决模糊显示的问题
      })

ec-canvas出现上下滑动页面会漂移

在标签内加 force-use-old-canvas="true"