重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家介绍使用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的内容
关于使用laravel和ECharts怎么实现一个折线图效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。