重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

这篇文章给大家介绍使用laravel和ECharts怎么实现一个折线图效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联专注于企业全网营销推广、网站重做改版、德江网站定制设计、自适应品牌网站建设、H5建站商城开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为德江等各大城市提供网站开发制作服务。

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

        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,    

关于使用laravel和ECharts怎么实现一个折线图效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


名称栏目:使用laravel和ECharts怎么实现一个折线图效果-创新互联
网站网址:http://cqcxhl.com/article/dodigp.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP