zoukankan html css js c++ java

【ECharts，仪表盘样式1】

本文内容均来自于百度搜索，

全局代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3         <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>无标题文档</title>
 6         <script  src="js/echarts.js"></script>
 7     </head>
 8     
 9     <body>
10         <div id="main" style="600px;height:400px;"></div>
11     </body>
12     <script type="text/javascript">
13             var myChart = echarts.init(document.getElementById('main'));
14             
15             option = {
16                 
17                 tooltip : {
18                     formatter: "{a} <br/>{b} : {c}%"
19                 },
20                 series : [
21                     {
22                         name:'业务指标',
23                         type:'gauge',
24                         detail : {formatter:'{value}%'}, //仪表盘显示数据
25                         axisLine: { //仪表盘轴线样式
26                             lineStyle: {
27                                  20
28                             }    
29                         },
30                         splitLine: { //分割线样式
31                             length: 20
32                         },
33                         data:[{value: 92, name: 'CPU'}],
34                         
35                         
36                     }
37                     
38                 ]
39             };
40             
41             myChart.setOption(option);
42     </script>
43 </html>

我们在中间点添加一个白点

全局代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3         <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>无标题文档</title>
 6         <script  src="js/echarts.js"></script>
 7     </head>
 8     
 9     <body>
10         <div id="main" style="600px;height:400px;"></div>
11     </body>
12     <script type="text/javascript">
13             var myChart = echarts.init(document.getElementById('main'));
14             
15             option = {
16                 
17                 tooltip : {
18                     formatter: "{a} <br/>{b} : {c}%"
19                 },
20                 series : [
21                     {
22                         name:'业务指标',
23                         type:'gauge',
24                         detail : {formatter:'{value}%'}, //仪表盘显示数据
25                         axisLine: { //仪表盘轴线样式
26                             lineStyle: {
27                                  20
28                             }    
29                         },
30                         splitLine: { //分割线样式
31                             length: 20
32                         },
33                         data:[{value: 92, name: 'CPU'}],
34                         
35                         markPoint:{
36                             symbol:'circle',
37                             symbolSize:5,
38                             data:[
39                                 //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
40                                 {x:'center',y:'center',itemStyle:{color:'#FFF'}}
41                                 ]
42                         },
43                     }
44                     
45                 ]
46             };
47             
48             myChart.setOption(option);
49     </script>
50 </html>

查看全文

相关阅读:
Flutter 开发环境搭建
 swift 如何控制view的显示与隐藏
 TextView textSize 文字大小
 Android项目增加混淆
 Android EditText 无法换行
 Android 6.0 新特性整理资料来自网络
 java线程中的sleep／wait/notify/yield/interrupt方法整理
 java 抽象类与接口的区别整理
 android 系统架构
 android handler工作原理

原文地址：https://www.cnblogs.com/iitxt/p/9012466.html