Echarts 车流量统计图：动态切换年份数据，点击年份跳转

this.define("car", function () {\n o2.load(echartUrl, function () {\n // 基于准备好的dom，初始化echarts实例\n var myCar = echarts.init(document.getElementById('car'));\n \n var years = ['2020', '2021', '2022', '2023'];\n var data = [\n {\n year: '2020',\n in: [6609, 7502, 7948, 6589, 7403, 7086, 4547],\n out: [6541, 7430, 7860, 6426, 6998, 6970, 4357]\n },\n {\n year: '2021',\n in: [7000, 8000, 8500, 7200, 7900, 7600, 4900],\n out: [6900, 7900, 8300, 7100, 7800, 7800, 4800]\n },\n {\n year: '2022',\n in: [7200, 8200, 8700, 7400, 8100, 7800, 5100],\n out: [7100, 8100, 8500, 7300, 8000, 8000, 5000]\n },\n {\n year: '2023',\n in: [7500, 8500, 9000, 7700, 8400, 8100, 5400],\n out: [7400, 8400, 8800, 7600, 8300, 8300, 5300]\n }\n ];\n\n var currentYearIndex = 0;\n\n function updateChart(yearIndex) {\n var yearData = data[yearIndex];\n var options = {\n title: {\n text: "车流量统计",\n left: 'right',\n textStyle: {\n color: '#fff'\n }\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'shadow' },\n },\n legend: {\n x: 'center',\n y: '0',\n icon: 'circle',\n itemGap: 8,\n textStyle: {\n color: 'rgba(255,255,255,.5)',\n fontSize: 16\n },\n itemWidth: 10,\n itemHeight: 10,\n data: ['入场车流量', '出场车流量', years[yearIndex]]\n },\n grid: {\n left: '0',\n top: '30',\n right: '15',\n bottom: '0',\n containLabel: true\n },\n xAxis: {\n type: 'category',\n data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],\n axisLine: { show: false },\n axisLabel: {\n textStyle: {\n color: 'rgba(255,255,255,.6)',\n fontSize: 14\n }\n },\n },\n yAxis: {\n type: 'value',\n splitNumber: 4,\n axisLine: { show: false },\n axisTick: { show: false },\n splitLine: {\n show: true,\n lineStyle: {\n color: 'rgba(255,255,255,0.05)'\n }\n },\n axisLabel: {\n textStyle: {\n color: 'rgba(255,255,255,.6)',\n fontSize: 14\n },\n },\n },\n series: [\n {\n name: '入场车流量',\n type: 'bar',\n barWidth: '15%',\n itemStyle: {\n normal: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#8bd46e'\n }, {\n offset: 1,\n color: '#03b48e'\n }]),\n barBorderRadius: 11,\n }\n },\n data: yearData.in\n },\n {\n name: '出场车流量',\n type: 'bar',\n barWidth: '15%',\n itemStyle: {\n normal: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#3893e5'\n }, {\n offset: 1,\n color: '#248ff7'\n }]),\n barBorderRadius: 11,\n }\n },\n data: yearData.out\n }\n ]\n };\n myCar.setOption(options);\n }\n\n updateChart(currentYearIndex);\n\n myCar.on('legendselectchanged', function (params) {\n var selected = params.selected;\n var selectedYear = Object.keys(selected)[0];\n currentYearIndex = years.indexOf(selectedYear);\n updateChart(currentYearIndex);\n });\n\n window.addEventListener("resize", function () {\n myCar.resize();\n });\n }.bind(this));\n})