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

Laravel  /  管理员 发布于 8年前   284

1、首先引入echart.js

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

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}     }    },    calculable : true, // 是否启动拖拽重计算属性，默认false    xAxis : [ // x坐标轴     {      axisLine: { // x坐标轴颜色       lineStyle: { color: '#333' }      },      axisLabel: { // x轴的数据会旋转30度       rotate: 30,       interval: 0      },      type : 'category',      boundaryGap : false, // x轴从0开始      data : [] // x轴数据     }    ],    yAxis : [ // y轴     {      type : 'value',      axisLabel : {       formatter: '{value} 秒' // y轴的值都加上秒的单位      },      axisLine: {       lineStyle: { color: '#333' }      }     }    ],    series : [ // 设置图标数据用     {      name:'时间',       type:'line',      smooth: 0.3, // 线有弧度      data: [] // y轴数据     }    ]   };   // 使用刚指定的配置项和数据显示图表。   myChart.setOption(option); 

4、实现功能

（1）路由

Route::get('/', 'UserController@index');Route::post('/axis', 'UserController@axis');

（2）方法

public function index() {  return view('user.index'); }// 是ajax所用的的方法，得到要显示的数据，返回数组public function axis() {  $key = Key::all('name', 'ttl', 'created_time');  return $key; }

（3）当访问/首页时，到index.blade.php

（4）index.blade.php的内容

（5）大功告成！！

以上这篇使用laravel和ECharts实现折线图效果的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序使用echarts获取数据并生成折线图
• Layer+Echarts构建弹出层折线图的方法
• echarts多条折线图动态分层的实现方法
• Echarts动态加载多条折线图的实现代码
• 基于mpvue小程序使用echarts画折线图的方法示例
• vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
• Echarts教程之通过Ajax实现动态加载折线图的方法
• jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
• jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
• jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
• echarts实现折线图的拖拽效果