Echarts-基础
一、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
02-ECharts基本使用
二、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