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安装包。不同系统环境安装包页面如图
下载完成后按照步骤安装,在安装时,首先会出现是否接受协议的对话框
选中“我接受协议”选项后点击“下一步”按钮,进入选择安装位置界面
确认安装位置后,系统会询问是否创建快捷方式以及是否创建其他快捷方式