mali-applet-ui 1.0.19 → 1.0.21

package/lib/components/ml-echart2/ml-echart2.vue

@@ -0,0 +1,182 @@
+<template>
+  <view class="ml-echarts" :class="className" :style="{height: height || '400rpx', width: width || '100%'}">
+    <ecCanvas ref="canvasRef" type="2d" class="ml-canvas" :canvas-id="canvasId" :id="canvasId" :ec="ec" :myinit="initChart" :options="options10"></ecCanvas>
+  </view>
+</template>
+
+<script>
+import * as echarts from './echarts'
+import ecCanvas from './ec-canvas.vue'
+
+function initChart (canvas, width, height) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  })
+  canvas.setChart(chart)
+  const model = {
+    yCates: [
+      'Saturday',
+      'Friday',
+      'Thursday',
+      'Wednesday',
+      'Tuesday',
+      'Monday',
+      'Sunday'
+    ],
+    xCates: ['1', '2', '3', '4', '5'],
+    data: [
+      // [yCateIndex, xCateIndex, value]
+      [0, 0, 5],
+      [0, 1, 7],
+      [0, 2, 3],
+      [0, 3, 5],
+      [0, 4, 2],
+      [1, 0, 1],
+      [1, 1, 2],
+      [1, 2, 4],
+      [1, 3, 8],
+      [1, 4, 2],
+      [2, 0, 2],
+      [2, 1, 3],
+      [2, 2, 8],
+      [2, 3, 6],
+      [2, 4, 7],
+      [3, 0, 3],
+      [3, 1, 7],
+      [3, 2, 5],
+      [3, 3, 1],
+      [3, 4, 6],
+      [4, 0, 3],
+      [4, 1, 2],
+      [4, 2, 7],
+      [4, 3, 8],
+      [4, 4, 9],
+      [5, 0, 2],
+      [5, 1, 2],
+      [5, 2, 3],
+      [5, 3, 4],
+      [5, 4, 7],
+      [6, 0, 6],
+      [6, 1, 5],
+      [6, 2, 3],
+      [6, 3, 1],
+      [6, 4, 2]
+    ]
+  }
+  const data = model.data.map(function (item) {
+    return [item[1], item[0], item[2] || '-']
+  })
+  const option = {
+    tooltip: {
+      position: 'top'
+    },
+    animation: false,
+    grid: {
+      bottom: 60,
+      top: 10,
+      left: 80
+    },
+    xAxis: {
+      type: 'category',
+      data: model.xCates
+    },
+    yAxis: {
+      type: 'category',
+      data: model.yCates
+    },
+    visualMap: {
+      min: 1,
+      max: 10,
+      show: false,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 10,
+      inRange: {
+        color: [
+          '#37A2DA',
+          '#32C5E9',
+          '#67E0E3',
+          '#91F2DE',
+          '#FFDB5C',
+          '#FF9F7F'
+        ]
+      }
+    },
+    series: [
+      {
+        name: 'Punch Card',
+        type: 'heatmap',
+        data: data,
+        label: {
+          normal: {
+            show: true
+          }
+        },
+        itemStyle: {
+          emphasis: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+  chart.setOption(option)
+  return chart
+}
+
+export default {
+  name: 'MlEcharts',
+  props: {
+    options: Object,
+    height: String,
+    width: String,
+    lazyLoad: Boolean,
+    formatLegend: Function,
+    className: String
+  },
+  components: {
+    ecCanvas
+  },
+  data () {
+    return {
+      canvasId: 'dsfsdf',
+      ec: {
+        onInit: initChart
+      },
+      options10: {
+        grid: {
+          top: '10%',
+          bottom: '20%'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['开发', '测试', '设计师', '产品', '运维']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [32, 8, 2, 12, 4],
+            type: 'bar',
+            barWidth: 20
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    initChart
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/lib/components/ml-echart2/wx-canvas.js

@@ -0,0 +1,111 @@
+/* eslint-disable */
+export default class WxCanvas {
+    constructor(ctx, canvasId) {
+        this.ctx = ctx;
+        this.canvasId = canvasId;
+        this.chart = null; // this._initCanvas(zrender, ctx);
+
+        this._initStyle(ctx);
+
+        this._initEvent();
+    }
+
+    getContext(contextType) {
+        if (contextType === "2d") {
+            return this.ctx;
+        }
+    } 
+
+    setChart(chart) {
+        this.chart = chart;
+    }
+
+    attachEvent() {
+        // noop
+    }
+
+    detachEvent() {
+        // noop
+    }
+
+    _initCanvas(zrender, ctx) {
+        zrender.util.getContext = function() {
+            return ctx;
+        };
+
+        zrender.util.$override("measureText", function(text, font) {
+            ctx.font = font || "12px sans-serif";
+            return ctx.measureText(text);
+        });
+    }
+
+    _initStyle(ctx) {
+        var styles = [
+            "fillStyle",
+            "strokeStyle",
+            "globalAlpha",
+            "textAlign",
+            "textBaseAlign",
+            "shadow",
+            "lineWidth",
+            "lineCap",
+            "lineJoin",
+            "lineDash",
+            "miterLimit",
+            "fontSize"
+        ];
+        styles.forEach(style => {
+            Object.defineProperty(ctx, style, {
+                set: value => {
+                    if (
+                        (style !== "fillStyle" && style !== "strokeStyle") ||
+                        (value !== "none" && value !== null)
+                    ) {
+                        ctx[
+                            "set" +
+                                style.charAt(0).toUpperCase() +
+                                style.slice(1)
+                        ](value);
+                    }
+                }
+            });
+        });
+
+        ctx.createRadialGradient = (...p) => {
+            return ctx.createCircularGradient(...p);
+        };
+    }
+
+    _initEvent() {
+        this.event = {};
+        const eventNames = [
+            {
+                wxName: "touchStart",
+                ecName: "mousedown"
+            },
+            {
+                wxName: "touchMove",
+                ecName: "mousemove"
+            },
+            {
+                wxName: "touchEnd",
+                ecName: "mouseup"
+            },
+            {
+                wxName: "touchEnd",
+                ecName: "click"
+            }
+        ];
+        eventNames.forEach(name => {
+          console.log(name)
+          console.log(this.event)
+            this.event[name.wxName] = e => {
+                const touch = e.touches[0];
+                this.chart.getZr().handler.dispatch(name.ecName, {
+                    zrX: name.wxName === "tap" ? touch.clientX : touch.x,
+                    zrY: name.wxName === "tap" ? touch.clientY : touch.y
+                });
+            };
+        });
+    }
+}

package/lib/components/ml-echarts/echarts.js

@@ -1,14 +1,14 @@
-import * as echarts from './echarts.simple.min.js'
-import { getAppDpr } from '../../../utils'
-
-/* eslint-disable */
-
-// #ifdef MP-ALIPAY
-const eInit = echarts.init
-echarts.init = function (p1, p2, opts = {}) {
-  opts.devicePixelRatio = opts.devicePixelRatio || getAppDpr()
-  return eInit.call(this, p1, p2, opts)
-}
-// #endif
-
-export default echarts
+import * as echarts from './echarts.simple.min.js'
+import { getAppDpr } from '../../../utils'
+
+/* eslint-disable */
+
+// #ifdef MP-ALIPAY
+const eInit = echarts.init
+echarts.init = function (p1, p2, opts = {}) {
+  opts.devicePixelRatio = opts.devicePixelRatio || getAppDpr()
+  return eInit.call(this, p1, p2, opts)
+}
+// #endif
+
+export default echarts