echarts渐变色平滑折线图,端点虚线标注
echarts随意一个示例代码
直接点击上方链接↑↑↑将此段代码↓↓↓放到echarts的示例代码编辑框里:
let dataList5 = {
total: "123",
list: [
{ name: "00:00", value: 333, value1: 123 },
{ name: "02:00", value: 144, value1: 23 },
{ name: "04:00", value: 444, value1: 13 },
{ name: "06:00", value: 244, value1: 143 },
{ name: "08:00", value: 555, value1: 173 },
{ name: "10:00", value: 777, value1: 113 },
{ name: "12:00", value: 600, value1: 183 },
{ name: "14:00", value: 800, value1: 123 },
{ name: "16:00", value1: 123 },
{ name: "18:00", value1: 1213 },
{ name: "20:00", value1: 123 },
{ name: "24:00", value1: 123 },
],
};
const xList = dataList5.list.map((item) => {
return item.name;
});
this.xList5 = xList
const vList = dataList5.list.filter((item) => {
if (item.value !== undefined) {
let it = {};
it.value = item.value;
return it;
}
});
vList[vList.length - 1].itemStyle = {
// symbol: "../../../assets/imgs/echarts/line_chart_point.png",
color: "#FAFF0F",
shadowBlur: 5,
shadowColor: "#FAFF0F",
borderColor: "#fff",
borderWidth: 3,
};
vList[vList.length - 1].symbol = "circle"
vList[vList.length - 1].symbolSize = 20
const v1List = dataList5.list.map((item) => {
return item.value1;
});
option = {
title: {
text: "",
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
top: "11%",
containLabel: true,
},
legend: {
data: [
{
name: "今天 ",
},
"昨天 ",
],
show: true,
right: 117,
itemWidth: 80,
itemHeight: 15,
textStyle: {
color: "#9DCFD6",
fontSize: 40,
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: xList,
offset: 20,
axisLabel: {
interval:0,
color: "#9A9A9A", //刻度颜色
fontSize: 40, //刻度大小
},
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "rgba(0, 255, 255, 0.58)",
width: 1,
type: "solid",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#03272C",
},
},
},
yAxis: {
type: "value",
axisTick: { show: false },
axisLabel: {
color: "#9A9A9A", //刻度颜色
fontSize: 40, //刻度大小
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#03272C",
},
},
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(13, 118, 93, 0.5)",
borderColor: "#fff",
textStyle: { color: "#fff" },
axisPointer: {
type: "none",
shadowStyle: {
color: "#0953482b",
},
},
},
series: [
{
name: "今天 ",
type: "line",
smooth: true,
z: 2,
areaStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#faff0f60" },
{ offset: 0.16, color: "#0bffff70" },
{ offset: 1, color: "#0bffff70" },
]),
opacity: 0.2,
},
itemStyle: {
color: "rgba(141, 253, 239, 1)",
width: 12,
},
markLine: {
symbol: ['none', 'none'],
label: { show: false },
lineStyle: {width: 2, color: '#FAFF0F' },
data: [{ xAxis: vList.length - 1 }]
},
lineStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#0BFFFF" },
{ offset: 0.8, color: "#0BFFFF" },
{ offset: 1, color: "#FAFF0F" },
],
false
),
width: 8,
opacity: 1,
},
symbol: "circle",
symbolSize: 10,
data: vList,
},
{
name: "昨天 ",
type: "line",
smooth: true,
z: 1,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 1, color: "#285513" },
{ offset: 0, color: "#0000" },
]),
opacity: 0.2,
},
itemStyle: {
color: "#382F00",
width: 12,
},
symbol: "none",
lineStyle: {
color: "#382F00",
width: 8,
opacity: 1,
},
data: v1List,
},
],
};