在资料上找到类似的,如下:
echarts图表背景色
option = {
grid: {//设置图表四周留白间距
top: '2%',
right: '2%',
bottom: '4%',
left: '4%'
},
xAxis: {
type: 'category',
boundaryGap: false,//设置x轴两边的留白
axisTick: { //x轴刻度尺
show: false
},
axisLine: {//x轴线条颜色
lineStyle: {
color: '#999'
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
max: 1400,//最大刻度值
interval: 100,//刻度值间隔值
splitLine: {//网格线
show: false, //关闭网格线
// 或者
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed' //网格线颜色
},
},
axisLine: {//y轴线条颜色
show: true,
lineStyle: {
color: '#999'
}
},
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,//面积图改成弧形状
lineStyle: {
width: 1,//外边线宽度
color: 'red'//外边线颜色
},
showSymbol: false,//去除面积图节点圆
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(237,66,100, 0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(234,174,10, 1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};
在许继项目红外传感器模块中使用自己编写的:
option = {
title: {
text: '单位:度',
textStyle: {
fontSize: 14, // 标题大小
},
// left: 'center', // 标题位置
},
grid: {//设置图表四周留白间距
top: '10%',
right: '6%',
bottom: '12%',
left: '6%'
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,//设置x轴两边的留白
axisTick: { //x轴刻度尺
show: false
},
axisLine: {//x轴线条颜色
lineStyle: {
color: '#2B6CB3'
}
},
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
},
yAxis: {
type: 'value',
max: 100,//最大刻度值
interval: 20,//刻度值间隔值
splitLine: {//网格线
show: true, //关闭网格线
// 或者
lineStyle: {
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
color: '#2B6CB3' //网格线颜色
},
},
axisLine: {//y轴线条颜色
show: false,
// lineStyle: {
// color: '#999'
// }
},
// axisLine: {//y轴线的配置
// show: true,//是否展示
// lineStyle: {
// color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
// width: 1,//y轴线的宽度
// type: "solid"//y轴线为实线
// },
// }
},
series: [{
data: [1, 10, 100, 20, 15, 90, 23, 10, 20, 40],
type: 'line',
// smooth: true,//面积图改成弧形状
lineStyle: {
width: 1,//外边线宽度
color: '#00F9DF'//外边线颜色
},
// showSymbol: false,//去除面积图节点圆
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0,249,223,1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,135,185,0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};无渐变的:
option = {
title: {
text: '单位:度'
},
grid: {
left: '1%',
right: '5%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
},
yAxis: {
type: 'value'
},
series: [
{
data: [0, 20, 40, 60, 80, 100],
type: 'line'
}
]
};EchartsModule模块(使用):文章来源：https://www.toymoban.com/news/detail-542475.html
/**
* 红外传感器模块监测 -- 图表
* @author syh
*/
import * as echarts from 'echarts';
import { useEffect } from "react";
import { EchartsBox } from './style';
type EChartsOption = echarts.EChartsOption;
const EchartsModule = () => {
useEffect(() => {
const chartDom = document.getElementById('main')!;
let myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
title: {
text: '单位:度',
textStyle: {
fontSize: 14, // 标题大小
},
// left: 'center', // 标题位置
},
grid: {//设置图表四周留白间距
top: '10%',
right: '6%',
bottom: '12%',
left: '6%'
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,//设置x轴两边的留白
axisTick: { //x轴刻度尺
show: false
},
axisLine: {//x轴线条颜色
lineStyle: {
color: '#2B6CB3'
}
},
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
},
yAxis: {
type: 'value',
max: 100,//最大刻度值
interval: 20,//刻度值间隔值
splitLine: {//网格线
show: true, //关闭网格线
// 或者
lineStyle: {
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
color: '#2B6CB3' //网格线颜色
},
},
axisLine: {//y轴线条颜色
show: false,
// lineStyle: {
// color: '#999'
// }
},
// axisLine: {//y轴线的配置
// show: true,//是否展示
// lineStyle: {
// color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
// width: 1,//y轴线的宽度
// type: "solid"//y轴线为实线
// },
// }
},
series: [{
data: [1, 10, 100, 20, 15, 90, 23, 10, 20, 40],
type: 'line',
// smooth: true,//面积图改成弧形状
lineStyle: {
width: 1,//外边线宽度
color: '#00F9DF'//外边线颜色
},
// showSymbol: false,//去除面积图节点圆
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0,249,223,1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,135,185,0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};
option && myChart.setOption(option);
return () => {
}
}, [])
return <EchartsBox>
<div id="main" className="echarts_style"></div>
</EchartsBox>
}
export default EchartsModule;效果图:文章来源地址https://www.toymoban.com/news/detail-542475.html
到了这里，关于Echarts 折线图背景渐变色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[echarts] 折线图+柱状图，多 Y 轴](https://imgs.yssmx.com/Uploads/2024/02/732804-1.png)
