echart图表折线图
var cdata=[2000.56,
1800,
2239.56,
3239.56,
2239.56
]
let lineColor=['#C5E879', '#2DF0DB']
let cxdata=
// 增长率数据，正数为增长（↑），负数为下降（↓），实际根据计算得到
// var growthRates = ;
var growthRates =;
// 处理数据，用于标注显示（拼接数值和增长率）
var labelData = cdata.map((val, index) => {
let growthSymbol = growthRates >= 0 ? '↑' : '↓';
let str = "";
if (growthRates >= 0) { // 增长
str = `{value1|${val}人/km²}\n{value2|${Math.abs(growthRates)}% ${growthSymbol}}`
} else {
str = `{value1|${val}人/km²}\n{value3|${Math.abs(growthRates)}% ${growthSymbol}}`
}
return str;
});
// 颜色渐变
const createGradient = (color1, color2) => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: color1 },
{ offset: 1, color: color2 }
]);
};
// 处理最后一个数据显示圆圈
const processData = (data, markerImage, length) => {
return data.map((value, index) => {
// 检查是否为最后一个数据点
if (index === length - 1) {
return {
value: value,
symbol: `image://${markerImage}`,
symbolSize: ,
symbolOffset:
};
}
return value;
});
};
const processDataFormat = processData(cdata, '', cdata.length)
option = {
backgroundColor: '#0c2d55',
title: {
// text: '', // 可根据需求设置标题
// left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
backgroundColor: 'rgba(18, 28, 40, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 1,
textStyle: {
color: '#E4F3FF'
},
// formatter: function (params) {
// let item = params;
// let growthSymbol = growthRates >= 0 ? '↑' : '↓';
// return `${this.cxdata}<br/>${item.seriesName}: ${item.value}人/㎡<br/>增长率: ${Math.abs(growthRates)}% ${growthSymbol}`;
// }
},
xAxis: {
type: 'category',
data: cxdata,
axisLabel: {
fontSize: 18,
fontFamily: "Source Han Sans",
color: '#E4F3FF' // 可选：设置字体颜色
}
},
yAxis: {
type: 'value',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
fontSize: 16,
fontFamily: "Source Han Sans",
color: '#BCC8D4' // 可选：设置字体颜色
}
},
grid: {
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
series: [
{
name: '青年人口密度',
type: 'line',
data: processDataFormat,
lineStyle: {
color: createGradient(lineColor, lineColor), // 折线颜色，类似示例中的红色
},
symbol: 'circle',// 隐藏拐点圆
smooth: false,
// symbolSize: 6, // 必须设置大小，确保标签有定位基准
itemStyle: {
color: 'rgba(76, 175, 80, 0)', // 拐点颜色
borderWidth: 0
},
label: {
show: true,
ignore: true,
position: 'top', // 标注位置，可根据需求调整为 'bottom' 等
formatter: function (params) {
return labelData;
},
rich: { // 定义文本颜色
value1: {
color: '#fff',
fontSize: 16,
// marginBottom: 5
},
value2: {
color: '#43CF7C',
fontSize: 16
},
value3: {
color: '#FF5733',
fontSize: 16
},
},
lineHeight: 30
},
}
],
};效果图：
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]