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);
    }

 依赖:https://files.cnblogs.com/files/gaocong/echarts.js

posted @   小小高  阅读(1407)  评论(0编辑  收藏  举报
编辑推荐:
· 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训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示