文章目录
Echarts-介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表,且可定制。
- 折线图、柱状图、散点图、饼图、K线图
基本使用
1、引入echarts 插件文件到html页面中
<script src="js/echarts.min.js"></script>
2、准备一个具备大小的DOM容器
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts--基本使用</title>
<style>
.box{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="js/echarts.min.js"></script>
</body>
</html>
3、初始化echarts实例对象
- 然后就可以通过 echarts.init 方法初始化一个 echarts 实例
//初始化实例对象 echarts.init(dom容器)
var myChart = echarts.init(document.querySelector(".box"));
4、指定配置项和数据(option)
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
5、将配置项设置给echarts实例对象
- 通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
//把配置项给实例对象
myChart.setOption(option)
Echarts-基础配置
主要配置:
series
xAxis
yAxis
grid
tooltip
title
legend
color
- series
- 系列列表。每个系列通过
type
决定自己的图表类型 - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- 系列列表。每个系列通过
- xAxis:直角坐标系 grid 中的 x 轴
- 在两个刻度之间的带(band)中间。
- yAxis:直角坐标系 grid 中的 y 轴
- grid:直角坐标系内绘图网格。
- title:标题组件
- tooltip:提示框组件(鼠标移动到相应的数据上时,会显示该数据的具体信息)
- legend:图例组件
- color:调色盘颜色列表
option = {
//color设置我们线条的颜色,注意后面是个数组
color:['pink','red','blue'],
//设置图表的标题
title: {
text: 'Stacked Line1'
},
//图表的提示框组件
tooltip: {
//触发方式(详见官方手册)
trigger: 'axis'
},
//图例组件
legend: {
//如果series中有了name属性,则legend中的data可以删掉
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
//网格配置 grid可以控制线形图、柱状图、图表的大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
//是否显示刻度标签,true -- 显示
containLabel: true
},
//工具箱组件(可以另存为图片等功能)
toolbox: {
feature: {
saveAsImage: {}
}
},
//设置 x 轴的相关配置
xAxis: {
type: 'category',
//是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 系列图标的配置,它决定着显示那种类型的图表
//该例中,series中有五个对象,就决定者,该图表有5条线
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};