echart图表有哪些（使用laravel和ECharts实现折线图效果的例子）

echart图表有哪些

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

1、首先引入echart.js

?

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

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

?

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

3、echarts折线图的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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）路由

?

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

（2）方法

?

1 2 3 4 5 6 7 8 9 10

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<li class="contain" style="width: 84%;" id="contain"></li>    <script type="text/javascript">     var names = []; // 设置两个变量用来存变量   var ttls = [];   var time = Date.parse(new Date()).toString().substr(0, 10); // 获取当前时间，精确到秒，但因为是毫秒级的，会多3个0，变成字符串后去掉   time = parseInt(time);   function getData()   {    $.post("{{ url('/axis') }}", {     "_token": "{{ csrf_token() }}"    }, function(data) {     $.each(data, function(i, item) {      names.push(item.name);      if((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) { // 小于0就==0，       ttls.push(ttl);      } else {       ttls.push(0);      }     });    });   }   getData(); // 一定不能忘了，调用     // 实现画图的功能   function chart() {    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,     xAxis : [      {       axisLine: {        lineStyle: { color: '#333' }       },       axisLabel: {        rotate: 30,        interval: 0       },       type : 'category',       boundaryGap : false,       data : names // x的数据，为上个方法中得到的names      }     ],     yAxis : [      {       type : 'value',       axisLabel : {        formatter: '{value} 秒'       },       axisLine: {        lineStyle: { color: '#333' }       }      }     ],     series : [      {       name:'过期剩余时间',       type:'line',       smooth: 0.3,       data: ttls // y轴的数据，由上个方法中得到的ttls      }     ]    };    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);   }     setTimeout('chart()', 1000); // 为什么加定时器？因为上面是一起执行的，可能还未取得数据，便已经将图画好了，图上就没有数据，所以这里我延迟了1s，    </script>

（5）大功告成！！

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

原文链接：https://blog.csdn.net/snow_small/article/details/78853594