ECharts 对比 Highcharts 使用教程

简介: ECharts 对比 Highcharts 使用教程



Highcharts是用JavaScript编写的图表库,支持各种常用的可视化。作为同类可视化产品,ECharts与Highcharts的对比如下。

图表种类角度

目前ECharts和Highcharts的官网展示的共有可视化图表包括折线图、面积图、柱状图、条形图、饼图、环形图、散点图、气泡图、仪表图、关系图、热力图、矩形树图、雷达图、玫瑰图、箱线图、瀑布图、漏斗图、词云图(ECharts 2.0官网展示)、直方图、甘特图、桑基图、河流图、和弦图、误差图、混合图、3D图、地图(Highmaps展示)等。

不同的是,ECharts官网还展示了树图、路径图、旭日图、象形柱图、日历坐标系等。而Highcharts官网还展示了子弹图、蜂巢图等。

注意,以上可视化图表类型中不包括用户开发上传展示的各种形式的图表。

非商业和商业使用角度

ECharts可免费使用,Highcharts在个人学习、个人网站和非商业用途使用时免费,在供商业使用时需要付费。

可视化技术角度

最新的ECharts支持Canvas和SVG两种渲染方式,Highcharts支持SVG渲染方式。

SVG是指可伸缩矢量图形(Scalable Vector Graphic),历史悠久,是一种使用XML描述2D图形的语言,特点是不依赖分辨率,支持事件处理器,不适合游戏应用。

Canvas是HTML5提供的新元素,它通过JavaScript来绘制2D图形,较新,特点是依赖分辨率,不支持事件处理器,适合图像密集型游戏,对大数据绘图支持较好。

安装ECharts

首先打开ECharts官网的下载页面(https://echarts.apache.org/zh/download.html),可以看到下载页面如

可以任意选择一个版本,这里选择方法一“从下载的源代码或编译产物安装”的方式(我这里选择的是4.3.0版本),之后会跳转到具体的下载页面,

在本地新建一个文件夹,将下载的安装包复制到该文件夹中,然后在文件夹中解压压缩包,解压后的内容如

至此你已经成功安装了ECharts环境,之后直接调用里面的文件即可使用ECharts。

开发工具选择

这里的开发工具指的是编程工具,即使用何种编程工具进行后续的ECharts可视化内容制作。选择因人而异,如果你已经有自己喜欢的编程工具,可以继续用该工具编写ECharts可视化代码。我个人比较习惯和推荐的是微软的VS Code,该工具支持多种编程语言的编写。

如果你决定使用VS Code,可以按照如下步骤下载、安装和使用,当然,你也可以按照其他教程安装VS Code。

首先打开VS Code的下载页面(https://code.visualstudio.com/),如图

点击右上角Download的蓝色按钮,会跳转到具体的下载页面(https://code.visual-studio.com/Download)。在页面上选择适配电脑系统的安装包,这里选择的是Windows的System Installer 64bit安装包。不同系统环境安装包页面如图

下载完成后按照步骤安装,在安装时,首先会出现是否接受协议的对话框

选中“我接受协议”选项后点击“下一步”按钮,进入选择安装位置界面

确认安装位置后,系统会询问是否创建快捷方式以及是否创建其他快捷方式

目录
相关文章
|
3月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
JavaScript
|
前端开发 JavaScript 数据可视化
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。 根据本教程在卡拉云中搭建的折线图 Demo,你可以立即注册卡拉云,跟随本教程学习 跟随本教程你将学到 1.折线外观属性 折线增加弧线平滑过渡 折线图变为散状圆点 实线改为虚线 折线指定颜色 增加数据显示 表格外观属...
1029 0
|
10月前
|
JSON JavaScript 前端开发
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
552 0
|
2月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
51 3
|
4月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
25 0
|
10月前
|
数据可视化
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
165 0
|
9月前
|
JavaScript
Vue+Echarts: 实现饼状图的详细教程
Vue+Echarts: 实现饼状图的详细教程
451 0
|
10月前
|
数据可视化 前端开发 JavaScript
python+Django+Mysql+Echarts数据可视化实战教程(2):Django环境下web目录的配置
python+Django+Mysql+Echarts数据可视化实战教程(2):Django环境下web目录的配置
190 0
|
10月前
|
数据可视化 Python
python+Django+Mysql+Echarts数据可视化实战教程(1):Django环境部署
python+Django+Mysql+Echarts数据可视化实战教程(1):Django环境部署
294 0