在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ echart 引入儀表盤類型的數(shù)據(jù)為什么失真呢?

echart 引入儀表盤類型的數(shù)據(jù)為什么失真呢?

var option = {
tooltip : {
    formatter: "{a} <br/> : {c}%"
},
toolbox: {
    show : true,
    feature : {
        mark : {show: true},
        restore : {show: true},
        saveAsImage : {show: true}
    }
},
series : [
    {
        name:'個(gè)性化儀表盤',
        type:'gauge',
        center : ['50%', '50%'],    // 默認(rèn)全局居中
        radius : [0, '75%'],
        startAngle: 140,
        endAngle : -140,
        min: 0,                     // 最小值
        max: 100,                   // 最大值
        precision: 0,               // 小數(shù)精度,默認(rèn)為0,無小數(shù)點(diǎn)
        splitNumber: 10,             // 分割段數(shù),默認(rèn)為5
        axisLine: {            // 坐標(biāo)軸線
            show: true,        // 默認(rèn)顯示,屬性show控制顯示與否
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: [[0.2, 'lightgreen'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']], 
                width: 30
            }
        },
        axisTick: {            // 坐標(biāo)軸小標(biāo)記
            show: true,        // 屬性show控制顯示與否,默認(rèn)不顯示
            splitNumber: 5,    // 每份split細(xì)分多少段
            length :8,         // 屬性length控制線長(zhǎng)
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#eee',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {           // 坐標(biāo)軸文本標(biāo)簽,詳見axis.axisLabel
            show: true,
            formatter: function(v){
                switch (v+''){
                    case '10': return '弱';
                    case '30': return '低';
                    case '60': return '中';
                    case '90': return '高';
                    default: return '';
                }
            },
            textStyle: {       // 其余屬性默認(rèn)使用全局文本樣式,詳見TEXTSTYLE
                color: '#333'
            }
        },
        splitLine: {           // 分隔線
            show: true,        // 默認(rèn)顯示,屬性show控制顯示與否
            length :30,         // 屬性length控制線長(zhǎng)
            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: {       // 其余屬性默認(rèn)使用全局文本樣式,詳見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: {       // 其余屬性默認(rèn)使用全局文本樣式,詳見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)

引入了這段代碼
官方的是這樣
clipboard.png

但我自己引入后,就會(huì)放大失真,調(diào)節(jié)尺寸也是失真,這是為什么?

clipboard.png

回答
編輯回答
玄鳥

canvas的尺寸不能通過CSS來調(diào)整,可以直接在Html頁面上設(shè)置Canvas元素的大小。這個(gè)問題不是echarts的問題,是canvas調(diào)整尺寸的問題。

2018年9月3日 15:49