ECharts3.0 餅圖、柱圖、折線初試

時間 2019-11-15

標籤 echarts3.0 echarts 餅圖折線初試简体版

原文原文鏈接

ECharts3.0發佈了，此次冷豔的配色真好看啊連接描述css

3.0和以前的2.2兩個版本幾乎能夠算是兩個庫了，變化很大，對移動端作了很大優化：
1.再也不按需引入js文件，和其餘普通js庫同樣用標籤引入就好，可是能夠在官網構建庫的時候按需構建.
2.除了一個默認主題，沒有其餘內置主題，使用其餘主題須要在init以前註冊主題.
3.縮放dataZoom有了很大的改進，如今有三種縮放：slider即2.2中的縮放條，inside鼠標滾輪縮放，select是toolbox裏的框選縮放。鼠標滾輪是3.0新功能，很是好用，徹底沒有卡頓。
4.數據視覺映射，以前也經過本身指定柱圖每一個柱子itemStyle的顏色透明度來實現數據越大顏色越深，數據越小顏色越淺，如今有visualMap就更加簡單了，並且效果更好。html

bug也發現了一些，有些地方特別是在異步加載時和2.2有很多區別，2.2的項目代碼拿過來可能會出現奇怪的沒做用的現象，好比legend要異步加載的話，init時就不能寫……官網給的異步的例子太少，並且是針對數據部分的，但其實好比標題、圖例、軸標籤等等都是會有異步加載需求的。
下面是對餅圖、柱圖、折線以及部分新功能的嘗試，由於業務需求，因此都是用異步加載方式來設置數據。
jquery

<!DOCTYPE html>
<html>
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="pragma" content="no-cache" />
        <title>ECHARTS3 TEST</title>
        <link href="./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="./js/jquery.min.js"></script>
        <script src="./bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="./echarts/3.0/echarts.min.js"></script> 
</head>
<body>
    <div class="col-md-12">
        <div id="main"></div>
    </div>
    <div class="col-md-6">
        <button class="btn k-btn" type="button" onclick="getPie()">得到一個餅圖<em class="icon-align-left"> </em> </button>
            <div class="col-md-12" id="pie1" style="height:400px"> 
            </div>
    </div>   
   <div class="col-md-6">
        <button class="btn k-btn" type="button" onclick="getBar()">得到一個柱圖<em class="icon-align-left"> </em> </button>
            <div class="col-md-12" id="bar1" style="height:400px"> 
            </div>
    </div>     
    <div class="col-md-12">
        <button class="btn k-btn" type="button" onclick="getLine()">得到一個曲線<em class="icon-align-left"> </em> </button>
            <div class="col-md-12" id="line1" style="height:400px"> 
            </div>
    </div>     
