//鼠标滑过数据条,有提示框
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "cross"
}
},
//缩放
dataZoom: [
{
type: "slider",
height: 35, //滚动条高度
start: 0, //滚动条开始位置(共100等份)
end: 100, //结束位置(共100等份)
bottom: 16
},
{
type: "inside",
start: 90,
end: 100
}
],
//ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 offset 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。
xAxis: {
// offset: 3, // 绘制区到轴线的像素距离
offset: 0,
type: "category",
boundaryGap: false,
data: newCollectionTime,
// min: startTime,//最小值
// max: endTime,//设置最大值
// splitNumber: 4,//分割几段
position: "bottom",
scale: true,
//刻度标签
axisLabel: {
textStyle: {
color: "#000",
padding: [0, 64, 0, 30]
}
},
axisTick: {//坐标轴刻度
show: true
}
},
splitLine: {
show: true,
lineStyle: {
color: isDark.value == true || isBlue.value == true ? "rgba(250,250,250,0.1)" : "#000000",
width: 1
}
},
yAxis: echartType.map(k => {
return {
// offset: 20,
nameTextStyle: {
color: k.color
},
// animation: false,
type: "value",
//name: k.unit,
position: "left",
// offset: k.offset,
scale: true,//Y轴大小自适应,比如此段数据最小是100,则Y轴最小值就是100而不是0
//分割线
splitLine: {
show: true,
lineStyle: { // y轴分割线类型
color: isBlue.value == true ? "rgba(250,250,250,0.1)" : "#000000",
width: 1
}
},
axisLine: {// 是否显示坐标线
show: true,//表示y轴显示
lineStyle: {//控制y轴的线条 有颜色 类型 宽 阴影等
color: 'pink', // 坐标轴线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点
}
},
axisLabel: {//坐标轴的刻度值
// formatter: '{value}',
show: true,
textStyle: {
color: "#000"//刻度数字颜色
},
rotate: 0
}
};
}),
Echars折线图基础
最新推荐文章于 2025-05-03 09:07:35 发布