Echarts的简单使用

Echarts的简单介绍

        官网链接 Apache ECharts

        Echarts就是一个能够让我们更加数据化的查看我们的数据信息，通过图表，将我们的数据进行可视化展示。

使用

        下载地址在官网中的下载当中，点击dist进入github进行下载。

        点击进入文件后，点击row另存为，或者直接右击另存为，将文件保存到本地

饼图

        首先，我们可以去官网复制一个实例，进行修改。这是我已经完成的实例，我使用的是饼图中的圆环图。通过后台数据进行动态渲染。

index.html

//这个是给echarts的一个容器
<div id="main" style="width: 600px;height:400px;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="/echarts.js"></script> //这是我们刚刚下载下来的echarts.js文件

<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    let brower = [];
    let names = [];
    $.ajax({
        url: "*********", //这里是我们后台数据的一个接口
        type: 'get',
        success: res => {
            // console.log(res)
            //获取数据后进行循环处理，处理成echarts的json类型
            $.each(res, function (index, item) {
                //这是数据类型详情
                names.push(item.name)
                //这是展示数据，变量名称是固定的 name和value
                brower.push({
                    name: item.name,
                    value: item.value,
                })
            })
            // 指定图表的配置项和数据
            var option = {
                //标题组件
                title: {
                    text: '发文渠道',
                    textStyle: {
                        color: "rgb(129, 214, 220)"
                    },
                    left: 'center',
                    top: 'center'
                },
                //提示框组件，就是我们将鼠标放到该类型的位置，能够将数量展示出来
                tooltip: {
                    trigger: 'item'
                },
                //图例组件
                legend: {
                    x: 'center',
                    y: 'bottom',
                    padding: [0, 0, 0, 0],
                    data: names
                },
                //系列列表。每个系列通过 type 决定自己的图表类型
                series: [
                    {
                        type: 'pie',
                        data: brower,
                        radius: ['40%', '70%']  //设置圆环，删除后为饼图
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })
</script>

控制器代码

        控制器中的代码就是获取数据

$res = Channel::all(['name', 'value'])->toArray();
return $res;

        这边是我完成后的一个效果实例，上面的代码中的提示框组件能够将数据的数量展示出来。

        这是一个饼图的实例，如果我们想要使用柱状图，也是需要处理数据的。通过官网给出的柱状图实例。我们能够看出，它的数据是x中是一个数据，展示的数据是一个数组。

柱状图

        我们的饼图我是通过在前端使用循环处理的，你在后端也可以进行处理，柱状图数据我们需要数据进行循环，例如：将姓名放在一个数组里面，将年龄放在一个数组里面，进行拼接。下面是我组合完的数据。

$res = Channel::all(['name', 'value'])->toArray();
foreach ($res as $v){
   $name[] = $v['name'];
   $value[] = $v['value'];
}
$data = [
   'name'=>$name,
   'value'=>$value
];
return $data;

        我们在把这个数据放入我们的柱状图相对应的位置当中，就可以进行数据展示。

折线图

        折线图的操作和柱状图操作差不多，图表中有区别的就是饼图，数据是一个小数组，里面有统计数据（软件，下载次数），而柱状图和折线图都是固定的，例如姓名数组，只存放用户名称，年龄数组，只存放用户年龄。

        简单的折线图操作和柱状图一样，没有发生改变。

总结

        使用Echarts图表展示数据还是相对来说简单的，我们只需要一下几步

1.获取到echarts.js文件

2.将Echarts.js文件放到我们的项目当中

3.去官网复制一个图表实例（柱状图/饼图/折线图）

4.要记得给一个空间来放置这个实例

5.通过ajax获取到我们需要的数据

6.将数据渲染进Echarts实例

7.展示完成后的图表