ECHARTS
该笔记为本人在观看B站pink老师关于echarts的视频后所做,需要有一定的html、css、JavaScript、vue.js基础。
一、常用图表
1. 柱状图
- 5分钟上手ECharts
步骤1:引入echarts.js文件
步骤2:准备一个呈现图表的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
<!-- 1.引入 -->
<script src="./lib/echarts.common.js"></script>
<body>
<!-- 2.存放图表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// 3.创建实例对象,使用echarts的方法init()
var mCharts = echarts.init(document.querySelector('div'))
// x轴数据
var xDataArr = ['one', 'two', 'three', 'four', 'five']
// y轴数据
var yDataArr = [88, 92, 64, 32, 45]
// 4.配置项
var option = {
xAxis: {
// x轴
type: 'category', // 类型是类别
data: xDataArr // 数据
},
yAxis: {
// y轴
type: 'value' // 数值
},
series: [{
name: '语文',
type: 'bar', // 柱状图
data: yDataArr, // y轴数据
markPoint: {
// 设置最值
data: [
{
type: 'max', name: '最大值'
}, {
type: 'min', name: '最小值'
}
]
},
markLine: {
// 设置平均值
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
// 设置具体数值
show: true,
rotate: 60,
position: 'inside'
},
barWidth: "50%"
}]
}
// 5.将配置项设置给echarts实例,使用echarts方法setOption()
mCharts.setOption(option)
</script>
</body>
- series是一个数组,可以存放多个对象,每个对象是一组统计数据
series: [{
name: '语文',
type: 'bar',
data: yDataArr1,
{
name: '数学',
type: 'bar',
data: yDataArr2
}
-
将引入的echarts.js放在lib文件夹下。
-
将竖柱状图改成横柱状图只需将x轴与y轴互换:
- category:类别。表示该轴显示的是不同类。
- value:数据。表示该轴显示的是数值。
// 更改x轴和y轴的角色使之变为横向
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
2. 通用配置
- 标题: title
- 文字样式:textStyle
- 标题边框:borderwidth、borderColor、borderRadius
- 标题位置:left、top、right、bottom
title: {
text: '成绩展示',
textStyle: {
color: '#5470C6'
},
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
left: "50%"
}
- 提示: tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框
- 触发类型:trigger、item、axis
- 触发时机:triggerOn、mouseover、click
- 格式化:formatter:字符串模板、回调函数
tooltip: {
trigger: 'axis',
triggerOn: "click",
// formatter: '{b} 的成绩是 {c}'
formatter: function (arg) {
// console.log(arg);
return arg[0].name + '的分数是:' + arg[0].data
}
}
- 工具按钮: toolbox:ECharts提供的工具栏
- 内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置 五个工具
- 显示工具栏按钮feature 内属性:
saveAslmage、dataView、 restore、 dataZoom、 magicType
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
}
- 图例:legend:用于筛选系列,需要和series配合使用(需要series中有多组统计数据时)
- legend中的data是一个数组
- legend中的data的值需要和series数组中某组数据的name值一致
legend: {
data: ['语文', '数学']
}
3. 折线图
- 标记:最大值,最小值,平均值,标注区间:markPoint、markLine、 markArea
- 线条控制:平滑,风格:smooth、linestyle
- 填充风格:areaStyle
series: [
{
name: 'Sales',
type: 'line',
data: yDateArr,
markPoint: {
data: [
{
type: 'max'
},
{
type: 'min'
}
]
},
markLine: {
data: [
{
type: 'average'
}
]
},
markArea: { // 标注区间
data: [
[
{
xAxis: 'July'
},
{
xAxis: 'August'
}
],
[
{
xAxis: 'October'
},
{
xAxis: 'November'
}
]
]
},
smooth: true, // 平滑
lineStyle: { // 线条风格
color: 'green',
type: 'dashed' // solid/dotted/dashed
},
areaStyle: { // 填充风格
color: 'pink'