百度開源外掛echarts介紹及如何使用

氣宇軒昂_2017發表於2020-11-13
Echarts

前言

如果你想要用較少的程式碼實現比較酷炫的資料統計表，echarts是值得你考慮的一種實現方式。官網提供了很多例項供參考：http://echarts.baidu.com/examples.html。感興趣可以先一睹為快！！！

圖1

 

 圖2

 

 圖1,2是我們常見到非常高大上的大資料展示屏的效果，非常的高大上，這實現效果全部是是用外掛echarts來實現的。下面給大家介紹怎麼去使用開源外掛。

 

環境搭建

這個環境搭建so easy! 其實只有一個echarts.min.js而已。可以從官網下載http://echarts.baidu.com/download.html。根據自己的需要可以常用、精簡、安裝或者原始碼包，甚至可以自定義下載。
在你的網頁里加入這個js檔案就有了echarts的開發環境，是不是so easy！

建立演示例項

雖說官方給出了很多演示例項，同時也給出了一些幫助文件。但是個人認為還是有必要弄清楚如何利用官方所提供的js建立實現一些圖表，具體每個圖表的引數有哪些，怎麼設定，這就需要檢視相關的幫助文件。而我這裡所說的就是指明怎麼建立及一些值得注意的地方。

1）引入echarts.js。

<script type="text/javascript" src="./js/echarts.js"></script>

2）建立一個DOM容器。熟悉html的朋友應該很清楚，一個html就是一個DOM樹，各個標籤節點都是dom節點。DOM容器就是裡面可以存放其他節點標籤，比如div。

<div id="main" style="width: 500px;height: 400px;"></div>

