旭日图

这是图片

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            height: 600px;
            width: 1200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myCharts = echarts.init(box)
        let option = {
            toolbox:{
                show:true,
                feature:{
                    saveAsImage:{
                        show:true
                    }
                }
            },
            series:{
                type:"sunburst",

                data:[
                    {
                        name: 'Grandpa',
                        children: [
                            {
                                name: 'Uncle Leo',
                                value: 15,
                                children:[
                                    {
                                        name: 'Cousin Jack',
                                        value: 2
                                    },
                                    {
                                        name: 'Cousin Mary',
                                        value: 5,
                                        children:[
                                            {
                                                name: 'Jackson',
                                                value: 2
                                            }
                                        ]
                                    },
                                    {
                                        name: 'Cousin Ben',
                                        value: 4
                                    }
                                ]
                            },
                            {
                                name: 'Father',
                                value: 10,
                                children:[
                                    {
                                        name:'me',
                                        value:5
                                    },
                                    {
                                        name: 'Brother Peter',
                                        value: 1
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'Nancy',
                        children: [
                        {
                            name: 'Uncle Nike',
                            children: [
                            {
                                name: 'Cousin Betty',
                                value: 1
                            },
                            {
                                name: 'Cousin Jenny',
                                value: 2
                            }
                            ]
                        }
                        ]
                    }
                ],
                radius: [0, '90%'],
                label: {
                    rotate: 'radial'
                }
            }
        }
        myCharts.setOption(option)

    </script>
    
</body>
</html>

仪表盘

这是图片

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            height: 600px;
            width: 1200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myChart = echarts.init(box)
        let option = {
            toolbox:{
                show:true,
                feature:{
                    saveAsImage:{
                        show:true
                    }
                }
            },
            backgroundColor:"rgba(128,128,128,0.1)",
            tooltip:{
                show:true,
                formatter:"{b}:{c}%",
                backgroundColor:"rgba(255,0,0,0.8)",
                borderColor:"#333",
                borderWidth:0,
                padding:5,
                // textStyle:{
                    
                // }
            },
            title:{
                text:"项目实际完成率(%)",
                x:'center',
                y:25,
                show:true,
                offsetCenter:[50,"20%"],
                textStyle:{
                    fontFamily:"黑体",
                    color:"blue",
                    fontSize:20
                }
            },
            series:[
                {
                    name:"单仪表盘示例",
                    type:'gauge',
                    radius:'80%',
                    center:["50%","55%"],
                    startAngle:225,
                    endAngle:-45,
                    clockwise:true,
                    min:0,
                    max:100,
                    splitNumber:10,
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:[
                                [0.2,"rgba(255,0,0,1)"],
                                [0.8,"rgba(0,255,255,1)"],
                                [1,"rgba(0,255,0,1)"]
                            ],
                            opacity:1,
                            width:30,
                            shadowBlur:20,
                            shadowColor:'#fff'
                        }
                    },
                    splitLine:{
                        show:true,
                        length:30,
                        lineStyle:{
                            color:'#eee',
                            opacity:1,
                            width:2,
                            type:"solid",
                            shadowBlur:10,
                            shadowColor:"#fff"
                        }
                    },
                    axisTick:{
                        show:true,
                        splitNumber:5,
                        length:8,
                        lineStyle:{
                            color:'#eee',
                            opacity:1,
                            width:1,
                            type:"solid",
                            shadowBlue:10,
                            shadowColor:"#fff",

                        }
                    },
                    axisLabel:{
                        show:true,
                        distance:25,
                        color:"blue",
                        fontSize:32,
                        formatter:"{value}",

                    },
                    pointer:{
                        show:true,
                        length:"70%",
                        width:9,
                    },
                    itemStyle:{
                        color:"auto",
                        opacity:1,
                        borderWidth:0,
                        borderType:"solid",
                        borderColor:"#000",
                        shadowBlue:10,
                        shadowColor:"#fff"
                    },
                    emphasis:{
                        itemStyle:{
                            color:'red'
                        }
                    },
                    detail:{
                        show:true,
                        offsetCenter:[0,"50%"],
                        color:'auto',
                        fontSize:30,
                        formatter:"{value}%",
                    },
                    data:[
                        {
                            name:'完成率(%)',
                            value:50
                        }
                    ]
                }
            ]
        }
        setInterval(function(){
            option.series[0].data[0].value=(Math.random()*100).toFixed(2)
            myChart.setOption(option,true)
        },2000)
        myChart.setOption(option)
    </script>
</body>
</html>

多仪表盘

这是图片

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            height: 600px;
            width: 1200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myChart = echarts.init(box)
        let option = {
            tooltip:{
                formatter:"{a}<br/>{c}{b}"
            },
            series:[
                {
                    name:'速度',
                    type:'gauge',
                    z:3,
                    min:0,
                    max:220,
                    splitNumber:22,
                    radius:"60%",
                    title:{
                        offsetCenter:[0,"-30%"]
                    },
                    detail:{
                        textStyle:{
                            fontWeight:"bolder"
                        }
                    },
                    data:[
                        {
                            value:40,
                            name:"车速(km/h)"
                        }
                    ]
                },
                {
                    name:'转速',
                    type:'gauge',
                    center:["28%","55%"],
                    radius:"35%",
                    min:0,
                    max:7,
                    endAngle:45,
                    splitNumber:7,
                    pointer:{width:5},
                    title:{
                        offsetCenter:[10,"-20%"]
                    },
                    detail:{
                        textStyle:{
                            fontWeight:"bolder"
                        }
                    },
                    data:[{value:1.5,name:'转速(x1000 r/min)'}]
                },
                {
                    name:"油表",
                    type:"gauge",
                    center:["70%","50%"],
                    radius:"25%",
                    min:0,
                    max:2,
                    startAngle:135,
                    endAngle:45,
                    splitNumber:2,
            
                    pointer:{
                        width:4
                    },
                    axisLabel:{
                        formatter:function(v){
                            switch(v+''){
                                case '0':return 'E';
                                case '1':return "油表";
                                case '2':return "F"
                            }
                        }
                    },
                    detail:{
                        show:false
                    },
                    title:{
                        show:false
                    },
                    data:[{
                        value:0.5,name:'gas'
                    }]
                },
                {
                    name:'水表',
                    type:'gauge',
                    center:["70%","50%"],
                    radius:"25%",
                    min:0,
                    max:2,
                    startAngle:315,
                    endAngle:225,
                    splitNumber:2,
                    pointer:{
                        width:2
                    },
                    axisLabel:{
                        formatter:function(v){
                            switch(v+''){
                                case '0':return "H";
                                case '1':return "水表";
                                case '2':return "C"
                            }
                        }
                    },
                    title:{
                        show:false
                    },
                    detail:{
                        show:false
                    },
                    data:[
                        {
                            value:0.5,
                            name:'gas'
                        }
                    ]
                }
            ]
        }
        setInterval(function(){
            option.series[0].data[0].value = (Math.random()*100).toFixed(2) -0;
            option.series[1].data[0].value = (Math.random()*7).toFixed(2) -0;
            option.series[2].data[0].value = (Math.random()*2).toFixed(2) -0;
            option.series[3].data[0].value = (Math.random()*2).toFixed(2) -0;
            myChart.setOption(option,true)
        },2000)
        myChart.setOption(option)
    </script>
    
</body>
</html>

多雷达图

这是图片

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        .box{
            height: 600px;
            width: 1200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        let myChart = echarts.init(box)
        let option = {
            toolbox:{
                show:true,
                feature:{
                    saveAsImage:{
                        show:true
                    }
                }
            },
            visualMap:{
                top:"47%",
                right:20,
                calculable:true
            },
            radar:[
                {
                    center:["50%","20%"],
                    radius:"25%",
                    indicator:[
                        {
                            text:'品牌',
                            max:100
                        },
                        {
                            text:'内容',
                            max:100
                        },
                        {
                            text:'可用性',
                            max:100
                        },
                        {
                            text:'功能',
                            max:100
                        }
                    ]
                },
                {
                    center:["50%","60%"],
                    radius:"25%",
                    indicator:[
                        {
                            text:'品牌',
                            max:100
                        },
                        {
                            text:'内容',
                            max:100
                        },
                        {
                            text:'可用性',
                            max:100
                        },
                        {
                            text:'功能',
                            max:100
                        }
                    ]
                }
            ],
            series:[
                {
                    type:'radar',
                    data:[
                        {
                            name:'软件',
                            value:[65,72,88,80]
                        }
                    ]
                },
                {
                    type:'radar',
                    radarIndex:1,
                    
                    data:[
                        {
                            name:'软件',
                            value:[65,72,88,80]
                        },
                        {
                            name:'软件s',
                            value:[55,42,87,60]
                        }
                    ]
                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>
</html>