一、什么是echarts

echarts是一個使用JavaScript實現(xiàn)的開源可視化庫。可以使用echarts制作折線圖、柱狀圖、散點圖、餅圖、k線圖等等。

二、下載安裝

1. 下載

進入echarts官網(wǎng)，點擊下載，有具體的下載方法。

2. 安裝

下載完成后是一個js文件，直接將其放入需要使用的項目中，使用時導(dǎo)入。（具體自己定，導(dǎo)入時填寫自己的路徑即可）。

echarts下載完成.png

三、使用

在文件中導(dǎo)入時要注意，echarts時基于JavaScript實現(xiàn)的開源可視化庫。所以在導(dǎo)入時應(yīng)該在導(dǎo)入js文件后再導(dǎo)入，舉例：

# 注意是自己的文件路徑
<script src="/static/js/jquery.min.js"></script>
<script src="/static/lib/echarts/js/echarts.min.js"></script>

1. 固定數(shù)據(jù)使用（可以在官方文檔學(xué)習(xí)）

<script src="/static/js/jquery.min.js"></script>
<script src="/static/lib/echarts/js/echarts.min.js"></script>
<script>
    $(function(){
        // 1.獲取div對象
        var myChart = echarts.init(document.getElementById('show'));
        // 2.設(shè)置echart參數(shù)
        var option = {
            title: {
                text: '公司各部門職員人數(shù)統(tǒng)計'
            },
            tooltip: {},
            legend: {
                //data: ['職員人數(shù)']
            },
            xAxis: {
                {#type: 'category',   //類別#}
                data: ["人事部", "后勤部", "安保部", "市場部", "技術(shù)部", "新媒體部", "法務(wù)部", "董事會", "財務(wù)部"]
            },
            yAxis: {},
            series: [{
                name: '職員人數(shù)',
                type: 'bar',
                data: [990, 100, 0, 907, 961, 943, 0, 1, 1001],
            }]
        };
        // 3.將參數(shù)設(shè)置給div對象
        myChart.setOption(option);
    })
</script>

固定數(shù)據(jù)柱狀圖.png

2. 動態(tài)數(shù)據(jù)使用（結(jié)合ajax和后臺）

<script src="/static/js/jquery.min.js"></script>
<script src="/static/lib/echarts/js/echarts.min.js"></script>
<script>
    $(function(){
        // 1.獲取div對象
        var myChart = echarts.init(document.getElementById('show'));
        // 2.設(shè)置echart參數(shù)
        var option = {
            title: {
                text: '公司各部門職員人數(shù)統(tǒng)計'
            },
            tooltip: {},
            legend: {
                //data: ['職員人數(shù)']
            },
            xAxis: {
                {#type: 'category',   //類別#}
                data: []
            },
            yAxis: {},
            series: [{
                name: '職員人數(shù)',
                type: 'bar',
                data: [],
            }]
        };
        {#// 3.將參數(shù)設(shè)置給div對象#}
        {#myChart.setOption(option);#}

        // 4.發(fā)送ajax請求
        $.ajax({
            url: '/indexAjax/',
            type: 'get',
            success: function(result){
                // alert('訪問后臺成功');
                console.log(result);
                // (1)獲取數(shù)據(jù)
                var x = [];  //部門名稱
                var y = [];  //部門人數(shù)

                for (var i in result){
                    // js的for循環(huán)，遍歷的i是索引值
                    var deptObj = result[i];
                    x.push(deptObj.dept_name);
                    y.push(deptObj.total_num);
                }

                // (2).將獲取的值賦給echarts
                option['xAxis']['data'] = x;
                option['series'][0]['data'] = y;

                // (3).將參數(shù)設(shè)置給div對象
                myChart.setOption(option);
            },
            error: function(result){
                alert('訪問后臺失敗')
            }
        })
    })
</script>

echarts和ajax、后臺一起使用，將后臺傳入的數(shù)據(jù)應(yīng)用在echarts，展示在頁面

更多請參考echarts官網(wǎng)

如有不妥，歡迎指正。