</body>
<script>
    var pie;
    var pieopt = {
       title : {
            text: '', 
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
         calculable : true, /* 3.0不支持? */
/*        legend: {         //    3.0動態加載圖例時此處不能有legend
            show:true,
            data:[]
        },*/
        toolbox: {
            show:true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        }, 
        visualMap: [ // 3.0新功能 數據視覺映射 跟圖裂的顏色衝突
        {
            type: 'piecewise',
            min: 0,
            max: 30,
            dimension: 0,       // series.data 的第一個維度（即 value[0]）被映射
            seriesIndex: 0,     // 對第一個系列進行映射。
            inRange: {          // 選中範圍中的視覺配置
                 color: ['red',  'red'],
                colorLightness: [0.9, 0.3],
                symbolSize: [30, 100]              
            },
        }
    ],
        series: [{
            name: 'pie1',
                type: 'pie',
                data: []
       }]    
    };
    
    var bar;
    var bar_name = ['越限', '異常', '事故', '告知', '變位'];
    var baropt = {
    title : {
        text: '',
        x:'center',
        y:'top'
    },
    backgroundColor:'#fff',
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
        }
    },
     toolbox: {
            show:true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        }, 
    xAxis : [
        {
            type : 'category',
            data:[]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : []
    };
    var barserie= {
    name:'',
    type:'bar',
    stack: 'sum', // 堆積圖
    itemStyle : { normal: {
        label : { // 柱子上的數字
        show: true, 
        position: 'inside'}}
    },
    data:[]
    };
    
    var line;
    var lineopt = {
        title: {
            x:'center',
            text: ''
        },
        tooltip:{
            show : true,
            trigger: 'axis',  // 座標軸觸發 也能夠item數據點觸發
            formatter:function (params){ // tip的樣式
                var res = '時間 : ' + params[0].name +'<br/>';
                for (var i = 0, l = params.length; i < l; i++) {
                    res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                }    
                return res;
            }
        },
        xAxis: [{
            type: 'category',  // 有今日、昨日曲線疊加的 用category即字符串 
             boundaryGap : false,
            splitLine:{
                show:false    
            },
            data:[]
        }],
        yAxis: [{
            name:'',
            nameLocation:'end',
            type: 'value',
            scale:true,
            axisLabel: {
                formatter: '{value}'
            }
        }],
        series:[]
    };
    var lineserie =  {
            name:'',
            type:'line',
            markPoint:{ // 沒法異步設置markPoint和markLine 也沒有addMarkLine函數可用
                data: [{
                name: '最大值',
                type: 'max'
            }]
            },
            markLine:{
                data:[
                     {
                    name: 'aaa',
                    // 支持 'average', 'min', 'max'
                    type: 'average'
                }
                ]    
            },
           // data:[1,2,3,4,4,3,6,11,2,3,4]    
            data:[] // 同步方式setOption時，若是設置了markPoint和markLine data不可爲空
    };

    // 從2.x裏主題文件裏抄來設置 此處略
    var theme = {
    };
    // 主題註冊  至關於存儲了了主題名字和對象的對應關係
    echarts.registerTheme('infograph', theme);
    
    $(document).ready(function(){
        pie = echarts.init(document.getElementById('pie1'), 'infograph'); // 帶主題的初始化
        pie.setOption(pieopt);
        function eConsolePieClick(e) {
                console.log(e); // 3.0 e有嵌套結構，不能夠JSON.stringify
        }
        pie.on('click',  eConsolePieClick); // 點擊事件綁定 與2.0不一樣
        
        bar = echarts.init(document.getElementById('bar1'));
        bar.setOption(baropt);
        
        line =  echarts.init(document.getElementById('line1'));
        line.setOption(lineopt);
        
        // 多圖聯動 3.0.1fix
        pie.group = 'group1';
        bar.group = 'group1';
        line.group =  'group1'; 
        echarts.connect('group1');
        //    echarts.connect([pie, bar, line]); // 聯動的兩種寫法
    });
</script>
<script>    
    function getPie(){
        var resp = "{\"objName\":\"告警\", \"dispName\":[\"越限\",\"異常\",\"事故\",\"告知\",\"變位\"], \"value\":[10.0, 20.0, 15.0, 12.0, 29.0], \"id\":[\"111\", \"112\", \"113\",\"114\",\"115\"]}";
        var respobj = JSON.parse(resp); // 數據
        // 餅圖的名字從控件選擇中拼出來
            var piedata = []; // 餅的數字
            var pieLegend = []; //　餅的圖例
            $(respobj.value).each(function(i){
                piedata.push({name:respobj.dispName[i], value:respobj.value[i]}); // 餅的數據是對象 {name:"str", value:number}
                pieLegend.push(respobj.dispName[i]); // 圖例和每塊餅的name要一致
            });    
            var opt = {
                title:{
                    text:    respobj.objName
                },    
                legend:{
                    orient : 'vertical',
                    x : 'right',   
                    y:"bottom",  
                    data:pieLegend
                },
                series:[
                    {
                        name:"pie1",
                         type: 'pie',
                        data:piedata    
                    }    
                ]
            };
            pie.setOption(opt);     
    }
    
    function getBar(){
        var resp = "{\"objName\":\"TITLE here\", \"dispName\":[\"a1\",\"a2\",\"a3\",\"a4\",\"a5\"], \"value\":[[4,3,3,6,1],[2,2,3,3,1],[7,3,5,6,1],[4,2,3,6,3]], \"id\":[\"001\",\"002\",\"003\",\"004\",\"005\"]}";
        var respobj = JSON.parse(resp); // 數據
        var xAxis = [];
        var series = [];
        $(respobj.dispName).each(function(i){
            xAxis.push(respobj.dispName[i]);
         });
        
        $(respobj.value).each(function(i){
            var new_serie = JSON.parse(JSON.stringify(barserie));
            new_serie.name = bar_name[i];
            new_serie.data = respobj.value[i];
            series.push(new_serie);
        });    
        var opt = {
            title:{
                text:respobj.objName
            },
            xAxis:{
                data:xAxis
            },
            legend:{
                show:true,
                x:'right',
                 y:'top',
                data: bar_name
            },
            series:series
        }
        bar.setOption(opt);     
    }
    
    function getLine(){
        var resp = "{\"dataArray\":[[120.33, 132.12, 101.09, 134.22, 90.17, 230.50, 210.79, 120.79], [220, 182, 191, 234, 290, 330, 310, 350]], \"curveName\":[\"越限\", \"異常\"], \"objName\":\"測試曲線\"}";
        console.log(resp);
        var respobj = JSON.parse(resp); // 數據
        for (var i=0; i<280; i++)
        {
                respobj.dataArray[0].push(Math.round(Math.random() * 120-38));
                respobj.dataArray[1].push(Math.round(Math.random() * 200-51));
        }
        var xAxis = [];
        var series = [];
        var legend = []
        for (var i=0; i<respobj.dataArray.length; i++)
        {
            var new_series = JSON.parse(JSON.stringify(lineserie));  // 能夠用預設的不一樣風格的曲線
            new_series.name = respobj.curveName[i];
            new_series.data = respobj.dataArray[i]; 
            legend.push(respobj.curveName[i]); // 必須和曲線的name一致 每條曲線的名字必須不同，不然圖例會出錯
            series.push(new_series);
        }
        xAxis = getDayXAsis(respobj.dataArray[0].length);
        var opt = {
            title:{
                text: respobj.objName    
            },
            legend:{
                show:true,
                x: 'right', // 'center' | 'left' | {number},
                y: 'top', // 'center' | 'bottom' | {number}
                data:legend
            },
            dataZoom : [{
                type:'slider', // 3.0中縮放的默認type是inside，須要2.x中的縮放條須要寫type:'slider'
                show : true,
                start : 40,
                end : 60
            },
             {
                type: 'inside', // 支持鼠標縮放
                realtime: true,
                start: 30,
                end: 70 
              }],
            xAxis:[{
                data:xAxis
            }],
            series:series
        };
                
        console.log(JSON.stringify(opt, null, 4));
        line.setOption(opt);         
    }
    // 根據數據點數建立日曲線的x軸標籤
    function getDayXAsis(split_num)
    {
        var xasis = [];
        // 若是是288點就5分鐘一個標籤 96點就15分鐘一個標籤
        var offset = 86400/split_num;
        var d = new Date(1986, 4, 25);
        for (var i=0; i<split_num; i++)
        {
            var nd = new Date();
            nd.setTime(d.getTime() +offset*1000*i);    
            var str = (nd.getHours())+":"+(nd.getMinutes());
            xasis.push(str);
        }
        return xasis;
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。