图表可视化highcharts和百度的echarts
前端数据可视化插件有很多,有
- Highcharts(https://www.hcharts.cn/)
- Echarts(http://echarts.baidu.com/)
- D3(https://d3js.org/)
- amcharts (https://www.amcharts.com/)
- FusionCharts (https://www.fusioncharts.com/)
一、Highcharts
官网: https://www.highcharts.com.cn/index.php
下载页面:https://www.highcharts.com.cn/download
演示地址:https://www.highcharts.com.cn/demo/highcharts
文档:https://www.highcharts.com.cn/docs
Highcharts 非商业免费,商业需授权,代码开源。兼容 IE6。
Highcharts 底层为svg,方便自己定制,但图表类型有限。svg特点:
- 不依赖分辨率。
- 支持事件处理器,可以为某个元素附加JS事件处理器。
- 最适合带有大型渲染区域的应用程序(如谷歌地图),但复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)。
- 不适合游戏应用。
示例:
<html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script> <script> $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'My first Highcharts chart' }, xAxis: { categories: ['my', 'first', 'chart'] }, yAxis: { title: { text: 'something' } }, series: [{ name: 'Jane', data: []},
{ name: 'John', data: []}] }); }); </script> </head> <body> <div id="container" style="min-width:800px;height:400px;"></div> </body> </html>
二、Echart
官网:https://www.echartsjs.com/zh/index.html
下载页面:https://www.echartsjs.com/zh/download.html
演示地址:https://www.echartsjs.com/examples/zh/index.html
文档:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
echarts是国内百度团队的产物。charts 完全免费,代码开源。
底层为canvas ,支持图表相对要多一些。canvas特点:
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力,能够以.jpg、.png格式保存结果图像
- 最适合图像密集型的游戏,一旦其位置发生拜年话,其中的许多对象会被频繁重绘
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
图表可视化highcharts和百度的echarts的更多相关文章
- 大数据时代的图表可视化利器——highcharts,D3和百度的echarts
大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941 ...
- 只会Excel想做图表可视化,让数据动起来?可以,快来围观啦(附大量模板下载)
前言 之前我们分享过基于echarts 的数据可视化展示,很多朋友就说,不会软件开发,可不可以直接用Excel进行数据化的展示. 答案是肯定的,确实有这种方案,百度查询一查一大推,各种解决方案各种模板 ...
- 将百度的ECharts整合到阿里的Weex中。
由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库.所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来. 首先,按照Weex官方教程, ...
- 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
- Python交互图表可视化Bokeh:1. 可视交互化原理| 基本设置
Bokeh pandas和matplotlib就可以直接出分析的图表了,最基本的出图方式.是面向数据分析过程中出图的工具:Seaborn相比matplotlib封装了一些对数据的组合和识别的功能:用S ...
- 百度的echarts报表数据直接显示
最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记 ...
- seaborn线性关系数据可视化:时间线图|热图|结构化图表可视化
一.线性关系数据可视化lmplot( ) 表示对所统计的数据做散点图,并拟合一个一元线性回归关系. lmplot(x, y, data, hue=None, col=None, row=None, p ...
- 图表可视化seaborn风格和调色盘
seaborn是基于matplotlib的python数据可视化库,提供更高层次的API封装,包括一些高级图表可视化等工具. 使用seaborn需要先安装改模块pip3 install seaborn ...
- Javascript图表插件HighCharts用法案例
最近还在忙着基于ABP的项目,但本篇博客和ABP无关,喜欢ABP框架的朋友请点击传送门. 这不,最近项目基本功能做的差不多了,现在在做一个数据统计的功能,需要绘制区域图(或折线图)和饼图.一开始,楼主 ...
随机推荐
- 七、spring生命周期之初始化和销毁方法
一.通过@Bean指定初始化和销毁方法 在以往的xml中,我们是这样配置的 <bean id="exampleInitBean" class="examples.E ...
- Dubbo服务器与普通服务器的区别
Dubbo是一个阿里巴巴开源出来的一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 1.什么是分布式服务框架 分布式有两个特点,分别是内聚性和透明性(比如 ...
- 第16届(2019)全国大学生信息安全与对抗技术竞赛全国线下总决赛 Writeup
笔者<Qftm>原文发布<BitHack>:https://bithack.io/forum/469/answer/333 0x00 Begin 关于 ISCC 2019 北理 ...
- typedefine 用法
typedef为C语言的关键字,作用是为一种数据类型定义一个新名字.这里的数据类型包括内部数据类型(int,char等)和自定义的数据类型(struct等). 用法: 变量别名 例如: 单个变量: t ...
- python中将已有链接的视频进行下载
使用python爬取视频网站时,会得到一系列的视频链接,比如MP4文件.得到视频文件之后需要对视频进行下载,本文写出下载视频文件的函数. 首先导入requests库,安装库使用pip install ...
- 协议——VGA
VGA(Video Graphics Array)是IBM在1987年随PS/2机一起推出的一种视频传输标准,具有分辨率高.显示速率快.颜色丰富等优点,在彩色显示器领域得到了广泛的应用.不支持热插拔, ...
- 【scratch3.0教程】1.3 了解scratch界面内容
第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...
- C# HtmlAgilityPack+Selenium爬取需要拉动滚动条的页面内容
现在大多数网站都是随着滚动条的滑动加载页面内容的,因此单纯获得静态页面的Html是无法获得全部的页面内容的.使用Selenium就可以模拟浏览器拉动滑动条来加载所有页面内容. 前情提要 C#HtmlA ...
- C# vb实现浮雕特效滤镜效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的浮雕效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- spring boot 集成mybatis plus 含分页 完整教程
一.添加依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus ...