vue3 - Echats笔记
一、echarts基本使用
1.1、echarts相关配置(通用)
echarts相关配置
- xAxis:直角坐标系中的X轴
- yAxis:直角坐标系中的Y轴
- series:系列列表。每个系列通过type决定自己的图表类型
//基本格式
let lineEchats = echarts.init(document.getElementById("one"));
lineEchats.setOption({
xAxis: {
//设置类目轴
type:'category',
data: xdata,
},
yAxis: {
//数值轴
type: "value",
},
series: {
data: ydata,
//类型为折线
type: "line",
},
});
vue的格式
<template>
<div id="one"></div>
</template>
<script>
//引用echats
import * as echarts from "echarts";
//使用Mounted生命周期
import { onMounted } from "@vue/runtime-core";
export default {
setup() {
onMounted(() => {
//X轴数据
let xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
//y轴数据
let ydata = [150, 230, 224, 218, 135, 147, 260];
//决定图表在哪个位置呈现
let lineEchats = echarts.init(document.getElementById("one"));
lineEchats.setOption({
xAxis: {
//类目轴
type:'category',
data: xdata,
},
yAxis: {
type: "value",
},
series: {
data: ydata,
type: "line",
},
});
});
},
};
</script>
<style>
//必须给div一个固定的高才会显示图片
#one {
height: 500px;
border: 1px solid red;
}
</style>
效果展示
1.1.1、标题(title)
只列举常用的几个
- 文字样式
- textStyle
- color //文字颜色
- fontSize //文字大小
- textStyle
- 标题边框
- borderWidth //边框
- borderColor //边框颜色
- borderRadius //圆角设置
- 标题位置
- left
- top
- right
- bottom
标题这里注意 left 跟 right 不能同时使用,同时使用 left优先级更高。
同理:top 跟 bottom 也不能同时使用,同时使用top 优先级更高。
- 文字样式
lineEchats.setOption({
title: {
//标题名字
text:'测试',
textStyle:{
//文本颜色
color:'red',
//字体大小
fontSize:25
}
},
xAxis: {},
yAxis: {},
series:{}
})
效果
- 标题边框
lineEchats.setOption({
title: {
//标题名字
text:'测试',
//边框粗细
borderWidth: 5,
//边框颜色
borderColor:'blue',
//边框圆角
borderRadius:5
},
xAxis: {},
yAxis: {},
series:{}
})
效果
- 标题位置
lineEchats.setOption({
title: {
//标题名字
text:'测试',
top:10,
// left:20,
// bottom:100
right:10,
},
xAxis: {},
yAxis: {},
series:{}
})
效果
1.1.2、提示框(tooltip)
tooltip:用于配置鼠标滑过或点击图标时的显示框
-
触发类型:trigger
- item
- axis
-
触发时机:triggerOn
- mousemove
- click
-
格式化:formatter
- 字符串模板
- 回调函数
- 触发类型
lineEchats.setOption({
title: {},
tooltip: {
trigger: "item",
// trigger:"axis"
},
xAxis: {},
yAxis: {},
series:{}
})
item效果
axis效果
item和axis区别
item 只能在竖轴图表内显示信息
axis 只要不超过竖轴都可以显示信息
- 触发时机
lineEchats.setOption({
title: {},
tooltip: {
triggerOn:'click',
//triggerOn:'mousemove',
},
xAxis: {},
yAxis: {},
series:{}
})
click效果
mousemove效果
- 格式化
字符串模板
lineEchats.setOption({
title: {},
tooltip: {
formatter:"tides"
},
xAxis: {},
yAxis: {},
series:{}
})
效果
发现所有的都显示我们设置的值
这里可以使用官网的模板规范我们展示的值
- 折线(区域)图、柱状(条形)图、K线图 :
{a}
(系列名称),{b}
(类目值),{c}
(数值),{d}
(无) - 散点图(气泡)图 :
{a}
(系列名称),{b}
(数据名称),{c}
(数值数组),{d}
(无) - 地图 :
{a}
(系列名称),{b}
(区域名称),{c}
(合并数值),{d}
(无) - 饼图、仪表盘、漏斗图:
{a}
(系列名称),{b}
(数据项名称),{c}
(数值),{d}
(百分比)
lineEchats.setOption({
title: {},
tooltip: {
formatter:'{b}的值是:{c}'
},
xAxis: {},
yAxis: {},
series:{}
})
效果
回调函数
lineEchats.setOption({
title: {},
tooltip: {
trigger:"axis",
triggerOn:'click',
formatter:function(arg){
console.log(arg);
}
},
xAxis: {},
yAxis: {},
series:{}
})
我们看看点击的时候会输出什么
我们可以看到arg中包含数值
那我们就可以修改代码自定义输出格式
lineEchats.setOption({
title: {},
tooltip: {
trigger:"axis",
triggerOn:'click',
formatter:function(arg){
return arg[0].name + "我想要的格式是:" + arg[0].value;
}
},
xAxis: {},
yAxis: {},
series:{}
})
效果:
1.1.3、工具按钮(toolbox)
toolbox :Echats提供的工具栏
在使用以下功能之前,我们需要给toolbox添加一个feature节点
-
导出图片
- saveAsImage
-
数据视图
- dataView
-
动态类型切换
- magicType
-
数据区域缩放
- dataZoo
-
重置
- restore
- 导出图片(saveAsImage)
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {
feature:{
saveAsImage:{}
}
}
xAxis: {},
yAxis: {},
series:{}
})
效果
- 数据视图(dataView)
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {
feature:{
saveAsImage:{},
//数据视图
dataView:{}
}
}
xAxis: {},
yAxis: {},
series:{}
})
效果
我们可以看到 dataView 可以将图表转换成列表形式,可以自定义修改数据。
- 重置(restore)
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {
feature:{
saveAsImage:{},
dataView:{},
//重置
restore:{}
}
}
xAxis: {},
yAxis: {},
series:{}
})
效果
- 数据区域缩放(dataZoom)
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {
feature:{
saveAsImage:{},
dataView:{},
restore:{},
//数据区域缩放
dataZoom:{}
}
}
xAxis: {},
yAxis: {},
series:{}
})
效果
选择区域放大数据
- 动态类型切换(magicType)
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {
feature:{
saveAsImage:{},
dataView:{},
restore:{},
dataZoom:{},
magicType:{
type:['bar','line']
}
}
}
xAxis: {},
yAxis: {},
series:{}
})
效果
1.1.4、图例(legend)
legend:图例,用于筛选系列,需要和series配合使用
legend中的data是一个数组
legend中的data的值需要和series数组中的某组数据的name值一致
let xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let ydata1 = [150, 230, 224, 218, 135, 147, 260];
let ydata2 = [10, 20, 24, 18, 13, 14, 20];
lineEchats.setOption({
title: {},
tooltip: {},
toolbox: {},
legend:{
data:['1月总量','2月总量']
}
xAxis: {
xAxis:xdata
},
yAxis: {
type:'value'
},
series:[{
name: "1月总量",
type:'bar',
data:ydata1,
},{
name: "2月总量",
type:'bar',
data:ydata2,
}]
})
效果