weixin_52834332 2022-10-28 23:02 采纳率: 77.4%
浏览 19
已结题

Echarts绘制仪表盘出错应该如何修改

目标想达到如下图的效果:

img

但是实际编码时却是下图的效果:

img

下面是我的源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仪表盘</title>
  <script src="../JS/echarts.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  var option = {
    series:[
      {
        type:'gauge',
        data:[
          {
            value:97,
            itemStyle:{
              color:'pink',
            }
          },
          {
            value:85,
            itemStyle:{
              color:'green'
            }
          }
        ],
        min:50
      }
    ]
  }
  mCharts.setOption(option)
</script>
</body>
</html>

想问问应该要如何修改呢?

  • 写回答

3条回答 默认 最新

  • EdsionWang 2022-10-29 00:08
    关注
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>仪表盘</title>
            <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        </head>
        <body>
            <div style="width: 600px;height: 400px"></div>
            <script>
                var mCharts = echarts.init(document.querySelector("div"))
                var option = {
                    series: [{
                        type: 'gauge',
                        data: [{
                                value: 97,
                                itemStyle: {
                                    color: 'pink',
                                }
                            }
                        ],
                        detail: { // 仪表盘详情,用于显示数据。
                            show: true, // 是否显示详情,默认 true。
                            offsetCenter: [20,"50%"], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                            color: "auto", // 文字的颜色,默认 auto。
                            fontSize: 30, // 文字的字体大小,默认 15。
                            formatter: "{value}",
                        
                        },
                        min: 50
                    },
                    {
                        type: 'gauge',
                        data: [
                            {
                                value: 85,
                                itemStyle: {
                                    color: 'green'
                                }
                            }
                        ],
                        detail: { // 仪表盘详情,用于显示数据。
                            show: true, // 是否显示详情,默认 true。
                            offsetCenter: [-20,"50%"], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
                            color: "auto", // 文字的颜色,默认 auto。
                            fontSize: 30, // 文字的字体大小,默认 15。
                            formatter: "{value}",
                        
                        },
                        min: 50
                    }]
                }
                mCharts.setOption(option)
            </script>
        </body>
    </html>
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月6日
  • 已采纳回答 10月29日
  • 创建了问题 10月28日

悬赏问题

  • ¥15 matlab在安装时报错 无法找到入口 无法定位程序输入点
  • ¥15 收益高的广告联盟有哪些
  • ¥15 Android Studio webview 的使用问题, 播放器横屏全屏
  • ¥15 删掉jdk后重新下载,Java web所需要的eclipse无法使用
  • ¥15 uniapp正式环境中通过webapi将本地数据推送到设备出现的跨域问题
  • ¥15 xui建立节点,显示错误
  • ¥15 关于#单片机#的问题:开始、复位、十进制的功能可以实现,但是切换八进制的功能无法实现(按下按键也没有效果),把初始状态调成八进制,也是八进制可以实现但是切换到十进制不行(相关搜索:汇编语言|计数器)
  • ¥15 VINS-Mono或Fusion中feature_manager中estimated_depth是特征的深度还是逆深度?
  • ¥15 谷歌浏览器如何备份抖音网页数据
  • ¥15 分别有什么商家下面需要非常多的骑手为它工作?