echart图表折线图

1. var cdata=[
2.     2000.56,
3.     1800,
4.     2239.56,
5.     3239.56,
6.     2239.56
7. ]
9. let lineColor=['#C5E879', '#2DF0DB']
11. let cxdata=[2021,2022,2023,2024,2025]
14. // 增长率数据，正数为增长（↑），负数为下降（↓），实际根据计算得到
15.         // var growthRates = [12.35, -12.29, 12.35, 12.35, 12.35];
16.         var growthRates =  [12.35, -12.29, 12.35, 12.35, 12.35];
17.         // 处理数据，用于标注显示（拼接数值和增长率）
18.         var labelData = cdata.map((val, index) => {
19.           let growthSymbol = growthRates[index] >= 0 ? '↑' : '↓';
20.           let str = "";
21.           if (growthRates[index] >= 0) { // 增长
22.             str = `{value1|${val}人/km²}\n{value2|${Math.abs(growthRates[index])}% ${growthSymbol}}`
23.           } else {
24.             str = `{value1|${val}人/km²}\n{value3|${Math.abs(growthRates[index])}% ${growthSymbol}}`
25.           }
26.           return str;
27.         });
28.         // 颜色渐变
29.         const createGradient = (color1, color2) => {
30.           return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
31.             { offset: 0, color: color1 },
32.             { offset: 1, color: color2 }
33.           ]);
34.         };
36.         // 处理最后一个数据显示圆圈
37.         const processData = (data, markerImage, length) => {
38.           return data.map((value, index) => {
39.             // 检查是否为最后一个数据点
40.             if (index === length - 1) {
41.               return {
42.                 value: value,
43.                 symbol: `image://${markerImage}`,
44.                 symbolSize: [47, 38],
45.                 symbolOffset: [0, 0]
46.               };
47.             }
48.             return value;
49.           });
50.         };
51.         const processDataFormat = processData(cdata, '', cdata.length)
53.         option = {
54.            backgroundColor: '#0c2d55',
55.           title: {
56.             // text: '', // 可根据需求设置标题
57.             // left: 'center'
58.           },
59.           tooltip: {
60.             trigger: 'axis',
61.             axisPointer: {
62.               type: 'shadow',
63.               shadowStyle: {
64.                 color: 'rgba(255, 255, 255, 0.1)'
65.               }
66.             },
67.             backgroundColor: 'rgba(18, 28, 40, 0.9)',
68.             borderColor: 'rgba(255, 255, 255, 0.1)',
69.             borderWidth: 1,
70.             textStyle: {
71.               color: '#E4F3FF'
72.             },
73.             // formatter: function (params) {
74.             //     let item = params[0];
75.             //     let growthSymbol = growthRates[item.dataIndex] >= 0 ? '↑' : '↓';
76.             //     return `${this.cxdata[item.dataIndex]}<br/>${item.seriesName}: ${item.value}人/㎡<br/>增长率: ${Math.abs(growthRates[item.dataIndex])}% ${growthSymbol}`;
77.             // }
78.           },
79.           xAxis: {
80.             type: 'category',
81.             data: cxdata,
82.             axisLabel: {
83.               fontSize: 18,
84.               fontFamily: "Source Han Sans",
85.               color: '#E4F3FF' // 可选：设置字体颜色
86.             }
87.           },
88.           yAxis: {
89.             type: 'value',
90.             axisTick: { show: false },
91.             axisLine: { show: false },
92.             axisLabel: {
93.               fontSize: 16,
94.               fontFamily: "Source Han Sans",
95.               color: '#BCC8D4' // 可选：设置字体颜色
96.             }
97.           },
98.           grid: {
99.             left: '2%',
100.             right: '2%',
101.             bottom: '3%',
102.             containLabel: true
103.           },
104.           series: [
105.             {
106.               name: '青年人口密度',
107.               type: 'line',
108.               data: processDataFormat,
109.               lineStyle: {
110.                 color: createGradient(lineColor[0], lineColor[1]), // 折线颜色，类似示例中的红色
111.               },
112.               symbol: 'circle',  // 隐藏拐点圆
113.               smooth: false,
114.               // symbolSize: 6, // 必须设置大小，确保标签有定位基准
115.               itemStyle: {
116.                 color: 'rgba(76, 175, 80, 0)', // 拐点颜色
117.                 borderWidth: 0
118.               },
119.               label: {
120.                 show: true,
121.                 ignore: true,
122.                 position: 'top', // 标注位置，可根据需求调整为 'bottom' 等
123.                 formatter: function (params) {
124.                   return labelData[params.dataIndex];
125.                 },
126.                 rich: { // 定义文本颜色
127.                   value1: {
128.                     color: '#fff',
129.                     fontSize: 16,
130.                     // marginBottom: 5
131.                   },
132.                   value2: {
133.                     color: '#43CF7C',
134.                     fontSize: 16
135.                   },
136.                   value3: {
137.                     color: '#FF5733',
138.                     fontSize: 16
139.                   },
140.                 },
141.                 lineHeight: 30
142.               },
144.             }
145.           ],
146.         };

复制代码

效果图：

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！