ECharts 怎么根據(jù)數(shù)據(jù)實(shí)現(xiàn)圖表自增

1.ECharts 怎么根據(jù)數(shù)據(jù)實(shí)現(xiàn)圖表自增,譬如我這里有2條數(shù)據(jù),我對(duì)應(yīng)要增加2個(gè)儀表圖怎么實(shí)現(xiàn)?
2.這是代碼,需要用到的是c3text和c4text分別設(shè)置儀表盤(pán)的刻度:
![圖片描述 ][1]

3.這是代碼:

var rounds = document.querySelector('div.round');

var _watchHtml = '';
//this._valueDatas 數(shù)據(jù)數(shù)組
this._valueDatas.forEach(function (value,index,array) {
    //格式化獲取到的圖片中的對(duì)象數(shù)組
    value = eval('('+ value +')');
    //數(shù)組長(zhǎng)度
    console.log(array.length)
    
    _watchHtml += '<div class="watchBox"><div class="watch"></div></div>'
    rounds.innerHTML = _watchHtml;

    //儀表盤(pán)配置參數(shù)
    var watch = echarts.init(document.querySelector(".watch"));
    var option = {
        tooltip: {
            formatter: "{a} <br/> : {c}%"
        },
        textStyle: {
            fontSize: 8,
        },
        series: [
            {
                name: '業(yè)務(wù)指標(biāo)',
                type: 'gauge',
                radius: '100%',
                splitNumber: 6,
                center: [119, 110],
                min: 0,
                max: 60,
                detail: {
                    formatter: '{value}min',
                    fontSize: 10,
                    offsetCenter: ['0%', '60%']
                },
                data: [{value: 30}],
                axisLine: {
                    lineStyle: {
                        color: [
                            [0.165, '#91c7ae'],
                            [0.33, '#FF33CC'],
                            [0.5, '#9966CC'],
                            [0.67, '#FF6600'],
                            [0.83, '#6633CC'],
                            [1, '#c23531']
                        ]
                    }
                },
                axisLabel: {
                    distance: 5,
                    fontSize: 10,
                },
                pointer: {
                    show: true,
                    length: '60%',
                    width: 5,
                }
            }
        ]
    }
    watch.setOption(option);
    setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 60).toFixed(2) - 0;
        watch.setOption(option, true);
    }, 2000);


})

回答

編輯回答

墨沫

實(shí)現(xiàn)了,要在里面二次拼接,實(shí)現(xiàn)代碼如下:

//TAT

var rounds = document.querySelector('div.round');
var _watchHtml = '';

this._valueDatas.forEach(function (value,index,array) {
    value = eval('('+ value +')');
    console.log(value)

    var maxTat = value.c3text;  //總值 100
    var fwcTat = value.c4text;  //警報(bào)值 60
    var difTat = (maxTat - fwcTat);  //安全值 100-60 = 40
    var colors = difTat/100;
    var _valueLengths = value.c3text.length;


    _watchHtml += '<div class="watchBox"><div class="watch w'+index+'"></div></div>'
    var wat=document.createElement('div');
    wat.setAttribute('class','watchBox');
    wat.innerHTML='<div class="watch w'+index+'"></div>';
   // rounds.innerHTML = _watchHtml;
    rounds.appendChild(wat)
    
    
    
    //儀表盤(pán)配置參數(shù)
    var watch = echarts.init(document.querySelector('.w'+index));

})

2018年3月27日 15:10

編輯回答