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安装包。不同系统环境安装包页面如图

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

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

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

目录
相关文章
|
7月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
170 2
|
JSON JavaScript 前端开发
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
1171 0
|
3月前
|
Web App开发 数据可视化 前端开发
ECharts 教程
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
91 10
|
6月前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
286 0
|
7月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
128 3
|
数据可视化
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的
464 0
|
7月前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
88 0
|
JSON 前端开发 测试技术
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
834 1
|
JavaScript
Vue+Echarts: 实现饼状图的详细教程
Vue+Echarts: 实现饼状图的详细教程
826 0

热门文章

最新文章

下一篇
DataWorks