ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
1:下载并引入echarts.js文件
https://echarts.apache.org/zh
选择下载里面适合自己的版本
2:准备一个具备大小的DOM容器
<script src="js/echarts.min.js"></script>
<div class="box">
</div>
3:初始化echarts实例对象
var myChart = echarts.init(document.querySelector(".box"));
4:指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
5:将配置项设置给echarts实例对象
myChart.setOption(option);
这样就能得到一个柱状图啦
也有许多种不同类型的数据可视化方式,可以去官网详看。
下面是一些基础相关配置,可以根据自己的需要进行修改
title:标题组件
tooltip:提示框组件
legend:图例组件
toolbox: 工具栏
grid:直角坐标系内绘图网格
xAxis:直角坐标系 grid 中的 x 轴
yAxis:直角坐标系 grid 中的 y 轴
series: 系列列表。
color:调色盘颜色列表