echarts双X轴刻度居中
echarts双X轴刻度居中
小伙伴们如果遇到echarts双X轴居中问题，可以参考本文，亲测有效哦
-
页面要实现的效果如下图所示：
-
代码如下图所示：
-
let smxData =
[
“38”, “39”, “39”, “39”, “39”, “39”, “39”,“39”, “40”,“40”, “40”,“40”, “40”, “40”, “40”, “41”, “41”, “41”,“41”, “41”,“41”,“41”,“42”];
let indexData =
[true, true,false, false,false, false,false, false,true, false,false, false,false, false, false, true,false,false,false,false,false,false,true];
let indexData2 = [true,false, false,false, true, false,false,false, false,false, false, true,false,false, false,false,
false,false, true,false, false, false,true];
var option = {
title: {
text: “XXXXX行情走势图”,
x: “center”,
align: “right”,
},
grid: {
bottom: 160,
},
tooltip: {
trigger: “axis”,
axisPointer: {
animation: false,
},
},
dataZoom: [
{
show: false,
realtime: false,
},
],
xAxis: [
{
type: “category”,
position: “bottom”,
//boundaryGap: false,
axisLine: { show: true },
data: [
“1”,
“2”,
“3”,
“4”,
“5”,
“6”,
“7”,
“8”,
“2”,
“3”,
“4”,
“5”,
“6”,
“7”,
“8”,
“2”,
“3”,
“4”,
“5”,
“6”,
“7”,
“8”,
“9”,
],
},
{
type: “category”,
//boundaryGap: false,
position: “bottom”,
data: smxData,
axisLabel: {
margin: 70, /设置坐标轴文字与轴线距离/
align: “center”,
show: true,
interval: function (index, value) {
if (indexData2[index]) {
return value;
}
},
},
axisLine: {
lineStyle: {
width: 1,
},
},
axisTick: {
// inside: true,
interval: function (index, value) {
if (indexData[index]) {
return value;
}
},
length: 60,
},
},
],
yAxis: [
{
type: “value”,
min: 100,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
formatter: function (value, index) {
return value > 1000 ? value / 1000 + “k” : value;
},
},
splitLine: {
show: true,
},
},
],
series: [
{
name: “模拟数据”,
type: “line”,
smooth: true,
symbol: “none”,
sampling: “average”,
itemStyle: {
normal: {
color: “green”,
},
},
markLine: {
silent: true,
animation: false,
symbol: “”,
label: {
normal: { show: false },
},
lineStyle: {
normal: {
color: “#666”,
type: “dotted”,
},
},
data: [
{
yAxis: 920,
},
],
},
data: [
600,
870,
1120,
700,
345,
666,
777,
888,
870,
1120,
700,
345,
666,
777,
888,
870,
1120,
700,
345,
666,
777,
888,
222,
],
},
],
};
学习目标：
echarts图表
1、 封装echarts各类图表
2、 掌握echarts各图表配置信息
学习时间：
提示：这里可以添加计划学习的时间
周一至周五晚上 9:00-9:30