echarts—echarts的简单应用

一、什么是echarts

echarts是一个使用JavaScript实现的开源可视化库。可以使用echarts制作折线图、柱状图、散点图、饼图、k线图等等。

二、下载安装

1. 下载

进入echarts官网，点击下载，有具体的下载方法。

2. 安装

下载完成后是一个js文件，直接将其放入需要使用的项目中，使用时导入。（具体自己定，导入时填写自己的路径即可）。

echarts下载完成.png

三、使用

在文件中导入时要注意，echarts时基于JavaScript实现的开源可视化库。所以在导入时应该在导入js文件后再导入，举例：

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

1. 固定数据使用（可以在官方文档学习）

<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.设置echart参数
        var option = {
            title: {
                text: '公司各部门职员人数统计'
            },
            tooltip: {},
            legend: {
                //data: ['职员人数']
            },
            xAxis: {
                {#type: 'category',   //类别#}
                data: ["人事部", "后勤部", "安保部", "市场部", "技术部", "新媒体部", "法务部", "董事会", "财务部"]
            },
            yAxis: {},
            series: [{
                name: '职员人数',
                type: 'bar',
                data: [990, 100, 0, 907, 961, 943, 0, 1, 1001],
            }]
        };
        // 3.将参数设置给div对象
        myChart.setOption(option);
    })
</script>

固定数据柱状图.png

2. 动态数据使用（结合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.设置echart参数
        var option = {
            title: {
                text: '公司各部门职员人数统计'
            },
            tooltip: {},
            legend: {
                //data: ['职员人数']
            },
            xAxis: {
                {#type: 'category',   //类别#}
                data: []
            },
            yAxis: {},
            series: [{
                name: '职员人数',
                type: 'bar',
                data: [],
            }]
        };
        {#// 3.将参数设置给div对象#}
        {#myChart.setOption(option);#}

        // 4.发送ajax请求
        $.ajax({
            url: '/indexAjax/',
            type: 'get',
            success: function(result){
                // alert('访问后台成功');
                console.log(result);
                // (1)获取数据
                var x = [];  //部门名称
                var y = [];  //部门人数

                for (var i in result){
                    // js的for循环，遍历的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).将参数设置给div对象
                myChart.setOption(option);
            },
            error: function(result){
                alert('访问后台失败')
            }
        })
    })
</script>

echarts和ajax、后台一起使用，将后台传入的数据应用在echarts，展示在页面

更多请参考echarts官网

如有不妥，欢迎指正。