本文详细介绍了如何使用Echarts创建具有多Y轴和多X轴的图表，包括设置不同轴的颜色、刻度、标签等属性，并展示了如何通过`yAxisIndex`和`xAxis`配置实现数据系列与特定轴的对应，以及如何通过`alignTicks`和`inverse`调整轴的对齐和方向。示例代码中包含了实际的Echarts初始化和数据绑定过程。
多Y轴
多Y轴案例
蓝色的线，对应左Y轴。绿色的线，对应右Y轴
代码示例
barTwoYChart () {
let newPromise = new Promise((resolve) => {
resolve()
})
newPromise.then(() => {
// echart 初始化
const chartBox = this.$echarts.init(document.getElementById("two-y"));
const option = {
// 标题
title: {
text: '2018年管线数据利用统计',
textStyle: { //主标题内容样式
color: '#111'
},
},
// x轴
xAxis: {
type: 'category', //x轴类型，默认'category'
//坐标轴 轴线
axisLine: {
show: true,
// 轴线样式
lineStyle: {
color: '#111',
width: 1,
type: 'solid',
},
},
//坐标轴 刻度
axisTick: {
show: true,
},
//坐标轴 标签
axisLabel: {
show: true,
margin: 10, //刻度标签与轴线之间的距离
},
data: ["01", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01"],//内容
},
// Y轴，默认为 yAxis:{}
// 如果为多个Y轴，变为 [{},{}]
yAxis: [
{
name: '管线查询次数（次）', // y轴名称
nameLocation: 'center', // y轴名称相对位置
nameTextStyle: { // 坐标轴名称样式
color: '#111',
},
nameGap: 40, //坐标轴名称与轴线之间的距离
type: 'value', // y轴类型，默认'value'
axisLine: { //坐标轴 轴线
show: true, //是否显示
lineStyle: {
color: '#111',
width: 1,
},
},
axisTick: { //坐标轴 刻度
show: true, //是否显示
},
axisLabel: { //坐标轴 标签
show: true, //是否显示
inside: false, //是否朝内
rotate: 0, //旋转角度
margin: 10, //刻度标签与轴线之间的距离
},
splitLine: { //grid 区域中的分隔线
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
},
{
name: '在线调用次数（次）', //轴名称
nameLocation: 'center', //轴名称相对位置value
nameTextStyle: { //坐标轴名称样式
color: '#111',
},
nameGap: 40, //坐标轴名称与轴线之间的距离
type: 'value',
// alignTicks: true, // 多个Y轴时 对其刻度线
type: 'value',
// inverse: true, //反向Y轴
axisLine: { //坐标轴 轴线
show: true, //是否显示
lineStyle: {
color: '#111',
width: 1,
},
},
axisTick: { //坐标轴 刻度
show: true, //是否显示
},
axisLabel: { //坐标轴 标签
show: true, //是否显示
inside: false, //是否朝内
rotate: 0, //旋转角度
margin: 10, //刻度标签与轴线之间的距离
},
splitLine: { //grid 区域中的分隔线
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
}
],
series: [
{
type: 'line',
lineStyle: {
width: 2
},
smooth: true, // 是否曲线
data: [36, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0],
label: {
normal: {
show: true,
position: 'top', //数值位置
distance: 10, // 数值的距离
fontSize: 14,
formatter: function (params) {
return params.value;
}
}
},
},
{
type: 'line',
yAxisIndex: 1,
lineStyle: {
width: 2
},
smooth: true,
// prettier-ignore
data: [16, 16, 6, 5, 4, 4, 3, 0, 0, 0, 0, 0],
label: {
normal: {
show: true,
position: 'top',
distance: 10, // 数值的距离
fontSize: 14,
formatter: function (params) {
return params.value;
}
}
},
}
]
};
chartBox.setOption(option);
window.addEventListener("resize", function () {
chartBox.resize();
});
})
},
特殊配置项
yAxis
-
当只需要一个Y轴时，Y轴定义为
yAxis: {} -
当需要多个Y轴时，
yAxis: [{},{}] -
alignTicks用来定义两个Y轴是否对其，默认为false不对其-
两者区别为：
-
false为不对其
-
true为对其刻度线
-
-
inverse用来定义是否把Y轴倒过来，默认为false-
区别：
-
false不反向
-
true为反向
-
series
- series用来定义数据，每一个{}，为一条数据
smooth用来定义是否为曲线yAxisIndex用来确定这条数据对应哪条Y轴，默认为yAxis: [{},{}]的第0项
多X轴
多X轴和多Y轴，类似
代码示例
barTwoXChart () {
let newPromise = new Promise((resolve) => {
resolve()
})
newPromise.then(() => {
const chartBox = this.$echarts.init(document.getElementById("two-x"));
const option = {
title: {
text: '双x轴'
},
// x轴的数据
xAxis: [{
type: 'category',
data: ['01', '02', '01', '02', '03', '01', '04', '05', '06', '01', '02', '03'],
position: 'bottom',
offset: 20,
axisTick: {
length: 55, // 刻度线长度
inside: false, // 刻度线朝上 或朝下，默认为false为朝下
lineStyle: { //刻度线样式
color: '#ff9800'
},
interval: function (index, value) {
if (value === '01') {
return value // 根据x轴里面的数据进行判段，当value为01时，才显示刻度线，否则不显示
}
}
}
}, {
position: 'bottom',
offset: 70, // 向下偏移，为了不和第一条x轴重合
//x轴 轴线
axisLine: {
show: false
},
axisLabel: {
inside: true,
},
data: ['20日', '21日', '22日', '23日']
}],
// Y轴，默认为 yAxis:{}
// 如果为多个Y轴，变为 [{},{}]
yAxis: [
{
name: '管线查询次数（次）', // y轴名称
nameLocation: 'center', // y轴名称相对位置
nameTextStyle: { // 坐标轴名称样式
color: '#111',
},
nameGap: 40, //坐标轴名称与轴线之间的距离
type: 'value', // y轴类型，默认'value'
axisLine: { //坐标轴 轴线
show: true, //是否显示
lineStyle: {
color: '#111',
width: 1,
},
},
axisTick: { //坐标轴 刻度
show: true, //是否显示
},
axisLabel: { //坐标轴 标签
show: true, //是否显示
inside: false, //是否朝内
rotate: 0, //旋转角度
margin: 10, //刻度标签与轴线之间的距离
},
splitLine: { //grid 区域中的分隔线
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
},
{
name: '在线调用次数（次）', //轴名称
nameLocation: 'center', //轴名称相对位置value
nameTextStyle: { //坐标轴名称样式
color: '#111',
},
nameGap: 40, //坐标轴名称与轴线之间的距离
type: 'value',
alignTicks: false, // 多个Y轴时 对其刻度线
type: 'value',
inverse: true, //反向Y轴
axisLine: { //坐标轴 轴线
show: true, //是否显示
lineStyle: {
color: '#111',
width: 1,
},
},
axisTick: { //坐标轴 刻度
show: true, //是否显示
},
axisLabel: { //坐标轴 标签
show: true, //是否显示
inside: false, //是否朝内
rotate: 0, //旋转角度
margin: 10, //刻度标签与轴线之间的距离
},
splitLine: { //grid 区域中的分隔线
show: true,
lineStyle: {
color: '#ccc',
width: 1,
},
},
}
],
series: [
{
type: 'line',
lineStyle: {
width: 2
},
smooth: true,
// prettier-ignore
data: [36, 15, 8, 12, 11, 6, 3, 0, 0, 0, 0, 0],
label: {
normal: {
show: true,
position: 'top',
distance: 10, // 数值的距离
fontSize: 14,
formatter: function (params) {
return params.value;
}
}
},
},
{
type: 'line',
yAxisIndex: 1,
lineStyle: {
width: 2
},
smooth: true,
// prettier-ignore
data: [16, 16, 6, 5, 4, 4, 3, 0, 0, 0, 0, 0],
label: {
normal: {
show: true,
position: 'top',
distance: 10, // 数值的距离
fontSize: 14,
formatter: function (params) {
return params.value;
}
}
},
}
]
};
chartBox.setOption(option);
window.addEventListener("resize", function () {
chartBox.resize();
});
})
}
特殊配置项
xAxis
-
xAxis和y轴一样- 当一条X轴时 定义为
xAxis:{} - 多个X轴时 定义为
xAxis: [{},{}]
- 当一条X轴时 定义为
-
interval: function (index, value)- index返回的是索引项
- value返回的是该索引项对应data的X轴名字
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
