当前位置: 首页 > news >正文

在weex里面使用chart图表

weex web端使用chart图表简单,但原生端使用起比较坑,原生没有dom等问题,echart没办法在weex里面显示。

最近看到一篇文章 《聊一聊 F2 与小程序》,里面封装的思路给了启发,打算使用 @antv f2 + gcanvas 在weex里面使用chart图表。

1.首先使用weex-toolkit新建项目,如果项目存在跳过次步骤。

2.需要npm三个包

npm install @antv/f2 -s
npm install wolfy87-eventemitter -s
npm install gcanvas.js -s

gcanvas.js 是类似于 H5 Canvas 标准的 JavaScript API


3.F2 默认的运行环境是 HTML5,需要使用 <canvas> 标签,GCanvas 和 canvas 完全是匹配的。
按照封装的思路新建renderer.js文件

import EventEmitter from 'wolfy87-eventemitter';

export default class Renderer extends EventEmitter {
  constructor(myCtx) {
    super();
    const self = this;
    self.ctx = myCtx;
    self.style = {}; // just mock
    // self._initContext(myCtx);
  }
  getContext(type) {
    if (type === '2d') {
      return this.ctx;
    }
  }
}

4.再新建个chart.js,对缺失的API进行mock

import Renderer from './renderer';
import F2 from '@antv/f2';

function strLen(str) {
  let len = 0;
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
      len++;
    } else {
      len += 2;
    }
  }

  return len;
}
// 由于GCanvas不支持 measureText 方法,故用此方法 mock
F2.Util.measureText = function (text, font) {
  let fontSize = 12;
  if (font) {
    fontSize = parseInt(font.split(' ')[3], 10);
  }
  fontSize /= 2;
  return {
    width: strLen(text) * fontSize
  };
};

由于weex的手势的回调是changedTouches,需要修改下createEvent来处理坐标。

F2.Util.createEvent = function (event, chart) {
  const pixelRatio = chart.get('pixelRatio') || 1;
  const type = event.type;
  let x = 0;
  let y = 0;
  const touches = event.changedTouches;
  if (touches && touches.length > 0) {
    x = touches[0].pageX;
    y = touches[0].pageY;
  }

  return {
    type,
    chart,
    x: x * pixelRatio,
    y: y * pixelRatio
  };
};

另外weex的像素比和H5不一样,在weex渲染出来的字体和线条非常小,需要修改整体的样式。

const color1 = '#E8E8E8'; // 坐标轴线、坐标轴网格线的颜色
const color2 = '#333333'; // 字体颜色
// 坐标轴的默认样式配置
const defaultAxis = {
  label: {
    fill: color2,
    fontSize: 24
  }, // 坐标轴文本的样式
  line: {
    stroke: color1,
    lineWidth: 1,
    top: true
  }, // 坐标轴线的样式
  grid: {
    stroke: color1,
    lineWidth: 1,
    lineDash: [ 2 ]
  }, // 坐标轴网格线的样式
  tickLine: null, // 坐标轴刻度线,默认不展示
  labelOffset: 7.5 // 坐标轴文本距离坐标轴线的距离
};

const DEFAULT_CFG = {
  itemMarginBottom: 12,
  itemGap: 10,
  showTitle: false,
  titleStyle: {
    fontSize: 26,
    fill: color2,
    textAlign: 'start',
    textBaseline: 'top'
  },
  nameStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  valueStyle: {
    fill: color2,
    fontSize: 24,
    textAlign: 'start',
    textBaseline: 'middle'
  },
  unCheckStyle: {
    fill: '#bfbfbf'
  },
  itemWidth: 'auto',
  wordSpace: 6,
  selectedMode: 'multiple' // 'multiple' or 'single'
};

const Theme = {
  fontFamily: '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif', // 默认字体
  defaultColor: '#1890FF', // 默认颜色
  pixelRatio: 1, // 默认像素比,具体参数由用户自己设置
  padding: 'auto', // 图表边距,默认自动计算
  appendPadding: 18, // 默认留白,15 像素
  colors: [
    '#1890FF',
    '#2FC25B',
    '#FACC14',
    '#223273',
    '#8543E0',
    '#13C2C2',
    '#3436C7',
    '#F04864'
  ], // 默认色系
  shapes: {
    line: [ 'line', 'dash' ],
    point: [ 'circle', 'hollowCircle' ]
  },
  sizes: [ 4, 10 ], // 默认的大小范围
  axis: {
    bottom: F2.Util.mix({}, defaultAxis, {
      grid: null
    }), // 底部坐标轴配置
    left: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 左侧坐标轴配置
    right: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 右侧坐标轴配置
    circle: F2.Util.mix({}, defaultAxis, {
      line: null
    }), // 极坐标下的圆弧坐标轴配置
    radius: F2.Util.mix({}, defaultAxis, {
      labelOffset: 4
    }) // 极坐标下的半径坐标轴配置
  }, // 各种坐标轴配置
  shape: {
    line: {
      lineWidth: 2, // 线的默认宽度
      lineJoin: 'round',
      lineCap: 'round'
    }, // 线图样式配置
    point: {
      lineWidth: 0,
      size: 3 // 圆的默认半径
    }, // 点图样式配置
    area: {
      fillOpacity: 0.1
    } // 区域图样式配置
  },
  legend: {
    right: F2.Util.mix({}, DEFAULT_CFG),
    left: F2.Util.mix({}, DEFAULT_CFG),
    top: F2.Util.mix({}, DEFAULT_CFG),
    bottom: F2.Util.mix({}, DEFAULT_CFG),
    marker: {
      symbol: 'circle', // marker 的形状
      radius: 10 // 半径大小
    }
  },
  tooltip: {
    triggerOn: [ 'touchstart', 'touchmove' ],
    // triggerOff: 'touchend',
    showTitle: false,
    showCrosshairs: false,
    crosshairsStyle: {
      stroke: 'rgba(0, 0, 0, 0.25)',
      lineWidth: 2
    },
    showTooltipMarker: true,
    background: {
      radius: 1,
      fill: 'rgba(0, 0, 0, 0.65)',
      padding: [ 3, 5 ]
    },
    titleStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'top'
    },
    nameStyle: {
      fontSize: 26,
      fill: 'rgba(255, 255, 255, 0.65)',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    valueStyle: {
      fontSize: 26,
      fill: '#fff',
      textAlign: 'start',
      textBaseline: 'middle'
    },
    showItemMarker: true,
    itemMarkerStyle: {
      radius: 5,
      symbol: 'circle',
      lineWidth: 1,
      stroke: '#fff'
    },
    layout: 'horizontal'
  },
  _defaultAxis: defaultAxis // 用于获取默认的坐标轴配置
};

