使用Echarts实现数据可视化

---

前言

数据可视化：

简单来说，数据可视化是借助于图形化手段，清晰有效地传达与沟通信息。
化抽象为具体，让我们看数据更加直观
话不多说，先来推荐个可视化学习网站：链接: 点这里

---

一、Apache ECharts

一个基于 JavaScript 的开源可视化图表库

二、使用步骤

1.引入库

代码如下（示例）：

 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>

2.创建可视化容器

代码如下（示例）：

  <div id="myChart" style="width: 600px;height: 500px;"></div>
  <div id="myChart2" style="width:600px;height: 500px;"></div>

3.获取容器，设置数据并初始化 echarts 实例

代码如下（示例）：

    var myChart = echarts.init(document.getElementById('myChart'))
    var myChart2 = echarts.init(document.getElementById('myChart2'))
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            },
            ]
        };
         option2 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '搜索引擎' },
                        { value: 735, name: '直接访问' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };//初始化
        var myChart = echarts.init(document.getElementById('myChart'))
        var myChart2 = echarts.init(document.getElementById('myChart2'))

4.通过 setOption 方法生成图表

代码如下（示例）：

    myChart.setOption(option)
    myChart2.setOption(option2)

结果如图：

生成的图还是动态的哟，是不是很简单！
源码如下：

	//引入Apache ECharts图表库
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
    <div id="myChart" style="width: 600px;height: 500px;"></div>
    <div id="myChart2" style="width: 600px;height: 500px;"></div>
    <!-- 创建可视化容器 -->
    <script>
        var myChart = echarts.init(document.getElementById('myChart'))
        var myChart2 = echarts.init(document.getElementById('myChart2'))
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            },
            ]
        };
        option2 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '搜索引擎' },
                        { value: 735, name: '直接访问' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('myChart'))
        var myChart2 = echarts.init(document.getElementById('myChart2'))
        //生成图表
        myChart.setOption(option)
        myChart2.setOption(option2)
    </script>

---

总结

使用Apache ECharts图表库可以快速生成可视化图表，基本步骤：
1、引入Apache ECharts图表库
2、创建可视化容器
3、获取容器，设置option数据
4、通过 echarts.init 方法初始化echarts 实例
5、通过 setOption 方法生成图表