小程序引入多个e-charts

时间 2019-12-12

标签程序引入多个 charts 繁體版

原文原文链接

小程序引入e-charts图表html

这里是狗尾草第一次发表掘金文章，往后望各位大佬多多支持~前端

前言：运营助手，见名知意，没有图表数据的展现，看上去是有多空白。所以，俺们UI作了很好的交互，一个页面来了4个e-charts图表，且基本都不同。身为一个职业前端，怎么能猥琐呢？git

干就完了~github

实现思路

由于一个页面要引入多个图表，因此须要对e-charts图表进行封装。然鹅问题来了，怎么引入呢？npm

为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式能够方便地使用 ECharts。插件下载地址json

其中，ec-canvas 是ECharts提供的组件，其余文件是如何使用该组件的示例。canvas

ec-canvas 目录下有一个 echarts.js，默认ECharts会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。若有必要，能够自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减少文件大小小程序

这里引入，咱们只须要引入ec-canvas目录到小程序项目便可。api

单页面引入

一个页面只须要引入一个图表的，咱们在相关的js文件书写便可。这样引入比较简单，也能够减小没必要要的不少问题。但只限于一个页面引入一个图表，若是有一种状况，正如狗尾草所要完成的，一个页面4个图表，各不相同。则就须要封装组件了echarts

话很少说，直接撸~

index.json配置

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

index.wxml

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

index.js

function initChart(canvas, width, height) {
   const chart = echarts.init(canvas, null, {
     width: width,
     height: height
   });
   canvas.setChart(chart);
 
   var option = {
     ...
   };
   chart.setOption(option);
   return chart;
 }
 
 Page({
   data: {
     ec: {
       onInit: initChart
     }
   }
 });

以上为单页面引入图表，须要注意的是，

引入文件的路径，改为本身项目中的实际路径。

option配置可查看e-charts官方文档按需配置。
小程序的层级由于是原生组件，因此小程序的层级没法修改。
因为原生组件脱离在 WebView 渲染流程外，所以在使用时有如下限制：组件的层级是最高的，因此页面中的其余组件不管设置 z-index 为多少，都没法盖在原生组件上。后插入的原生组件能够覆盖以前的原生组件。原生组件还没法在 scroll-view、swiper、picker-view、movable-view 中使用。部分CSS样式没法应用于原生组件，例如：没法对原生组件设置 CSS 动画没法定义原生组件为 position: fixed 不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域,

所以在使用时，可能遇到这个问题，图表的层级很高，并且不会跟随屏幕滚动。大概就是以上缘由形成的。

这里狗尾草的解决是经过修改布局。由于这里本人形成图表不随屏幕滚动的缘由是采用了，圣杯布局。所以在将圣杯布局去掉后。采用原本的默认布局，就修改了这个问题。

虽然问题获得了解决，但需求比较急，尚未查找到完美的解决方案，小伙伴有的话，能够告知一下，在这里先说一声谢谢啦~

引入多个图表

狗尾草的完成，页面引入多个图表，若是还如上面所示，在单页面中引入多个方法，配置会更加复杂。

这里，须要引入竖向柱状图，横向柱状图，饼状图。

所以将每一个类型的图标单独放到一个组件中，在须要引入的页面只引入这些个组件就够。

在父组件获得数据后，将数据传入子组件。子组件更新view便可。可是会遇到这么一个问题

子组件在获得传递的值后，并不会更新view。所以狗尾草是经过修改引入的ec-canvas组件来完成视图的更新。

听着可能有点懵逼，理一下。

父组件给子组件传递数据
子组件作视图的option配置
源码组件接受数据

大概就是这么个意思

先来看一下目录结构

这里只给你们引用一下饼状图

父组件

Wxml

 <view class='echarts-department'>
     <echarts-depart oData="{{echarts.departNumber}}"></echarts-depart>
 </view>

Wxss

 .echarts-department {
   width: 100%;
   height: 498rpx;
 }

Json

 {
   "usingComponents": {
     "echarts-depart": "/components/eChartsSubDepartment/index"
   }
 }