3）echarts.init(dom容器)。dom容器必須是html的節點，如果是使用jQuery獲取的則必須指定集合中的一個元素節點，比如(“#main”)則表示jQuery物件。$(“#main”)[0]則表示一個id為main的節點。

var myChart = echarts.init(document.getElementById("main"));

4）設定引數。
方法一：

var option = {
                title:{
                    text:"第一個圖示演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['銷量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["銷量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            };

            myChart.setOption(option);

方法二：

myChart.setOption({
                title:{
                    text:"第一個圖示演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['銷量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["銷量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            });

完成以上就已經實現了一個條形圖。對就是這麼簡簡單單的就實現了圖表，正如官網說的五分鐘學會echarts。
具體每一個圖表的相關設定屬性需要檢視相對額幫助文件！！！http://echarts.baidu.com/api.html。

演示例項

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
    <div class="col-xs-4">
            <h3>條形圖</h3>
            <div id="main" style="width: 500px;height: 400px;"></div>
            <script type="text/javascript">
            var myChart = echarts.init(document.getElementById("main"));
            var option = {
                title:{
                    text:"第一個圖示演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['銷量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["銷量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            };

            // myChart.setOption(option);

            myChart.setOption({
                title:{
                    text:"第一個圖示演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['銷量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","褲子","襪子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["銷量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            });

        </script>
    </div>
    <div class="col-xs-4">
        <h3>餅狀圖</h3>
        <div id="tbSecond" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var tbSecond = echarts.init(document.getElementById("tbSecond"));
            // alert(tbSecond);
            var pieOption = {
                    title:{
                        text:"餅狀圖"
                    },
                    series : [
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius: '55%',
                            data:[
                                {value:235, name:'視訊廣告'},
                                {value:274, name:'聯盟廣告'},
                                {value:310, name:'郵件營銷'},
                                {value:335, name:'直接訪問'},
                                {value:400, name:'搜尋引擎'}
                            ]
                        }
                    ]
                };
            // alert(pieOption);
            tbSecond.setOption(pieOption);

        </script>
    </div>
    <div class="col-xs-4">
        <h3>餅狀圖加陰影</h3>
        <div id="bzt2" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var bzt2 = echarts.init(document.getElementById("bzt2"));
            bzt2.setOption({
                title:{
                        text:"餅狀圖"
                    },
                itemStyle:{
                    emphasis:{
                        shadowBlur:200,
                        shadowColor:"rgba(0,0,0,0.8)"
                    }
                },
                series:[
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius: '55%',
                            data:[
                                {value:235, name:'視訊廣告'},
                                {value:274, name:'聯盟廣告'},
                                {value:310, name:'郵件營銷'},
                                {value:335, name:'直接訪問'},
                                {value:400, name:'搜尋引擎'}
                            ]
                        }
                    ]       
            });
        </script>
    </div>
    <div class="col-xs-4">
        <h3>餅狀圖加背景</h3>
        <div id="bzt3" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var bzt3 = echarts.init(document.getElementById("bzt3"));
            bzt3.setOption({
                title:{
                        text:"餅狀圖"
                    },
                backgroundColor:"#EEEFF4",
                itemStyle:{
                    emphasis:{
                        shadowBlur:200,
                        shadowColor:"rgba(0,0,0,0.8)"
                    }
                },
                series:[
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius: '55%',
                            data:[
                                {value:235, name:'視訊廣告'},
                                {value:274, name:'聯盟廣告'},
                                {value:310, name:'郵件營銷'},
                                {value:335, name:'直接訪問'},
                                {value:400, name:'搜尋引擎'}
                            ]
                        }
                    ]
            });
        </script>
    </div>
    <div class="col-xs-4">
        <h3>放大縮小</h3>
        <div id="dataZoom" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var dataZoom = echarts.init($("#dataZoom")[0]);
            dataZoom.setOption(
                {       
                    xAxis:{
                                    type:"value"
                                },
                                yAxis:{
                                    type:"value"
                                },
                                dataZoom:[
                                    {
                                        type:"slider",
                                        start:10,
                                        end:60
                                    }
                                ],
                                series:[
                                    {
                                        type:"scatter",
                                        itemStyle:{
                                            normal:{
                                                opacity:0.8
                                            }
                                        },
                                        symbolSize:function(val)
                                        {
                                            return val[2] * 40;
                                        },
                                        data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
                                    }
            ]});
        </script>
    </div>
    <div class="col-xs-4">
        <h3>Scatter-large</h3>
        <div id="sl" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var sl = echarts.init($("#sl")[0]);
            var sloption = {
                            tooltip : {
                                trigger: 'axis',
                                showDelay : 0,
                                axisPointer:{
                                    show: true,
                                    type : 'cross',
                                    lineStyle: {
                                        type : 'dashed',
                                        width : 1
                                    }
                                },
                                zlevel: 1
                            },
                            legend: {
                                data:['sin','cos']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataZoom : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            xAxis : [
                                {
                                    type : 'value',
                                    scale:true
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true
                                }
                            ],
                            series : [
                                {
                                    name:'sin',
                                    type:'scatter',
                                    large: true,
                                    symbolSize: 3,
                                    data: (function () {
                                        var d = [];
                                        var len = 10000;
                                        var x = 0;
                                        while (len--) {
                                            x = (Math.random() * 10).toFixed(3) - 0;
                                            d.push([
                                                x,
                                                //Math.random() * 10
                                                (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                            ]);
                                        }
                                        //console.log(d)
                                        return d;
                                    })()
                                },
                                {
                                    name:'cos',
                                    type:'scatter',
                                    large: true,
                                    symbolSize: 2,
                                    data: (function () {
                                        var d = [];
                                        var len = 20000;
                                        var x = 0;
                                        while (len--) {
                                            x = (Math.random() * 10).toFixed(3) - 0;
                                            d.push([
                                                x,
                                                //Math.random() * 10
                                                (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                            ]);
                                        }
                                        //console.log(d)
                                        return d;
                                    })()
                                }
                            ]
                        };

            sl.setOption(sloption);
        </script>
    </div>
    <div class="col-xs-4">
        <h3>微博簽到</h3>
        <div id="qd" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var qd = echarts.init($("#qd")[0]);
            qd.showLoading();

            $.get('http://echarts.baidu.com/gallery/data/asset/data/weibo.json', function (weiboData) {
                qd.hideLoading();

                weiboData = weiboData.map(function (serieData, idx) {
                    var px = serieData[0] / 1000;
                    var py = serieData[1] / 1000;
                    var res = [[px, py]];

                    for (var i = 2; i < serieData.length; i += 2) {
                        var dx = serieData[i] / 1000;
                        var dy = serieData[i + 1] / 1000;
                        var x = px + dx;
                        var y = py + dy;
                        res.push([x, y, 1]);

                        px = x;
                        py = y;
                    }
                    return res;
                });
                qd.setOption(option = {
                    backgroundColor: '#404a59',
                    title : {
                        text: '微博簽到資料點亮中國',
                        subtext: 'From ThinkGIS',
                        sublink: 'http://www.thinkgis.cn/public/sina',
                        left: 'center',
                        top: 'top',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    legend: {
                        left: 'left',
                        data: ['強', '中', '弱'],
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    geo: {
                        name: '強',
                        type: 'scatter',
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [{
                        name: '弱',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(37, 140, 249, 0.8)',
                                color: 'rgba(37, 140, 249, 0.8)'
                            }
                        },
                        data: weiboData[0]
                    }, {
                        name: '中',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(14, 241, 242, 0.8)',
                                color: 'rgba(14, 241, 242, 0.8)'
                            }
                        },
                        data: weiboData[1]
                    }, {
                        name: '強',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(255, 255, 255, 0.8)',
                                color: 'rgba(255, 255, 255, 0.8)'
                            }
                        },
                        data: weiboData[2]
                    }]
                });
            });
        </script>
    </div>
    <div class="col-xs-4">
        <h3>極座標雙軸線</h3>
        <div id="jzb" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var jzb = echarts.init($("#jzb")[0]);
            var data = [];

            for (var i = 0; i <= 100; i++) {
                var theta = i / 100 * 360;
                var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
                data.push([r, theta]);
            }

            var jzboption = {
                title: {
                    text: '極座標雙數值軸'
                },
                legend: {
                    data: ['line']
                },
                polar: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                angleAxis: {
                    type: 'value',
                    startAngle: 0
                },
                radiusAxis: {
                },
                series: [{
                    coordinateSystem: 'polar',
                    name: 'line',
                    type: 'line',
                    data: data
                }]
            };

            jzb.setOption(jzboption);
        </script>
    </div>
    <div class="col-xs-4">
        <h3>瀏覽器佔比</h3>
        <div id="llqzb" style="width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            var llqzb = echarts.init($("#llqzb")[0]);
            var llqzboption = {
                    title: {
                        text: '瀏覽器佔比變化',
                        subtext: '純屬虛構',
                        x:'right',
                        y:'bottom'
                    },
                    tooltip: {
                        trigger: 'item',
                        backgroundColor : 'rgba(0,0,250,0.2)'
                    },
                    legend: {
                        data: (function (){
                            var list = [];
                            for (var i = 1; i <=28; i++) {
                                list.push(i + 2000);
                            }
                            return list;
                        })()
                    },
                    visualMap: {
                        color: ['red', 'yellow']
                    },
                    radar: {
                       indicator : [
                           { text: 'IE8-', max: 400},
                           { text: 'IE9+', max: 400},
                           { text: 'Safari', max: 400},
                           { text: 'Firefox', max: 400},
                           { text: 'Chrome', max: 400}
                        ]
                    },
                    series : (function (){
                        var series = [];
                        for (var i = 1; i <= 28; i++) {
                            series.push({
                                name:'瀏覽器（資料純屬虛構）',
                                type: 'radar',
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                          width:1
                                        }
                                    },
                                    emphasis : {
                                        areaStyle: {color:'rgba(0,250,0,0.3)'}
                                    }
                                },
                                data:[
                                  {
                                    value:[
                                        (40 - i) * 10,
                                        (38 - i) * 4 + 60,
                                        i * 5 + 10,
                                        i * 9,
                                        i * i /2
                                    ],
                                    name:i + 2000
                                  }
                                ]
                            });
                        }
                        return series;
                    })()
                };
                llqzb.setOption(llqzboption);
        </script>
    </div>
</body>
</html>

 

 

 

 

 

 

總結

echarts資料可以在設定引數的時候繫結，也可以通過非同步獲取的方式繫結。具體請參考相關的API。
生生不息，學無止境！同學習，共進步！如有興趣加加QQ群：186841119 一起交流學習。

 

相關文章