let option = {
color: ["#07BFE4", "#39FFAB", "#6C00FF",], //图例颜色
tooltip: { // 鼠标放上去 提示框显示横坐标的数据
trigger: "axis",
},
legend: [ // 图例可以为数组 或者 对象
{
icon: "roundRect", // 图例的形状
left: "right", // 图例的左右位置
top: "bottom", // 图例的上下位置
data: [], // 图例的数据内容 和 serise 中的name 一一对应
textStyle: { // 图例文字样式设置
color: "#fff", // 图例文字颜色
},
itemWidth: 6, // 图例图形 宽度
itemHeight: 15, // 图例图形 高度
itemGap: 15, // 图例之间的间距
}
],
grid: { // 图表位置定位
top: "20%",
left: "0%",
right: "0%",
bottom: "0%",
containLabel: true, // 定位区域是否包含刻度标签
},
xAxis: {
type: "category",
boundaryGap: ["1", "1"],
data: [],
axisTick: { x坐标轴 刻度 设置
color: "#017BB1",
lineStyle: {
width: 0,
},
},
axisLine: { x坐标轴 轴线 设置
lineStyle: {
color: "#017BB1", //更改坐标轴颜色
},
},
},
yAxis: [{
type: "value",
axisLine: {
lineStyle: {
color: "#017BB1", //更改坐标轴颜色
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#07DBFF",
},
},
},
splitLine: { y 轴 网格线 设置
lineStyle: {
color: "#017BB1",
type: "dashed", //设置网格线类型 dotted:虚线 solid:实线
},
show: true, //隐藏或显示
},
},],
series: [
{
name: , //名字与图例对应
type: "line",
data: [], //数据的数组
showSymbol: true, // 是否显示线上的圆点
symbol: 'circle', //设定为实心点
symbolSize: 10, //设定实心点的大小
areaStyle: [ // 区域填充颜色
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item + "80", // 0% 处的颜色
},
{
offset: 1,
color: "#00000000", // 100% 处的颜色
},
],
},
],
lineStyle: {
color: [], // 线的颜色
},
yAxisIndex: 0 // 坐标轴下标 多个y坐标轴时使用
}
],