柱状图
function (data, params) { const myChart = this.myChart; const twoYearData = [17, 45, 4, 34, 23, 54] const threeYearData = [11, 35, 9, 24, 12, 50] const twoYearBarColor = { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#00F8FF' }, // %0 处的颜色 { offset: 1, color: '#17B9BE' }, // %100 处的颜色 ], global: false, // 缺省为 false } const threeYearBarColor = { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#BAFA54' }, // %0 处的颜色 { offset: 1, color: '#4EDE74' }, // 100% 处的颜色 ], global: false, // 缺省为 false } // 配置图表选项 const option = { title: { text: '' }, tooltip: {}, legend: { textStyle: { color: '#E4F0FF', fontSize: 14 } }, xAxis: { name: '年', nameTextStyle: { color: '#9AA6B8', fontSize: 16 }, type: 'category', data: [2020, 2021, 2022, 2023, 2024, 2025], axisLine: { lineStyle: { // 轴线样式 type: 'solid', color: '#333' }, }, axisLabel: { show: true, fontSize: 16, textStyle: { color: '#9AA6B8', } }, }, yAxis: { name: '单位: 人', nameTextStyle: { color: '#9AA6B8', fontSize: 16 }, type: 'value', splitLine: { show: true, lineStyle: { type: 'dashed', // 设置刻度线为虚线个数 } }, axisLabel: { show: true, fontSize: 16, textStyle: { color: '#9AA6B8', } } }, series: [ { name: '两年制', type: 'bar', data: twoYearData, barWidth: 20, itemStyle: { color: twoYearBarColor } }, { name: '三年制', type: 'bar', data: threeYearData, barWidth: 20, itemStyle: { color: threeYearBarColor } }, ] } return option; }