直角坐标系的常用配置
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了直角坐标系的常用配置相关的知识，希望对你有一定的参考价值。
直角坐标系图表：柱状图、折线图、散点图
1.网格grid
grid用来控制直角坐标系的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
显示grid show
grid的边框 borderWidth、borderColor
grid的位置 left、top、right、bottom
grid的大小 width、height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
var yDataArr = [88, 45, 48, 89, 99, 77]
var option = {
grid: {
show: true,
borderWidth: 5,
borderColor: 'yellow',
left: 120,
top: 120,
width: 300,
height: 200,
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
data: yDataArr
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
2.坐标轴axis
坐标轴类型 type
value:数值轴，会自动从series里面读取相应的数据
category:类目轴，该类型必须通过data设置类目数据
显示位置 position
xAxis: 可取值为top或bottom
yAxis: 可取值为left或right
//其余代码和上一例一样
var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
},
series: [{
name: '语文',
type: 'bar',
data: yDataArr
}]
}
3.区域缩放dataZoom
dataZoom通过区域缩放对数据进行过滤，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
类型type
slider 滑块
inside 内置，依靠鼠标滚轮或双指缩放
指明产生作用的轴
xAxisIndex:设置缩放组件控制的是哪个x轴，一般写0
yAxisIndex:设置缩放组件控制的是哪个y轴，一般写0
指明初始状态的缩放情况
start: 数据窗口范围的起始百分比
end: 数据窗口范围的结束百分比
//其它代码和上上例一样
var option = {
dataZoom: [
{
type: 'slider',
xAxisIndex: 0
},
{
type: 'slider',
yAxisIndex: 0,
start: 20,
end: 80,
}
],
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
data: yDataArr
}]
}
以上是关于直角坐标系的常用配置的主要内容，如果未能解决你的问题，请参考以下文章
OpenCV的图像直角坐标系转极坐标系的函数warpPolar()详解,并附自己写的实现直角坐标系转极坐标系的MATLAB代码