原生微信小程序echarts的基本使用和3个高频案例

前言

新接到的一个小程序需求，需要展示一些可视化的数据给一些老师领导们看，提到可视化就联想到echarts库，但之前只是看看没有实操，遂写一片实操笔记记录一下

导入ec-canvas

安装

echarts-for-weixin 是 百度ECharts团队维护的一个开源项目，开箱即用 只导入这个ec-cancas文件就行

git clone https://github.com/ecomfe/echarts-for-weixin

可以直接clone到本地,只把这个ec-cancas文件夹移动到项目中

引入到minigrogram文件夹之下

切记！！不要直接在微信小程序终端直接clone 那样打包下来包很大，之后审核发布不好通过

使用

和其他引入组件一样，在需要使用页面中的json文件中引用

然后就可以在wxml中用ec-canvas组件咯

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

注意此处的 .container，新建小程序项目后，其中 app.wxss 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。请注意参考 app.wxss 修改样式，保证图表的初始化的时候是有宽度和高度的

基本使用

• canvas-id 用于在 JavaScript 中获取 Canvas 上下文以进行绘图操作
• ec 是一个在页面js文件中定义的对象，它使得图表能够在页面加载后被初始化并设置

  <ec-canvas  canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

页面js文件处理

引入echarts

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

简单初始化一个例子，也差不多都是这个类似的模板

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height, // 初始化宽度高度
    devicePixelRatio: dpr // 像素比 添加这个属性更加高清
  });
  canvas.setChart(chart);
  // 一些配置信息
  const option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

上手操作

一般自己独立开发一个项目开始肯定得抄 （找找灵感），当然公司一般都有UI这不谈 切图就完事了 echarts官方维护了一个社区 有很多案例可供参考 Find inspiration！

介绍option中常见属性（组件）

• title 标题组件（包括主副标题）
• legend 图例组件 可选普通图例和可滚动翻页图例
• toolbox 工具栏 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
• tooltip 提示框组件 可设置在全局 、坐标系、系列(series)中、系列每个数据项中
• series 系列列表 type 决定自己的图表类型
  • data（数据）数据属性包含了饼图的各个数据项，每个数据项通常包括数值和名称
  • emphasis（高亮） "itemStyle" 中的属性用于设置鼠标悬停在数据块上时的高亮效果。
• yAxis / xAxis 直角坐标系 grid 中的 y / x 轴
  • type 可选'value'、'category'、'time' 、'log' 分别代表 数值轴 类目轴 时间轴 对数轴
  • data 坐标数据
• visualMap 视觉映射组件
• geo 地理坐标系组件

小试牛刀

随便打开个实例

属性基本上都是有介绍到了的，当然肯定具体还是要对照官方手册的来

• 一般临摹方法就是寻找类似的实例，然后根据自己的项目再自定义化，具体的属性不会再参照官方手册查看或者直接google
• 如果需要用到的echart图较多可以再进行封装

开发中比较常见的案例离不开饼图，折线图，柱状图,热力图等等 结合我自身的开发，看一下饼图,柱状图和地图的实现案例

案例分析

一般我会把图例的option抽取到utils目录下，每个option一个文件也比较好管理 这其中这里面的配置还有点坑，之后看有没有机会细谈，记录一下bug

饼图

代码结构

option配置信息当然最好可以在utils下再建个options目录，更加好看些，因为这个项目比较小 uitls也没太多东西，索性就。。

wxml

<view class="pie">
        <ec-canvas class="echarts-pie" canvas-id="echarts-pie" ec="{{ ecPie }}"></ec-canvas>
        <ec-canvas class="echarts-pie2" canvas-id="echarts-pie2" ec="{{ ecPie2 }}"></ec-canvas>
    </view>

wxss

.echarts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 2400rpx;
  position: relative;
  top: -80rpx;
}
.pie {
  width: 100%;
  height: 100%;
  display: flex;
}
ec-canvas {
  width: 100%;
  height: 100%;
  background-size: contain;
}

接下来的ec初始化实例中的width，height就是接收css对应的参数值

js

import { getPieOptions } from "../../utils/pie";
import { getPieOptions2 } from "../../utils/pie2";
data: {
    ecPie: {
      onInit: function (canvas, width, height, dpr) {
        const pieChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        canvas.setChart(pieChart);

        pieChart.setOption(getPieOptions());
        return pieChart;
      },
    },
    ecPie2: {
      onInit: function (canvas, width, height, dpr) {
        const pieChart2 = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        canvas.setChart(pieChart2);

        pieChart2.setOption(getPieOptions2());
        return pieChart2;
      },
    },
}

其实俩个ec变动的就只是option不同

索性再封装一层

const init = (canvas, width, height, dpr， optionsFn) =>{
    const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr,
    });
    canvas.setChart(chart);

    chart.setOption(optionsFn());
    return chart;
}

data:{
    ecPie: {
        onInit: init(canvas, width, height, dpr，getPieOptions)
        },
    ecPie: {
        onInit: init(canvas, width, height, dpr，getPieOptions2)
    }

}

柱状图

结构和饼图类似， 改改属性样式这里就不赘述了

最让我满意的地图！

先看效果 过程还是挺艰辛的

下载mapChina json文件

小程序的map不想pc端那么直接就可以引入，需要手动下载 我找到的实测可以用的map地址

js

主要是多了注册地图坐标这步

import geoJson from "../../utils/mapChina";
onInit: function (canvas, width, height, dpr) {
        const mapChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr,
        });
        canvas.setChart(mapChart);
        mapChart.showLoading();// 显示加载动画，等待数据加载完成
     // 注册中国地图数据，通常用于绘制地图
    echarts.registerMap("china", geoJson);
    
    // 遍历地图数据的特性，将各省份的坐标信息存储到 geoCoordMap 对象中
    geoJson.features.forEach(function (v) {
      var name = v.properties.name;
      geoCoordMap[name] = v.properties.cp;
    });
        mapChart.hideLoading();   // 隐藏加载动画
        mapChart.setOption(getMapOptions());
        return mapChart;
      },

map的option配置文件中geo和virtualMap组件分别实现地图绘制和地图样式视觉调整

写到最后

虽然这些都是调封装好的api。。但是调试到想要的效果还是很开心的！！ 可能这就是做视觉前端(自己造词)的魅力吧、、

参考官方文档

• echarts.apache.org/zh/option.h...
• www.makeapie.cn/echarts_cat...
• github.com/ecomfe/echa...