// 数据日报
 const $api = require('../../api/index.js');
 const $util = require('../../utils/utils.js');
 const regeneratorRuntime = require('../../utils/runtime.js');
 Page({
   onShareAppMessage: function (res) {
     return {
       title: '数据日报',
       path: '/pages/eCharts/index',
       success: function () { },
       fail: function () { }
     }
   },
   data: {
     subParams: {
       distCode: "",
       beginTime: $util.formatDate(new Date()),
       endTime: $util.formatDate(new Date())
     }, //获取除过审医生数外的其余的全部api params
     echarts: {
       departNumber: [],
     }               //图标传入的数据
   },
   // 获取二级科室诊疗统计
   getDepartNumber() {
     $api.DATADAILY.getDepartNumber(this.data.subParams)
     .then(res => {
       if(res.length == 0) {
         this.setData({
           "echarts.departNumber": [{name:'',value:''}]
         })
         return ;
       }
       let arr = [];
       res.map(item => {
         let obj = {};
         obj.value = item.count;
         obj.name = item.date;
         arr.push(obj);
       })
       this.setData({
         "echarts.departNumber":arr
       })
     })
   },
   onReady() {
     this.getDepartNumber();      //获取二级科室诊疗总排行
   },
 });

这里就是父组件的引入

封装的子组件

wxml

 <!-- 数据日报 二级科室诊疗排行 -->
 <view class='box'>
   <ec-canvas id="mychart-dom-bar" oData = "{{oData}}" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
 </view>

须要注意的是oData就是传递过来的数据

wx.json

 {
   "component": true,
   "usingComponents": {
     "ec-canvas": "/ec-canvas/ec-canvas"
   }
 }

// 数据日报 二级科室诊疗统计
 // 一、引入依赖脚本
 import * as echarts from '../../ec-canvas/echarts';
 
 let chart = null;
 // 二、进行初始化数据
 function initChart(canvas, width, height,data) {
   chart = echarts.init(canvas, null, {
     width: width,
     height: height
   });
   canvas.setChart(chart);
 
   var option = {
     tooltip: {
       position: function (px) {
         return [px[0], '20%'];
       }
     },
     color: ['#48C6EB', '#60E3CA', '#5E9ED5', '#9F9FF5', '#72C7FD'],
     grid: {
       x: 0,
       y: 0,
       x2: 0,
       y2: 0
     }, //图标距离上下左右的距离
     series: [{
       // name: 'pie',
       type: 'pie',
       // selectedMode: 'single', //点击的时候是否区域进行分离
       // selectedOffset: 30, //区域分离的距离
       clockwise: true,
       label: {
         normal: {
           show: false,
           textStyle: {
             fontSize: '14px',
             color: '#333333'
           },
           // backgroundColor: '#061F3D',
         }
       },
       // labelLine: {
       //   normal: {
       //     lineStyle: {
       //       color: '#999999'
       //     }
       //   }
       // }, //label线条的颜色
       data: data,
       itemStyle: {
         normal: {
           borderWidth: 2,
           borderColor: '#ffffff',
           opacity: .7
         }
       }
     }]
   };
 
   chart.setOption(option);
   return chart;
 }
 
 
 Component({
   /**
    * Component properties
    */
   properties: {
     oData: {
       type: Array,
       value: [],
       observer: function (newVal, oldVal, changedPath) {
         // 属性被改变时执行的函数（可选），也能够写成在methods段中定义的方法名字符串, 如：'_propertyChange'
         // 一般 newVal 就是新设置的数据， oldVal 是旧数据
       }
     }
   },
 
   /**
    * Component initial data
    */
   data: {
     ec: {
       onInit: initChart // 三、将数据放入到里面
     }
   },
 
   /**
    * Component methods
    */
   methods: {
   },
 })

须要修改的源码组件

ec-canvas > ec-canvas.js

 properties: {
     canvasId: {
       type: String,
       value: 'ec-canvas'
     },
 
     ec: {
       type: Object
     },
     oData: {
       type: Object,
       observer: function(newVal,oldVal) {
         if(newVal.length == 0) {
           return ;
         }
         this.init();
       }
     } //oData为父传子，子传这里
   },

在这里将传的数据做为参数

啊，噗~

至此，一条数据流就算完成。其余类型的图标也按照这种方式引入便可

补充，让小程序支持ES7

由于引入多个图表的话，更多的须要控制顺序，所以，这里给你们补充一下ES7的引入

 npm install regenerator

引用：

const regeneratorRuntime = require('../../libs/regenerator-runtime')

这里就能够放心使用async和await来控制api请求的顺序了。

固然你们能够引入相关的js文件也是能够的。