一、Echats概念
1.什么是ECharts?
ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上；
2.什么是数据可视化?
也就是可以将数据通过图表的形式展示出来；
3.ECharts提供的图表类型
ECharts 提供了常见的折线图、柱状图、散点图、饼图、K线图， 用于统计的盒形图， 用于地理数据可视化的地图、热力图、线图， 用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标， 还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
4.ECharts显示图表的原理
ECharts4.0之前, 底层是使用canvas标签来实现图表绘制的；
ECharts4.0开始, 为了提升移动端性能, 还支持 SVG 渲染；
5.ECharts官网：下载文档，找到里面的echarts.js文件，将其导入到HTML中；
https://echarts.baidu.com
<head>
<meta charset="UTF-8">
<title>02-ECharts基本使用</title>
<!--1.导入ECharts插件-->
<script src="js/echarts.js"></script>
</head>
<body>
<!--2.为ECharts准备一个容器-->
<div style="width: 600px; height: 400px"></div>
<script>
/*3.拿到准备好的容器*/
let oDiv = document.querySelector("div");
/*4.创建一个ECharts对象*/
let myCharts = echarts.init(oDiv);
/*5.对ECharts进行一些配置*/
let option = {
// 设置图表的标题
title: {
text: 'ECharts 入门示例'
},
// 设置图表的图例
legend: {
data:['销量', '产量']
},
// 设置X轴上显示的数据
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
yAxis: {},
// 设置图表的数据
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},{
name: '产量',
type: 'bar',
data: [50, 120, 136, 60, 40, 80]
}]
};
/*6.将配置传递给ECharts*/
myCharts.setOption(option);
</script>
</body>二、ECharts标题组件
标题组件(title):
show: 是否显示
text: 标题文字
subtext: 子标题文字
left/top/right/bottom: 标题位置
borderColor: 边框颜色
borderWidth: 边框宽度
// 设置图表的标题
title: {
show: true,
text: 'ECharts 入门示例',
subtext: "学习echarts",
// left: 50,
// top: 50
borderWidth: 5,
borderColor: "red"
},三、ECharts工具箱组件
工具箱组件(toolbox):
show: 是否显示
feature: 具体显示功能
saveAsImage: 保存图片
dataView: 数据视图
restore: 还原
dataZoom: 缩放视图
magicType: 动态类型切换
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
},
dataView: {
show: true
},
restore:{
show: true
},
dataZoom:{
show: true
},
magicType:{
type: ["bar", "line"]
}
}
},四、ECharts工具箱组件
工具箱组件(toolbox):
show: 是否显示
feature: 具体显示功能
saveAsImage: 保存图片
dataView: 数据视图
restore: 还原
dataZoom: 缩放视图
magicType: 动态类型切换
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
},
dataView: {
show: true
},
restore:{
show: true
},
dataZoom:{
show: true
},
magicType:{
type: ["bar", "line"]
}
}
},五、ECharts弹窗组件
弹窗组件(tooltip):
show: 是否显示
trigger:显示方式, axis X轴显示
数据标记
markLine: 标记线
最大值/最小值/平均值等
markPoint: 标记点
最大值/最小值/平均值等
tooltip:{
show: true,
trigger: "axis"
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markPoint: {
data: [
{type:"max", name:"最大值"},
{type:"min", name:"最小值"},
]
},
markLine: {
data: [
{type:"max", name:"最大值"},
{type:"min", name:"最小值"},
{type:"average", name:"平均值"},
]
}
}]六、ECharts饼状图
series: [{
radius: "30%", // 显示大小
center: ["10%", "50%"], // 显示位置
type: 'pie',
data: [
{value: 123, name: "销量"},
{value: 456, name: "产量"},
{value: 789, name: "容量"},
],
}]-End
