官网地址:https://www.echartsjs.com/zh/index.html
D3.js 目前Web端评价最高的JavaScript可视化工具库(入门难)
ECharts.js 百度出品的一个开源JavaScript数据可视化库
HighCharts.js 国外的前端数据库可视化库,非商用免费,国外大公司使用较多
AntV 蚂蚁金服全新一代数据可视化解决方案
HighCharts与ECharts就像Office和WPS的关系
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
下载地址:https://echarts.apache.org/zh/download.html -->
选择版本-点击Dist从GitHub上下载
<script src="js/echarts.min.js">script>
<div class="box">div>
<style>
.box {
width: 400px;
height: 400px;
background-color: green;
}
style>
<script>
/* 3、实例化 ECharts对象 传入dom的class属性
选择class为box的容器作为图表接下来放置的区域*/
var myChart = echarts.init(document.querySelector(".box"));
script>
/* 4、指定图标相关配置项
在Script标签中
先粘贴测试,
以后博客会对这些属性作详细解释说明*/
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
/* 5、将配置项给Echarts实例对象 在Script标签中 */
myChart.setOption(option);
做到这一步就已经学会了快速入门的基本使用了!!!
后面还会写更多博客分享ECharts的相关内容