--- theme: cyanosis highlight: solarized-dark --- ## 前言新接到的一个小程序需求，需要展示一些可视化的数据给一些老师领导们看，提到可视化就联想到echarts库，但之前只是看看没有实操，遂写一片实操笔记记录一下 ## 导入ec-canvas ### 安装 `echarts-for-weixin` 是百度ECharts团队维护的一个开源项目，开箱即用 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b470cf05b66d4ac38fa36a82da98c453~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1854\&h=1304\&s=317088\&e=png\&b=ffffff) 只导入这个`ec-cancas`文件就行 ```bash git clone https://github.com/ecomfe/echarts-for-weixin ``` 可以直接clone到本地,只把这个`ec-cancas`文件夹移动到项目中引入到minigrogram文件夹之下 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1970710d68b8413bba3a36c6615f6d0e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=412\&h=1148\&s=119190\&e=png\&b=232323) 切记！！不要直接在微信小程序终端直接clone 那样打包下来包很大，之后审核发布不好通过 ### 使用和其他引入组件一样，在需要使用页面中的json文件中引用 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0bb2a6132a24204815f5ca0578f2ae0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=946\&h=242\&s=26474\&e=png\&b=242424) 然后就可以在`wxml`中用`ec-canvas`组件咯 ```html

``` > 注意此处的 .container，新建小程序项目后，其中 app.wxss 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。请注意参考 app.wxss 修改样式，保证图表的初始化的时候是有宽度和高度的 ## 基本使用 * `canvas-id` 用于在 `JavaScript` 中获取 `Canvas` 上下文以进行绘图操作 * `ec` 是一个在页面js文件中定义的对象，它使得图表能够在页面加载后被初始化并设置 ```html ``` ### 页面js文件处理引入echarts ```js import * as echarts from "../../ec-canvas/echarts"; ``` 简单初始化一个例子，也差不多都是这个类似的模板 ```js 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官方维护了一个[社区](https://echarts.apache.org/examples/zh/index.html) 有很多案例可供参考 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 地理坐标系组件 ### 小试牛刀随便打开个实例 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa43cb97437146ddbb13b114b0857614~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2860\&h=1826\&s=420561\&e=png\&b=fefefe) 属性基本上都是有介绍到了的，当然肯定具体还是要对照[官方手册](https://echarts.apache.org/zh/option.html#title)的来 * 一般临摹方法就是寻找类似的实例，然后根据自己的项目再自定义化，具体的属性不会再参照官方手册查看或者直接google * 如果需要用到的echart图较多可以再进行封装开发中比较常见的案例离不开饼图，折线图，柱状图,热力图等等结合我自身的开发，看一下饼图,柱状图和地图的实现案例 ### 案例分析一般我会把图例的option抽取到utils目录下，每个option一个文件也比较好管理这其中这里面的配置还有点坑，之后看有没有机会细谈，记录一下bug #### 饼图代码结构 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/600cde87516c4221838cdb4f0f43372a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2074\&h=1050\&s=311186\&e=png\&b=242424) option配置信息当然最好可以在utils下再建个options目录，更加好看些，因为这个项目比较小 uitls也没太多东西，索性就。。 ##### wxml ```html

``` ##### wxss ```css .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 ```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不同索性再封装一层 ```js 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) } } ``` #### 柱状图结构和饼图类似，改改属性样式这里就不赘述了 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a6661cd486341db855e712218503b42~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1988\&h=974\&s=332400\&e=png\&b=252525) #### 最让我满意的地图！先看效果 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c82db1432100422a8049811820aba531~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=818\&h=714\&s=170004\&e=png\&b=f5f1f0) 过程还是挺艰辛的 ##### 下载mapChina json文件小程序的map不想pc端那么直接就可以引入，需要手动下载我找到的实测可以用的[map地址](https://github.com/lyingying/echarts-mapJson/blob/master/china.json?short_path=ca5a96f) ##### js 主要是多了注册地图坐标这步 ```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`组件分别实现地图绘制和地图样式视觉调整![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e72f79d04a6b4f65b21ef1e527b34fe7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1022\&h=1440\&s=149429\&e=png\&b=242424) ## 写到最后虽然这些都是调封装好的api。。但是调试到想要的效果还是很开心的！！可能这就是做视觉前端(~~自己造词~~)的魅力吧、、 ## 参考官方文档 * * *