成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

wanglu1209 / 3714人閱讀

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

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

1、場景重現(xiàn)


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

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

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

點擊文檔傳送門

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

optionToContent: function (opt) {
    let axisData = opt.xAxis[0].data; //坐標數(shù)據(jù)
    let series = opt.series; //折線圖數(shù)據(jù)
    let tdHeads = "時間"; //表頭
    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;
}

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

3、總結

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

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

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

轉載請注明本文地址：http://m.hztianpu.com/yun/84536.html

相關文章

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

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

    wemallshop 評論0 收藏0

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

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

    nihao 評論0 收藏0

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

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

    MingjunYang 評論0 收藏0

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

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

    draveness 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<