亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ECharts 怎么根據數據實現圖表自增

ECharts 怎么根據數據實現圖表自增

翻閱古今 2019-03-06 14:15:41
1.ECharts 怎么根據數據實現圖表自增,譬如我這里有2條數據,我對應要增加2個儀表圖怎么實現?2.這是代碼,需要用到的是c3text和c4text分別設置儀表盤的刻度:3.這是代碼:var rounds = document.querySelector('div.round');var _watchHtml = '';//this._valueDatas 數據數組this._valueDatas.forEach(function (value,index,array) {    //格式化獲取到的圖片中的對象數組    value = eval('('+ value +')');    //數組長度    console.log(array.length)        _watchHtml += '<div class="watchBox"><div class="watch"></div></div>'    rounds.innerHTML = _watchHtml;    //儀表盤配置參數    var watch = echarts.init(document.querySelector(".watch"));    var option = {        tooltip: {            formatter: "{a} <br/> : {c}%"        },        textStyle: {            fontSize: 8,        },        series: [            {                name: '業務指標',                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);})
查看完整描述

1 回答

?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

實現了,要在里面二次拼接,實現代碼如下:


//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;  //警報值 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)

    

    

    

    //儀表盤配置參數

    var watch = echarts.init(document.querySelector('.w'+index));

})


查看完整回答
反對 回復 2019-03-27
  • 1 回答
  • 0 關注
  • 485 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號