echarts(3.0)的基本使用(标签式导入)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | function loadRainFallCharts(msg) { var obj = {}; obj.x = []; obj.y = []; obj.line = []; var accumulation = 0; $(msg).each(function () { obj.x.push(this.datatime); obj.y.push(this.avgvalue); accumulation += this.avgvalue; obj.line.push(accumulation); }); var myChart = echarts.init(document.getElementById('inThePast6hours_rainfall')); var option = { title: { text: '实时雨量曲线(过去6小时)', subtext: '', x: 'center', align: 'right' }, legend: { data: ['时段降水', '累积降水'], x: 'left' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: obj.x.map(function (str) { return str.replace(' ', '\n') }), axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true } ], series: [ { name: '时段降水', type: 'bar', barWidth: '60%', data: obj.y }, { name: '累积降水', type: 'line', stack: '广告', data: obj.line }, ] }; myChart.setOption(option); } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人