F2.Global.setTheme(Theme);

最后为F2添加一个Renderer类。

F2.Renderer = Renderer;
export default F2;

接下来我们就可以写个DEMO把图表渲染出来了。

<gcanvas ref="canvas_1" style="width:750px;height:400px;"></gcanvas>
import {enable, WeexBridge, Image as GImage} from "gcanvas.js";
import F2 from './chart';
setBarChart() {
  let ref = this.$refs.canvas_1;
  ref = enable(ref, {bridge: WeexBridge});
  let ctx = ref.getContext("2d");
  const canvas = new F2.Renderer(ctx); //使用封装好的Renderer类匹配canvas上下文
  const chart = new F2.Chart({
    el: canvas, // 将第三步创建的 canvas 对象的上下文传入
    width: 750, // 必选,图表宽度,同 canvas 的宽度相同
    height: 400 // 必选,图表高度,同 canvas 的高度相同
  });
  chart.source(data1);
  // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  chart.interval().position('genre*sold').color('genre');
  chart.legend('genre', {
    marker: {
      radius: 6 // 半径大小
    }
  });
  // Step 4: 渲染图表
  chart.render();
}

启起来后用palyground扫描一下就能看效果了。这是因为palyground已经集成GCanvas sdk了。如果你的weex应用没有集成GCanvas sdk,也是渲染不了的,集成方法在这里GCanvas

图片描述

图表使用方法参考@antv F2,基本上H5能画的图表,weex都能画,只是一些使用Dom的功能不能使用,比如:tooltip ,所以写了 tooltip 方法去touchstart

touchstart(ev) {
                const plot = this.chart.get('plotRange');
                const { x, y } = F2.Util.createEvent(ev, this.chart);
                /*if (!(x >= plot.tl.x && x <= plot.tr.x && y >= plot.tl.y && y <= plot.br.y)) { // not in chart plot
                  this.chart.hideTooltip();
                  return;
                }*/
                const lastTimeStamp = this.timeStamp;
                const timeStamp = +new Date();
                if ((timeStamp - lastTimeStamp) > 16) {
                    this.chart.showTooltip({ x, y });
                    this.timeStamp = timeStamp;
                }
            },
            touchend(ev){
                this.chart.hideTooltip();
            }

详细的demo在此,

封装比较简单,主要还是F2多端支持不错。

相关文章:

  • android数据库知识
  • GIN-接口范例2-请求路径中的参数
  • newlisp debugger
  • 爬取中华网科技新闻
  • 初学者比较容易犯的布局错误(手风琴布局)
  • Linux操作系统加固
  • 对 preferred-value 的理解
  • CMB面试准备-基础
  • 添加到web.config文件里的用户自定义翻页控件
  • [置顶] Web开发工具
  • php实现 称砝码(背包)
  • Debian samba支持域用户登录
  • Centos7命令行下安装和配置Apache服务器
  • linux命令截取文件最后n行(所有命令)
  • python-模块与包
  • 收藏网友的 源程序下载网
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • canvas 高仿 Apple Watch 表盘
  • es6--symbol
  • Laravel5.4 Queues队列学习
  • markdown编辑器简评
  • Odoo domain写法及运用
  • opencv python Meanshift 和 Camshift
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • React-flux杂记
  • Selenium实战教程系列(二)---元素定位
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • vue总结
  • 从零开始学习部署
  • 大主子表关联的性能优化方法
  • 人脸识别最新开发经验demo
  • 入门级的git使用指北
  • 中文输入法与React文本输入框的问题与解决方案
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • ​2021半年盘点,不想你错过的重磅新书
  • $(selector).each()和$.each()的区别
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (附源码)springboot车辆管理系统 毕业设计 031034
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (深入.Net平台的软件系统分层开发).第一章.上机练习.20170424
  • (一)WLAN定义和基本架构转
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • (转)关于如何学好游戏3D引擎编程的一些经验
  • (转)母版页和相对路径
  • .“空心村”成因分析及解决对策122344
  • .NET 程序如何获取图片的宽高(框架自带多种方法的不同性能)
  • .Net中间语言BeforeFieldInit
  • @AutoConfigurationPackage的使用
  • @Transaction注解失效的几种场景(附有示例代码)
  • [].shift.call( arguments ) 和 [].slice.call( arguments )
  • [20150321]索引空块的问题.txt