国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

echarts如何修改數(shù)據(jù)視圖dataView中的樣式

wanglu1209 / 3631人閱讀

摘要：在表格中遇到的一點(diǎn)小問(wèn)題，解決方案如下場(chǎng)景重現(xiàn)這是一個(gè)顯示兩個(gè)折線圖的圖表，一切看起來(lái)都很順利。但是點(diǎn)擊紅色箭頭所指的圖標(biāo)，這個(gè)作用就是以表格的形式展現(xiàn)。總結(jié)和數(shù)據(jù)視圖有關(guān)的都可以這樣改，不一定是我的那個(gè)場(chǎng)景。

做了一個(gè)現(xiàn)實(shí)折線圖的圖表，通過(guò)右上角icon可以自由切換成柱狀圖，表格。
在表格中遇到的一點(diǎn)小問(wèn)題，解決方案如下：

1、場(chǎng)景重現(xiàn)


這是一個(gè)顯示兩個(gè)折線圖的圖表，一切看起來(lái)都很順利。
但是點(diǎn)擊紅色箭頭所指的圖標(biāo)，這個(gè)作用就是以表格的形式展現(xiàn)。
展現(xiàn)如下。

很丑是吧，測(cè)試姐姐說(shuō)一定要改掉。
附加一下右上角的實(shí)現(xiàn)代碼，在options配置項(xiàng)加下面的配置就OK。

//右上角切換實(shí)現(xiàn)方法
toolbox: {
    show: true,
        right: "5%",
        feature: {
        dataView: {
            readOnly: true              
        },
        magicType: {type: ["line", "bar"]}
    }
},
2、解決方案

點(diǎn)擊文檔傳送門

echarts給的解決的辦法就是自定義。
下面寫(xiě)了一個(gè)小表格，opt包含了所有折線圖的數(shù)據(jù)，自己組裝下。
可以console看看都有什么。

optionToContent: function (opt) {
    let axisData = opt.xAxis[0].data; //坐標(biāo)數(shù)據(jù)
    let series = opt.series; //折線圖數(shù)據(jù)
    let tdHeads = "時(shí)間"; //表頭
    let tdBodys = ""; //數(shù)據(jù)
    series.forEach(function (item) {
        //組裝表頭
        tdHeads += `${item.name}`;
    });
    let table = `${tdHeads} `;
    for (let i = 0, l = axisData.length; i < l; i++) {
        for (let j = 0; j < series.length; j++) {
            //組裝表數(shù)據(jù)
            tdBodys += ``;
        }
        table += `${tdBodys}`;
        tdBodys = "";
    }
    table += "
${ series[j].data[i]}
${axisData[i]}
";
    return table;
}

改完效果如下，大家可以自己試試看哦。可以改成自己想要的風(fēng)格哦。

3、總結(jié)

和數(shù)據(jù)視圖有關(guān)的都可以這樣改，不一定是我的那個(gè)場(chǎng)景。

如果項(xiàng)目中圖表很多，可以把這段代碼抽取出來(lái)，畢竟篇幅很長(zhǎng)。
寫(xiě)這篇文章，主要是自己剛學(xué)會(huì)，其次是搜了一會(huì)沒(méi)找到合適的答案。就分享下自己的小喜悅吧，嘻嘻。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84536.html

相關(guān)文章

  • echarts優(yōu)化數(shù)據(jù)視圖dataView中的樣式

    摘要：在使用過(guò)程中，里有個(gè)視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下改問(wèn)題解決方案為，在回調(diào)函數(shù)中處理，具體代碼如下數(shù)據(jù)視圖名稱修改后的效果為問(wèn)題完美解決，希望對(duì)你有幫助 在使用echart過(guò)程中，toolbox里有個(gè)dataView視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下：showImg(https://segmentfault.com/img/bVbipp7?w=1...

    wemallshop 評(píng)論0 收藏0

  • echarts優(yōu)化數(shù)據(jù)視圖dataView中的樣式

    摘要：在使用過(guò)程中，里有個(gè)視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下改問(wèn)題解決方案為，在回調(diào)函數(shù)中處理，具體代碼如下數(shù)據(jù)視圖名稱修改后的效果為問(wèn)題完美解決，希望對(duì)你有幫助 在使用echart過(guò)程中，toolbox里有個(gè)dataView視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下：showImg(https://segmentfault.com/img/bVbipp7?w=1...

    nihao 評(píng)論0 收藏0

  • echarts優(yōu)化數(shù)據(jù)視圖dataView中的樣式

    摘要：在使用過(guò)程中，里有個(gè)視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下改問(wèn)題解決方案為，在回調(diào)函數(shù)中處理，具體代碼如下數(shù)據(jù)視圖名稱修改后的效果為問(wèn)題完美解決，希望對(duì)你有幫助 在使用echart過(guò)程中，toolbox里有個(gè)dataView視圖模式，里面的數(shù)據(jù)沒(méi)有對(duì)整，影響展示效果，情形如下：showImg(https://segmentfault.com/img/bVbipp7?w=1...

    MingjunYang 評(píng)論0 收藏0

  • 三大圖表庫(kù)：ECharts 、 BizCharts 和 G2，該如何選擇？

    摘要：最近阿里正式開(kāi)源的圖表庫(kù)基于技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近的使用特點(diǎn)。相關(guān)文檔組件化阿里的圖表組件手拉手，用開(kāi)發(fā)動(dòng)態(tài)刷新組件文檔地址一安裝通過(guò)引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。最近阿里正式開(kāi)源的BizCharts圖表庫(kù)基于React技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近React的使用特點(diǎn)。同時(shí)BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相...

    draveness 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<