Echarts数据可视化

参考文章1

参考文章2

ECharts介绍
官网链接：Apache ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts入门教程

官方教程：5 分钟上手 ECharts

 

第一步：下载并引入scharts.js文件

获取 ECharts：下载地址

1、点击Dist跳转到Github。

2、点击点进去

 

 3、右键单击Raw，选择链接另存为

这样我们就得到了需要的文件

第二步：编写代码

 

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

</body>
<script>
    var myChart = echarts.init(document.getElementById('main'));

    option =
    names = [];
    ages = [];
    axios.get("/getlist").then(res=>{

        for (var i = 0; i < res.data.length; i++) {
            names.push(res.data[i].username);
            ages.push(res.data[i].age);
        }
        myChart.setOption( {
            xAxis: {
                type: 'category',
                data: names,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: ages,
                    type: 'line'
                }
            ]
        });

    })

    option001 = {
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '女'
                    },
                    {
                        value: 234,
                        name: '男'
                    }

                ]
            }
        ]
    };
    var myChart001 = echarts.init(document.getElementById('code'));
    list = [];
    axios.get("/list").then(res => {

        let data = res.data;
    
        myChart001.setOption({
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value:  data[0],
                            name: '女'
                        },
                        {
                            value: data[1],
                            name: '男'
                        }

                    ]
                }
            ]
        })

    })




</script>

 

利用异步请求将关键地方的数据换成数据库中需要分析的数据就可以实现自己的图表

绑定数据库的js代码

  var myChart001 = echarts.init(document.getElementById('code'));
    list = [];
    axios.get("/list").then(res => {

        let data = res.data;

        myChart001.setOption({
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value:  data[0],
                            name: '女'
                        },
                        {
                            value: data[1],
                            name: '男'
                        }

                    ]
                }
            ]
        })

    })

 如果还想要更多类型的图表可以参考官方文档有非常多实例

官方地址