一,什么是echars?
Echars官网
是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器.
二,特点
1,ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,
2,ECharts 种类多,提供了柱状图、折线图、饼图、气泡图及四象限图等;
3,ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;
三,使用
1,Echars下载链接: https://echarts.apache.org/zh/download.html
1.1随便点击一个版本
1.2,此时我们下载一个Echarsmin.js文件
2,代码编写
2.1准备一个带有大小的div容器,生成的图表会放在这里面
<div id="container">存放图表</div>
2.2初始化echars实例化对象
var echart = echarts.init(document.getElementById("container"))
2.3指定配置项和数据(option)
var option = {
title: {
text: "我的第一个图表"
},
tooltip: {
},
legend: {
data: ["睡眠时长"]
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
},
series: [{
name: "睡眠时长",
type: "bar",
data: [8, 10, 4, 5, 9, 4, 8]
}]
}
2.4将配置项设置给echars实例对象
echart.setOption(option);
完整版的echars代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
var echart = echarts.init(document.getElementById("container"))
var option = {
title: {
text: "我的第一个图表"
},
tooltip: {
},
legend: {
data: ["睡眠时长"]
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
},
series: [{
name: "睡眠时长",
type: "bar",
data: [8, 10, 4, 5, 9, 4, 8]
}]
}
echart.setOption(option);
</script>
</html>
效果如图:
四,了解echars一些常用的配置
1.series:图标数据,指定什么类型的图标,可以多个图表重叠。
2.xAxis:直角坐标系中的 x 轴
3.yAxis:直角坐标系中的 y 轴
总结:x 轴常用来标示数据的,指数据的类别,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。
4.grid:直角坐标系内绘图网格。
5.title:标题组件
在option选项中添加一个title,此时这个title会展现在我们图标的顶部
6.tooltip:提示框组件
当我们鼠标移入这些柱子上时,会有数据展现出来,如果tooltip{}为空时,为默认展示
7.legend:图例组件
这个属性展示的是这一部分,将每组不同的数据用不同的方块在顶部展示出来,便于区分
尤为要注意的是在series中name的值要等于legend中的值
8.color:调色盘颜色列表
9.stack:数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的
10.emphasis:高亮的样式,
在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 emphasis 属性来定制。emphsis 中的结构,和普通样式的结构相同
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
五,echars常用的图表类型
1,柱状图:bar
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
},
{
type: 'bar',
data: [26, 24, 18, 22, 23, 20, 27]
}
]
};
效果:
2,折线图:line
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
},
series: [
{
data: [10, 22, 28, 43, 49],
type: 'line',
stack: 'x',
areaStyle: {
}
},
{
data: [5, 4, 3, 5, 10],
type: 'line',
stack: 'x',
areaStyle: {
}
}
]
};
3,饼图:pie
option = {
legend: {
orient: 'vertical',
x: 'left',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
emphasis: {
show: true
}
},
labelLine: {
show: false
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: [
{
value: 335, name: 'A' },
{
value: 310, name: 'B' },
{
value: 234, name: 'C' },
{
value: 135, name: 'D' },
{
value: 1548, name: 'E' }
]
}
]
};
六,富文本
特点:定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。
对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。
在文本中使用图片做小图标或者背景。
特定组合以上的规则,可以做出简单表格、分割线等效果。
echarts 提供了丰富的文本标签配置项,包括:
字体基本样式设置:fontStyle、fontWeight、fontSize、fontFamily。
文字颜色:color。
文字描边:textBorderColor、textBorderWidth。
文字阴影:textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本块或文本片段大小:lineHeight、width、height、padding。
文本块或文本片段的对齐:align、verticalAlign。
文本块或文本片段的边框、背景(颜色或图片):backgroundColor、borderColor、borderWidth、borderRadius。
文本块或文本片段的阴影:shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本块的位置和旋转:position、distance、rotate。
labelOption = {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
// 这里是文本块的样式设置:
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
borderWidth: 3,
backgroundColor: '#984455',
padding: [3, 10, 10, 5],
lineHeight: 20,
// rich 里是文本片段的样式设置:
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
}
}
};