使用laravel和ECharts怎么实现一个折线图效果-创新互联

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的内容