weixin_39053691 2017-09-08 09:40 采纳率: 0%
浏览 1974
已结题

echarts 仪表盘 中 数值会因电脑屏幕分辨率不同被遮挡,求解决

![图片说明](https://img-ask.csdn.net/upload/201709/08/1504863517_853418.png)图片说明

this.doEchartYb=function(value){

         option = {
             title: {
                 text: "余额价值比:",
                 x: 'left',
                 textStyle: {
                     fontSize: 14
                 }
             },
             tooltip: {
                 //formatter: "{a} <br/>{b} : {c}%"
                 formatter: "{a} : {c}"
             },
             toolbox: {
                 show: false,
                 feature: {
                     mark: {show: true},
                     restore: {show: true},
                     saveAsImage: {show: true}
                 }
             },
             series: [
                 {
                     name: '余额价值比',
                     type: 'gauge',
                     center: ['50%', '50%'],    // 默认全局居中
                     radius: [0, '70%'],
                     startAngle: 140,
                     endAngle: -140,
                     min: 0,                     // 最小值
                     max: 1,                   // 最大值
                     precision: 0,               // 小数精度,默认为0,无小数点
                     splitNumber: 10,             // 分割段数,默认为5
                     axisLine: {            // 坐标轴线
                         show: true,        // 默认显示,属性show控制显示与否
                         lineStyle: {       // 属性lineStyle控制线条样式
                             color: [[0.4, 'skyblue'], [0.8, 'orange'], [1, '#ff4500']],
                             width: 30
                         }
                     },
                     axisTick: {            // 坐标轴小标记
                         show: true,        // 属性show控制显示与否,默认不显示
                         splitNumber: 2,    // 每份split细分多少段
                         length: 8,         // 属性length控制线长
                         lineStyle: {       // 属性lineStyle控制线条样式
                             color: '#eee',
                             width: 1,
                             type: 'solid'
                         }
                     },
                     axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
                         show: true,
                         formatter: function (v) {
                             switch (v + '') {
                                 //case '10': return '弱';
                                 // case '0.2': return '弱';
                                 case '0.2':
                                     return '低';
                                 case '0.6':
                                     return '中';
                                 case '0.9':
                                     return '高';
                                 default:
                                     return '';
                             }
                         },
                         textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                             color: '#333'
                         }
                     },
                     splitLine: {           // 分隔线
                         show: true,        // 默认显示,属性show控制显示与否
                         length: 30,         // 属性length控制线长
                         lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                             color: '#eee',
                             width: 2,
                             type: 'solid'
                         }
                     },
                     pointer: {
                         length: '80%',
                         width: 8,
                         color: 'auto'
                     },
                     title: {
                         show: true,
                         offsetCenter: ['-65%', 10],       // x, y,单位px
                         textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                             color: '#333',
                             fontSize: 15
                         }
                     },
                     detail: {
                         show: true,      /////
                         backgroundColor: 'rgba(0,0,0,0)',
                         borderWidth: 0,
                         borderColor: '#ccc',
                         width: 100,
                         height: -218,
                         offsetCenter: [0, '10%'],       // x, y,单位px
                         formatter: '{value}',
                         textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                             color: 'auto',
                             fontSize: 20
                         }
                     },
                     data: [{value: 0.2, name: ''}]   //默认样式name:余额价值比
                 }
             ]
            };

            option.series[0].data[0].value= value;
            var SaleChart = echarts.init(dojo.byId("sdt"));//emap result
            SaleChart.setOption(option);
     };
  • 写回答

2条回答

  • JHCan333 2017-09-08 09:48
    关注

    是detail被挡住了么?

    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)