Echarts3.0中利用dataset進行數(shù)據(jù)管理,并封裝圖表生成方法

maxmin 發(fā)布于2019-08-23 18:14 / 2530人閱讀

摘要：效果圖放置圖表的元素選擇器市場飲料銷售情況圖表標題噸放置圖表的元素選擇器圖表大標題單位系列數(shù)據(jù)軸數(shù)據(jù)類目數(shù)據(jù)單位

效果圖

let rst = [
            {
                name: "Matcha Latte",
                data:[
                    {time: "2012",num: 365},
                    {time: "2013",num: 815},
                    {time: "2014",num: 665},
                    {time: "2015",num: 565},
                ]
            },{
                name: "Milk Tea",
                data:[
                    {time: "2012",num: 265},
                    {time: "2013",num: 615},
                    {time: "2014",num: 465},
                    {time: "2015",num: 965},
                ]
            },{
                name: "Cheese Cocoa",
                data:[
                    {time: "2012",num: 765},
                    {time: "2013",num: 215},
                    {time: "2014",num: 765},
                    {time: "2015",num: 165},
                ]
            }
        ];
        

        let chartOption = {
            el:"#chart",//放置圖表的元素css選擇器
            title: "市場飲料銷售情況",//圖表標題
            unit: "噸",
            dataArr: rst,
            
        }

        
        /**
         * chtOption = {
         *  el:"", //放置圖表的元素css選擇器
            title: "", //圖表大標題
            unit: [], //單位
         * }
         * 
         * */
        function barChart (chtOption){
            let myChart = echarts.init(document.querySelector("#chart"));
            let dataObj = {
                series: [],//系列數(shù)據(jù)
                xData:[],//x軸數(shù)據(jù)
                yData:[],//類目數(shù)據(jù)
                source: [],
                chartType: [],
                
            }
            for(let i in chtOption.dataArr[0].data){
                dataObj.series.push(chtOption.dataArr[0].data[i].time);
            }
            for(let i in chtOption.dataArr){
                let perSeries = [];
                perSeries.push(chtOption.dataArr[i].name);
                for(let j in chtOption.dataArr[i].data){
                    perSeries.push(chtOption.dataArr[i].data[j].num);
                    
                }
                dataObj.xData.push(perSeries);
                dataObj.yData.push(chtOption.dataArr[i].name);
            }
            let dataSeries =  ["name_value"];
            for(let i in dataObj.series){
                dataSeries.push(dataObj.series[i]);
                dataObj.chartType.push({type: "bar"});
            }
            dataObj.source.push(dataSeries);
            for(let i in dataObj.xData){
                dataObj.source.push(dataObj.xData[i]);
            }
            let option = {
                title: {
                    text: chtOption.title,
                    textAlign: "left"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    data: chtOption.series
                },
                grid: {
                    left: "3%",
                    right: "12%",
                    bottom: "3%",
                    top: "10%",
                    containLabel: true
                },
                dataset: {
                    source: dataObj.source
                },
                xAxis: [
                    { gridIndex: 0,name: "單位: " + chtOption.unit}
                ],
                yAxis: [
                    {type: "category",gridIndex: 0}
                ],
                series: dataObj.chartType
            };

            myChart.setOption(option);
        }
        
        barChart(chartOption);

GPU云服務器云服務器 php數(shù)據(jù)生成圖表利用python進行數(shù)據(jù)分析利用公有云進行數(shù)據(jù)備份利用python進行數(shù)據(jù)分析第二版pdf

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/104885.html

antv g2的理解總結

摘要：也同樣支持配置項聲明構成一個可視化框架需要四部分數(shù)據(jù)處理模塊，對數(shù)據(jù)進行加工的模塊，包括一些數(shù)據(jù)處理方法。因此上的同基本相同?？偨Y起來，分面其實提供了兩個功能按照指定的維度劃分數(shù)據(jù)集對圖表進行排版。 G2 G2本身是一門圖形語法，G2和傳統(tǒng)的圖表系統(tǒng)（HighCharts，ACharts等）不同，G2是一個基于統(tǒng)計分析的語義化數(shù)據(jù)可視化系統(tǒng)。它真正做到了讓數(shù)據(jù)驅動圖形，讓你在使用它時候...

baihe 2019-08-22 14:54 評論0 收藏0
三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

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

draveness 2019-04-23 13:19 評論0 收藏0
又快又好！巧用ChartJS打造你的實用折線圖

摘要：又快又好巧用打造你的實用折線圖最終效果本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，可以篩選想要顯示的折線。了解了上折線圖的數(shù)據(jù)結構，大家也就明白了顯示一條折線，即是添加隱藏一條折線，即是將其去除。又快又好！巧用ChartJS打造你的實用折線圖最終效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

channg 2019-08-19 17:05 評論0 收藏0
又快又好！巧用ChartJS打造你的實用折線圖

摘要：又快又好巧用打造你的實用折線圖最終效果本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，可以篩選想要顯示的折線。了解了上折線圖的數(shù)據(jù)結構，大家也就明白了顯示一條折線，即是添加隱藏一條折線，即是將其去除。又快又好！巧用ChartJS打造你的實用折線圖最終效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

Airmusic 2019-08-30 12:43 評論0 收藏0
又快又好！巧用ChartJS打造你的實用折線圖

摘要：又快又好巧用打造你的實用折線圖最終效果本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，可以篩選想要顯示的折線。了解了上折線圖的數(shù)據(jù)結構，大家也就明白了顯示一條折線，即是添加隱藏一條折線，即是將其去除。又快又好！巧用ChartJS打造你的實用折線圖最終效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

junfeng777 2019-08-01 14:57 評論0 收藏0