柱状图
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; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?