Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

echart自定义仪表盘显示错误 #4142

Closed
lvshui opened this issue Sep 24, 2016 · 0 comments
Closed

echart自定义仪表盘显示错误 #4142

lvshui opened this issue Sep 24, 2016 · 0 comments

Comments

@lvshui
Copy link

lvshui commented Sep 24, 2016

问题简述 (One-line summary)

http://echarts.baidu.com/echarts2/doc/example/gauge.html 输入以下代码,修改了最小,最大值,划分label对应的范围,但是运行显示错误,没有中文label的提示。

option = {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'个性化仪表盘',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
startAngle: 140,
endAngle : -140,
min: 0, // 最小值
max: 950, // 最大值
precision: 0, // 小数精度,默认为0,无小数点
splitNumber: 10, // 分割段数,默认为5
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']],
width: 30
}
},
axisTick: { // 坐标轴小标记
show: true, // 属性show控制显示与否,默认不显示
splitNumber: 5, // 每份split细分多少段
length :8, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#eee',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true,
formatter: function(v){
switch (v+''){
case '100': return '弱';
case '300': return '低';
case '600': return '中';
case '900': 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: 40,
offsetCenter: ['-60%', 10], // x, y,单位px
formatter:'{value}',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto',
fontSize : 30
}
},
data:[{value: 50, name: '仪表盘'}]
}
]
};

clearInterval(timeTicket);
timeTicket = setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000)

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):
  • 浏览器类型和版本 (Browser version):
  • 操作系统类型和版本 (OS Version):

重现步骤 (Steps to reproduce)

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {
  tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'个性化仪表盘',
            type:'gauge',
            center : ['50%', '50%'],    // 默认全局居中
            radius : [0, '75%'],
            startAngle: 140,
            endAngle : -140,
            min: 0,                     // 最小值
            max: 950,                   // 最大值
            precision: 0,               // 小数精度,默认为0,无小数点
            splitNumber: 10,             // 分割段数,默认为5
            axisLine: {            // 坐标轴线
                show: true,        // 默认显示,属性show控制显示与否
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, 'lightgreen'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']], 
                    width: 30
                }
            },
            axisTick: {            // 坐标轴小标记
                show: true,        // 属性show控制显示与否,默认不显示
                splitNumber: 5,    // 每份split细分多少段
                length :8,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#eee',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
                show: true,
                formatter: function(v){
                    switch (v+''){
                        case '100': return '弱';
                        case '300': return '低';
                        case '600': return '中';
                        case '900': 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: 40,
                offsetCenter: ['-60%', 10],       // x, y,单位px
                formatter:'{value}',
                textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                    color: 'auto',
                    fontSize : 30
                }
            },
            data:[{value: 50, name: '仪表盘'}]
        }
    ]
}

其他信息 (Other comments)

echarts

@pissang pissang closed this as completed Jun 5, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants