echarts带时间轴的折线图。

最新推荐文章于 2024-09-12 04:57:57 发布
深山苦练二十年
最新推荐文章于 2024-09-12 04:57:57 发布
阅读量1k
点赞数
文章标签： echarts 前端
本文链接：https://blog.csdn.net/qq_37837478/article/details/132827498
版权
文章介绍了如何使用ECharts库在网页上创建一个动态时间轴，展示分能源品种的碳排放数据，包括煤炭、石油、天然气等不同行业的数据变化。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
代码：
let echartData = dataxj4['分能源品种碳排放'];
            let timeLineData = Array.from(new Set(echartData.map(item => item['年份'])))
            let xNameData = Array.from(new Set(echartData.map(item => item['行业'])))
            let legendData = ['合计','煤炭','石油','天然气','过程'];
		    let myChart = echarts.init(document.getElementById('right2'));
            //option
            let option = {
                baseOption: {
                    timeline: {
                        data: timeLineData,
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: 5000,
                        show: true,
                        left: '10%',
                        right: '12.5%',
                        bottom: '0%',
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#ddd',
                                    // rotate: 45

                                },
                                interval: 0,
                                // fontSize: 12,
                                padding: [0, 0, 0, 0],
                                // rotate: 45
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                borderColor: '#2998ff',
                                borderWidth: 1,
                            }
                        },
                        symbolSize: 10,
                        lineStyle: {
                            show: true, //false 不显示轴线
                            color: '#2998ff',
                        },
                        checkpointStyle: {
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: "#2998ff",
                                borderColor: "#2998ff"
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    grid: {
                        top: 80
                    }
                },
                options: [],
            }
            //数据push
            for (let i = 0; i < timeLineData.length; i++) {
                let arr1 = [], arr2 = [], arr3 = [], arr4 = [], arr5 = [];
                echartData.forEach(item => {
                    if (item['年份'] == timeLineData[i]) {
                        arr1.push(item[legendData[0]])
                        arr2.push(item[legendData[1]])
                        arr3.push(item[legendData[2]])
                        arr4.push(item[legendData[3]])
                        arr5.push(item[legendData[4]])
                    }
                })

                option.options.push({
                    title: {
                        show: true,
                        // text: '测试'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },

                    legend: {
                      show: true,
                      data: legendData
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        data: xNameData,
                        axisLabel: {
                            formatter: '{value} ',
                            show: true,
                            textStyle: {
                                color: "rgba(225, 225, 225,1)",
                                // fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '数量',
                        // max: 20,
                        nameTextStyle: {
                            color: "#fff",
                        },

                        axisLabel: {
                            formatter: '{value} ',
                            show: true,
                            textStyle: {
                                color: "#fff",
                                // fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {
                            name: legendData[0],
                            type: 'line',
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: '#4E66B2',
                                    barBorderRadius: 0,
                                    label: {
                                        show: false,
                                    }
                                }
                            },
                            // 添加标点
                            // markPoint: {
                            //     label: {
                            //         normal: {
                            //             show: true,
                            //             align: 'center',
                            //             color: 'WHITE',
                            //             fontWeight: 100,
                            //             formatter: '{b}{c}'
                            //         }
                            //     },
                            //     itemStyle: {
                            //         normal: {
                            //             color: {
                            //                 type: 'radial',
                            //                 x: 0.4,
                            //                 y: 0.4,
                            //                 r: 0.9,
                            //                 colorStops: [{
                            //                     offset: 0,
                            //                     color: '#4E66B2'
                            //                 }, {
                            //                     offset: 1,
                            //                     color: '#4E66B2'
                            //                 }],
                            //                 globalCoord: false
                            //             },
                            //             shadowColor: 'rgba(0, 0, 0, 0.5)',
                            //             shadowBlur: 2,
                            //         }
                            //     },
                            //     data: [
                            //         { name: '获奖', value: itemobj['获奖'], coord: [i, itemobj['获奖']] },
                            //     ]
                            // },
                            data: arr1
                        },
                        {
                            name: legendData[1],
                            type: "line",
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: "rgba(252,230,48,1)",
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            return p.value > 0 ? (p.value) : '';
                                        }
                                    }
                                }
                            },
                            data: arr2
                        },
                        {
                            name: legendData[2],
                            type: "line",
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: "#66FF33",
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            return p.value > 0 ? (p.value) : '';
                                        }
                                    }
                                }
                            },
                            data: arr3
                        },
                        {
                            name: legendData[3],
                            type: "line",
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: "#3366FF",
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            return p.value > 0 ? (p.value) : '';
                                        }
                                    }
                                }
                            },
                            data: arr4
                        },
                        {
                            name: legendData[4],
                            type: "line",
                            symbolSize: 10,
                            symbol: 'circle',
                            itemStyle: {
                                normal: {
                                    color: "#CC00FF",
                                    barBorderRadius: 0,
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            return p.value > 0 ? (p.value) : '';
                                        }
                                    }
                                }
                            },
                            data: arr5
                        },
                    ]
                })
            }
            myChart.setOption(option)