Vue ECharts直角坐标系配置详细讲解
更新时间：2022年12月15日 15:07:08 作者：爱学习de测试小白
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库
前言
本篇来学习下直角坐标系的常用配置
直角坐标系
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图
常用配置
网格
grid：是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
var option = {
grid: {
show: true, // 显示grid
borderWidth: 10, // grid的边框宽度
borderColor: 'red', // grid的边框颜色
left: 100, // grid的位置
top: 100,
width: 300, // grid的大小
height: 150
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>直角坐标系常用配置-grid</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台']
var yDataArr = [88, 92, 63, 77, 94, 80]
var option = {
grid: { // 坐标轴容器
show: true, // 是否可见
borderWidth: 3, // 边框的宽度
borderColor: 'green', // 边框的颜色
left: 100, // 边框的位置 左边距
top: 120, // 顶部距离
width: 500, // 边框宽度
height: 250 // 边框高度
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
data: [
{
type: 'max', name: '最大值'
}, {
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60, // 数值旋转角度
position: 'top' // 顶部显示数值
},
barWidth: '30%', // 柱宽度
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
坐标轴
axis：坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
坐标轴类型 type
- value : 数值轴, 自动会从目标数据中读取数据
- category : 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
- xAxis : 可取值为 top 或者 bottom
- yAxis : 可取值为 left 或者 right
var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>直角坐标系常用配置-axis</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台']
var yDataArr = [88, 92, 63, 77, 94, 80]
var option = {
grid: {
show: true,
borderColor: 'red',
},
xAxis: {
type: 'category',
data: xDataArr,
position: 'top' // 控制坐标轴的位置 可取值为 top 或者 bottom
},
yAxis: {
type: 'value',
position: 'right' // 控制坐标轴的位置 可取值为 left 或者 right
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
data: [
{
type: 'max', name: '最大值'
}, {
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60,
position: 'top'
},
barWidth: '30%',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
区域缩放
dataZoom ：用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有
区域缩放类型 type
- slider : 滑块
- inside : 内置, 依靠鼠标滚轮或者双指缩放
产生作用的轴
- xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
- yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
指明初始状态的缩放情况
- start : 数据窗口范围的起始百分比
- end : 数据窗口范围的结束百分比
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0
},
{
type: 'slider',
yAxisIndex: 0,
start: 0,
end: 80
}
]
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>直角坐标系常用配置-dateZoom</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.getElementById("app"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台']
var yDataArr = [88, 100, 63, 77, 94, 80]
var option = {
dataZoom: [ // 控制区域缩放效果的实现
{
type: 'slider', // 缩放的类型 slide代表滑块 inside代表依靠鼠标滚轮
// type: 'inside'
xAxisIndex: 0 // 控制的是哪个x轴(多个x轴情况,一般写0即可)
},
{
type: 'slider',
yAxisIndex: 0,
start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
end: 95 // 渲染完成后, 数据筛选的结束值, 百分比
}
],
toolbox: {
feature: {
dataZoom: {}
}
},
grid: {
show: true,
borderColor: 'red',
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
data: [
{
type: 'max', name: '最大值'
}, {
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60,
position: 'top'
},
barWidth: '30%',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
到此这篇关于Vue ECharts直角坐标系配置详细讲解的文章就介绍到这了,更多相关Vue ECharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue-cli3启动服务如何自动打开浏览器配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue @scroll监听滚动条事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue的数据劫持以及操作数组的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在开发过程中,我们经常需要将表格数据导出为 Excel 文件,大多数情况下,由后端处理即可,但是当数据量不大、需要快速响应用户操作、或者数据已经在前端进行处理和展示时,前端该如何实现呢,本文将介绍两种方法,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue3中使用ref标签对组件进行操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue系列：通过vue-router如何传递参数示例，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
最新评论