一、ECharts基本使用
- 导入echarts
- 准备一个呈现图标的盒子
- 初始化echarts对象
- 准备配置项
- 将配置项设置给echarts对象
具体代码实现：
// 导入echarts
<script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>
<div style="width:600px;height:400px"></div>
var echarts = echarts.init(document.querySelector('div'))
var option = {
// x轴
xAxis: {
type: 'category',
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
// y轴
yAxis: {
type: 'value'
},
// 配置y轴数据
series: {
// 决定图标类型
type: 'bar',
// y轴上的数据
data: [5, 20, 36, 10, 10, 20]
}
}
// 将配置项设置给echarts对象
echarts.setOption(option)
1.通用配置
任何一种类型的图表都可以使用的配置
- title 标题
- 文字样式 textStyle
- 标题边框 borderWidth borderColor borderRadius
- 标题位置 left right bottom top
...
title: {
text: 标题名称
textStyle: {
color: 颜色
},
borderWidth: 标题边框
borderColor: 标题颜色
borderRadius: 标题圆角
left: 'center'
top: 'center'
}
- tooltip 提示框（鼠标经过/点击图表时的显示框）
- 触发类型 trigger
- aixs
- item
- 触发时机 triggerOn
- mouseover
- click
- 格式化 formatter
- 字符串模版
- 回调函数
- 触发类型 trigger
tooltip: {
// 经过项目之后显示信息
trigger: 'item',
// 经过轴之后显示信息
// trigger: 'axis',
// 点击后显示信息 默认为mouseover
// triggerOn: 'click',
// formatter: '{b}的成绩为{c}'
formatter: (args) => {
// console.log(args);
return args.name + '的成绩是' + args.value
}
}
- toolbox ECharts提供的工具栏
- feature 显示工具栏按钮
- saveAsImage:{} 导出图片
- dataView:{} 数据视图 (可以修改数据)
- restore: {} 重置功能(还原)
- dataZoom: {} 区域缩放
- magicType 动态切换图标类型
- feature 显示工具栏按钮
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 显示原始数据 可修改
restore: {}, // 还原数据
dataZoom: {}, // 区域缩放
magicType: {
// 动态切换视图类型
type: ['bar', 'line']
}
}
}
- legend 图列 筛选系列 需要和series配合使用
- data 数据是一个数组 与series的name保持一致
legend: {
data: ['语文', '数学']
},
series: [
{
name: '语文',
data: chineseGrade,
type: 'bar',
}, {
name: '数学',
data: mathGrade,
type: 'bar',
}
]
2.直角坐标系中的常用配置
直角坐标系图表：柱状图 折线图 散点图
- 配置1:网格grid
- 用来控制直角坐标系的布局和大小 x轴和y轴的绘制基于grid进行绘制
- 显示grid
- show
- grid边框
- 边框宽度 borderWidth
- 边框颜色 borderColor
- grid的位置和大小
- width 宽度
- height 高度
- left
- right
- top
- bottom
- 配置2:坐标轴 axis
- 坐标轴分为x轴和y轴
- 坐标轴类型 type
- value 数值轴 自动从目标数据中读取数据
- category 类目轴 必须通过data设置类目数
- 显示位置position
- xAixs 可以设置为 top和bottom
- yAxis 可以设置为 left和right
- 配置3:区域缩放 dataZoom
- 类型 type
- slider 滑块
- inside 内置 依靠鼠标滚轮/双指缩放
- 指明产生作用的轴
- xAxisIndex 默认写0
- yAxisIndex 默认写0
- 指明初始状态的缩放情况
- start 初始百分比
- end 结束百分比
- 类型 type
const option = {
grid: {
show: true,
borderWidth: 10,
borderColor: 'skyblue',
left: 100,
// width: 200,
// height: 200,
},
xAxis: {
type: 'category',
data: arr1,
// position: 'top',
},
yAxis: {
type: 'value',
// position: 'right',
},
dataZoom: {
type: 'slider'
// type: 'inside'
},
series: [
{
type: 'bar',
data: arr2
}
]
}
二、echarts基本图形
1.柱状图
1.基本的柱状图
- 基本结构
- x轴和y轴的数据
- series中的type设置为bar
2.柱状图常见效果
- 最大/最小值 markPoint
- 平均值 markLine
- 数值的显示 label
- 柱的宽度 barWidth
3.柱状图的特点
呈现每一个分类有多少，以及排名情况
// 实例化echarts对象
const eCharts = echarts.init(document.querySelector('div'))
// 设置配置项
const option = {
title: {
text: '期末语文成绩'
},
xAxis: {
type: 'category',
data: ["张三", "李四", "王五", "闰土", "小明", "茅台", "二妞", "大强"]
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
data: [88, 92, 63, 77, 94, 80, 72, 86],
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: "min",
name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
},
label: {
show: true
}
}
]
}
// 将配置项设置给echarts对象
eCharts.setOption(option)
2.折线图
1.基本的折线图
- 基本结构
- x轴和y轴的数据
- series中的type设置为line
2.折线图常见效果
- 最大/最小值markPoint 平均值markLine 标注区间 markArea
- 线条控制 平滑smooth 风格lineStyle
- 填充风格 areaStyle
- 紧挨边缘 boundaryGap 设置给xAxis
- 缩放:脱离0值比例 scale 设置给yAxis
- 堆叠图 stack
3.折线图的特点
分析数据随着时间的变化趋势
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 紧挨边缘
boundaryGap: false
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markPoint: {
data: [{
// 最大值
type: 'max',
name: '最大值'
}, {
// 最小值
type: 'min',
name: '最小值'
}]
},
// 平均值
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// 标注区间
markArea: {
data: [
[
{
// 开始值
xAxis: 'Mon'
}, {
// 结束值
xAxis: 'Tue'
}
]
]
},
// 平滑效果
smooth: true,
// 折线样式
lineStyle: {
color: 'green',
type: 'dotted'
},
// 填充效果
areaStyle: {
color: 'pink'
},
stack: 'Total',
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
areaStyle: {}
}
]
}
3.散点图
1.基本的散点图
- 基本结构
- x轴和y轴的数据，是一个二维数组
- series中的type设置为scatter
- xAxis和yAxis中的type设置为value
2.散点图常见效果
- 气泡图效果 都是在series中控制
- 散点大小不同 symbolSize
- 数值
- 回调函数 参数代表的是每一个不同的数据
- 散点颜色不同 itemStyle.color
- 字符串
- 回调函数 参数的data是每一个不同的数据
- 散点大小不同 symbolSize
- 涟漪动画 type:'effectScatter'
- showEffectOn: 'emphasis' 配置何时显示特效 (鼠标经过发生特效)
- effectType: {} 涟漪特效
3.散点图的特点
-
散点图帮助我们推断出变量间的相关性
-
地图上的标注
series: [
{
data: arr,
// 涟漪散点图
name: "1990",
type: "effectScatter",
// 涟漪特效相关配置
rippleEffect: {},
// 配置何时显示特效
showEffectOn: 'emphasis',
// type: 'scatter',
// 改变散点的大小
// symbolSize: 20
symbolSize: (arg) => {
// console.log(arg);
let height = arg[0]
// console.log(height);
if (height > 7) {
return 20
}
return 10
},
// 改变散点的颜色
itemStyle: {
// color: 'skyblue'
color: function (params) {
// console.log(params);
let height = params.data[0]
// console.log(height);
if (height > 7) {
return 'pink'
}
return 'skyblue'
}
}
}
]
4.饼图
1.基本的饼图
- 基本的代码结构
- 数据的准备
[{name:'',value:''}]
- series中的type设置为pie
- 无需设置xAxis和yAxis
2.饼图常见效果
- 显示数值
- formatter
- 字符串模版
- 回调函数
- formatter
- 圆环的显示
- radius 饼图的半径
- 百分比 参照的是宽高中较小的一部分的一半来进行百分比设置
- 数组 第0个元素代表是内圆半径 第1个元素代表是外圆的半径
- radius 饼图的半径
- 南丁格尔图 饼图每个区域的半径是不同的
roseType: 'radius'
- 选中效果
selectedMode: 'single/multiple'选中的区域偏离圆点一段距离selectedOffset:30偏移的距离
3.饼图的特点
了解不同分类的数据占比情况
5.地图
1.基本的地图
- 地图分类
- 百度地图API
- 需要申请百度地图AK
- 矢量地图
- 需要准备矢量地图数据
- 百度地图API
- 基本实现步骤
- 基本的代码结构
- 导入准备好的矢量地图数据
- 使用ajax获取数据
- 在回调函数中往echarts全局对象注册地图的json数据
- 在geo下设置
type:'map'map:'注册的名称'
