成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wanglu1209 / 3642人閱讀

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

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

1、場景重現(xiàn)


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

很丑是吧，測試姐姐說一定要改掉。
附加一下右上角的實(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給的解決的辦法就是自定義。
下面寫了一個(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;
}

改完效果如下，大家可以自己試試看哦?？梢愿某勺约合胍娘L(fēng)格哦。

3、總結(jié)

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84536.html

相關(guān)文章

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

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

    wemallshop 評論0 收藏0

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

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

    nihao 評論0 收藏0

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

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

    MingjunYang 評論0 收藏0

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

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

    draveness 評論0 收藏0

發(fā)表評論

0條評論

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