一般会想到 canvas 和 svg ;

svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广;

什么是svg, scalable vector graphics  全称 可缩放矢量图形, 是一种来描述二维矢量图形的xml语言

canvas 能做的 svg基本都可以做,  字体图标, icon, logo 也能作

在ie上也是从ie9开始兼容svg的. 旧浏览器 vml技术, vml类似svg,   react 15对svg支持比较完善

svg canvas

echarts选择的是canvas, highcharts选择的是svg,  由于svg的矢量特性, 绘制图形 svg更合理 而且有优势

canvas 支持的库 react-canvas,  这个库主要来生成各类功能的自定义canvas标签

讲到svg, 因为他的表现方式更贴近react使用原生和自定义标签构建组件化的思路, svg嵌套和自定义属性来得到想要的图形

虽然svg性能不太好, 但为什么要选择

我们常见的image sprite 有高清屏幕的兼容问题, 需要做几套图片来兼容, 而svg不存在这个问题

当图标小于16px, 或者图标比较复杂时, 往往会出现图片无法显示清晰的问题,

虽然iconfont能够自动适应个屏幕的分辨率, 但不能解决上面的清晰问题

React 与 可视化的更多相关文章

  1. react 地图可视化 cesium 篇

    Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了.新立项目,决定尝试下 react.js.下面是 react 集成 cesium,核心部分是 web ...

  2. 【使用指南】WijmoJS 前端开发工具包

    为方便广大前端开发人员更好的使用 WijmoJS 前端开发工具包,葡萄城专门推出了 WijmoJS 使用指南,该指南详细地介绍了如何把 WijmoJS 各种强大的功能应用到您自己的 Web 项目中,助 ...

  3. 在 React 项目中引入 GG-Editor 编辑可视化流程

    蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...

  4. React 可视化开发工具 Shadow Widget 非正经入门（之五：指令式界面设计）

    本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇解释 Shadow Widget 中类 Vue 的控制指令,与指令式界面设计相关. 1. 指令式界面设计 Vue 与 A ...

  5. React 可视化开发工具 Shadow Widget 非正经入门（之六：markdown）

    本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...

  6. React 可视化开发工具 shadow-widget 的非可视开发方法

    Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...

  7. react 可视化编辑器1

    可视化编辑器1 前言 前面我们学习低代码,例如百度的低代码平台 amis,也有相应的可视化编辑器,通过拖拽的方式生成配置文件.就像这样 笔者自己也有类似需求:比如中台有个归档需求,通过选择一些配置让后 ...

  8. react+echarts/g2/bizcharts可视化图表

    一.echarts的折线图的使用demo如下,linecharts为实例化的封装组件,line为实际应用的组件 cnpm install echarts import React from 'reac ...

  9. webpack+react实现echarts可视化配置

    先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...

随机推荐

  1. 20145321 《Java程序设计》第9周学习总结

    20145321 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1 JDBC 1.JDBC简介: JDBC是Java联机数据库的标准规范,它定义一组标准 ...

  2. HBase安装过程

    1).上传,解压,重命名,修改环境变量/etc/profile 2).修改 hbase-env.sh 文件 export JAVA_HOME=/usr/java/jdk1.7.0_27 //Java ...

  3. Hive压缩格式

    TextFile Hive数据表的默认格式,存储方式:行存储. 可使用Gzip,Bzip2等压缩算法压缩,压缩后的文件不支持split 但在反序列化过程中,必须逐个字符判断是不是分隔符和行结束符,因此 ...

  4. 动态 K th

    每一棵线段树是维护每一个序列前缀的值在任意区间的个数,如果还是按照静态的来做的话,那么每一次修改都要遍历O(n)棵树,时间就是O(2*M*nlogn)->TLE考虑到前缀和,我们通过树状数组来优 ...

  5. sqoop将mysql的tinyint类型转化为boolean类型

    当mysql中的字段为tinyint类型时,通过sqoop导入数据到hdfs上,在hdfs上显示的是true,false值.为了显示0,1. 解决方法: jdbc:mysql://<hostna ...

  6. Mybatis实现批量删除

    知识点:当传入参数为数组时,XX.xml文件中,标签为collection属性 参考博客:https://blog.csdn.net/javaee_sunny/article/details/5251 ...

  7. 解决"此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站"的问题

    在ASP.NET MVC项目中,使用AJAX向控制器发送GET请求获取JSON数据时,出现这个错误:"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站.若要允许 G ...

  8. kylin入门到实战：入门

    版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=292 排版乱?请移步原文获得更好的阅读体验 1.概述 kylin是一款开源的分布式数据分析工具,基于hadoop之 ...

  9. [PyTorch]PyTorch中反卷积的用法

    文章来源:https://www.jianshu.com/p/01577e86e506 pytorch中的 2D 卷积层 和 2D 反卷积层 函数分别如下: class torch.nn.Conv2d ...

  10. Android -- 提交数据到服务器，Get Post方式， 异步Http框架提交

    1. 发送请求到服务器有几种方式 (1)HttpURLConnection (2)Httpclient 同步框架 (3)AsyncHttpClient 异步框架 (https://github.com ...