本章主题-坐标轴,讲坐标轴之前必须先了解下直角坐标系
直角坐标系 - grid
- grid {left right top bottom width height} 决定的是由坐标轴形成的矩形的尺寸和位置。
grid = {
//这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。
containLabel: false, //不包含坐标轴标签,
bottom: 0, // 从坐标轴开始算初始位置
}
grid = {
// 这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。
containLabel: true //包含坐标轴标签在内,比如X轴底部有label文字描述,那grid.bottom就是从文字开始位置开始算
}
大部分情况我还是用containLabel=true, 这样基本不用设left top等值了, 如果你设置成false, 那就得设置left 轴文字宽度, bottom轴文字高度。。
<template>
<div id="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
let myChart = null,
grid = {
containLabel: true, //否包含坐标轴的刻度标签。
},
// x轴
xAxis= {
data: ['王启年', '沈重', '郭宝坤', '四顾剑']
},
series = [
{
data: [10, 50, 80, 99],
type: 'bar',
}
],
options = { grid, xAxis, yAxis: {}, series };
~function(){
myChart = echarts.init(this.$refs.chart); //实际情况这里需要等dom加载完了
myChart.setOption(options)
}()
</script>
参考图
接下来正式开始讲坐标轴, echarts中坐标轴分x轴和y轴, 而在x轴y轴上又可以分类目轴与非类目轴, type有4个, 官方解释如下
- 'value' 数值轴,适用于连续数据。
- 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
- 'time' 时间轴,适用于连续的时序数据
- 'log' 对数轴。适用于对数数据。
这里我稍微再解释下
如果xAxis.type设置成value,那么,xAxis.data里面设置的数据无效,因为xAxis.data是为category服务的。
如果没有设置 type,但是设置了 xAxis.data,则认为 type 是 'category'。
如果设置了 type 是 'category',但没有设置 xAxis.data,则 xAxis.data 的内容会自动从 series.data 中获取
轴线与刻度 - axisLine + axisTick
xAxis = {
...
axisLine: { show: false }, //不显示x轴
axisTick: { show: false } //不显示刻度线
}
yAxis = {
...
// axisLine: { show: false } 这个可以不写, y轴线默认不显示,x轴线默认显示
}
参考图
轴名称设置(一般只设置Y轴)
yAxis = {
...
name: '战斗力', //标识y轴数值代表战斗力
nameGap: 20, //轴名称与轴线之间的距离
nameTextStyle: {
color: '#123b92',
fontSize: 16,
fontWeight: 'bold',
}
}
参考图
轴刻度标签 - axisLabel
xAxis = {
...
axisLabel: {
margin: 20, //标签文字与轴线距离
color: '#fff',
fontSize: 14,
padding: [4, 10],
backgroundColor: '#92713D',
interva: 0, //0: 强制显示所有标签, n:隔n个标签显示一个标签
}
}
参考图
分割线 - splitLine
yAxis = {
...
splitLine: { //默认数值轴显示,类目轴不显示。 (所以上面的图只显示y轴分割线)
color: 'rgba(0,0,0,0.4)',
type: 'dashed', //虚线
}
}
参考图
设置坐标轴位置与方向
xAxis = {
show: false,
inverse: true //反向坐标轴。(从左到右 --> 从右到左)。
}
yAxis = [
{
...
position: 'right', //单轴右侧显示
data: ['亚索', '卡特', '蒙多', '阿狸', '妖姬']
}
]
series = [
{
name: '血量',
type: 'bar',
label: {
normal: {
show: true,
position: 'left',
}
},
data: [1500, 1200, 3000, 1200, 1500]
}
],
参考图
设置双Y轴
主要代码如下
xAxis = {
show: false,
type: 'value'
}
yAxis = [
{
type: 'category',
splitLine: 'none',
axisTick: 'none',
axisLine: 'none',
data: ['上山虎', '四顾剑', '苦何', '叶流云', '影子']
},
{
axisTick: 'none',
axisLine: 'none',
data: [7000, 8500, 8900, 8500, 8000]
}
]
series = [
{
type: 'bar',
zlevel: 2,
barWidth: 20,
itemStyle: {
normal: {
color: '#00C0FF', //内图颜色
barBorderRadius: 50
}
},
data: [7000, 8500, 8900, 8500, 8000]
},
{
type: 'bar',
barWidth: 20,
barGap: '-100%', //柱间距离 -100% -> 两个系列的柱子重叠
itemStyle: {
normal: {
color: '#181F44', //底色
barBorderRadius: 50
}
},
data: [10000, 10000, 10000, 10000, 10000]
}
]
参考图
常见的坐标轴设置暂时就写这些吧, 下面期待以久的轻语来了...
最后的轻语
`
儿时凿壁偷了 谁家的光
如今灯下闲读 红袖添香
十年寒窗 不思量自难忘
`
端午节快乐