使用laravel和ECharts实现折线图效果

最新推荐文章于 2024-10-30 16:15:58 发布

snow_small

最新推荐文章于 2024-10-30 16:15:58 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： php小白成长之路文章标签： laravel ECharts ajax 折线图

本文链接：https://blog.youkuaiyun.com/snow_small/article/details/78853594

本文档详细介绍了如何在laravel项目中结合ECharts库，通过ajax技术来实现动态折线图的展示。首先从引入echarts.js文件开始，接着配置路由，最后在index.blade.php中编写相关前端代码来完成图表的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先引入echart.js

<script type="text/javascript" src="{
  
  { asset('/public/js/echarts.js') }}"></script>

2、html页面，要有一个布局容器，用来显示图像，一定要设置宽和高

<div class="contain" style="width: 84%;" id="contain"></div>

3、echarts折线图的使用

var myChart = echarts.init(document.getElementById("contain"));

            option = {
                title : {
                    text: '时间变化图'   // 标题
                },
                tooltip : {
                    trigger: 'axis'    // 折线图
                },
                legend: {
                    data:['时间']   // 图例，就是折线图上方的符号
                },
                toolbox: {   // 工具箱，在折线图右上方的工具条，可以变成别的图像
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }