百度echarts折线图使用示例
发布日期:2022-03-11 15:03:37 浏览次数:10 分类:技术文章

本文共 2693 字,大约阅读时间需要 8 分钟。

引入echarts.js 定义一个容器存放echarts图表
var myChart=echarts.init(document.getElementById("charts")); option = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data:['今日','昨日','前日'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, //x轴间隔3个单位显示 axisLabel :{ interval: 3 }, data: [] }, yAxis: { type: 'value' }, series: [ { name:'今日', type:'line', data:[] }, { name:'昨日', type:'line', data:[] }, { name:'前日', type:'line', data:[] } ] }; myChart.setOption(option); function getCharts(type,tag_id) { var hoursList=[]; var todays=[]; var yesterdays=[]; var beforeYesterdays=[]; $.ajax({ url:"/track/stat/ajax/getcharts", data:{"tag_id":tag_id,"type":type}, success:function(data){ $.each(data.hoursList,function(n,value){ hoursList.push(value); }); $.each(data.todays,function(n,value){ todays.push(value); }); $.each(data.yesterdays,function(n,value){ yesterdays.push(value); }); $.each(data.beforeYesterdays,function(n,value){ beforeYesterdays.push(value); }); myChart.setOption({ title: { text: '' }, xAxis: { data: hoursList }, series: [ { // 根据名字对应到相应的系列 name: '今日', data: todays }, { name: '昨日', data: yesterdays }, { name: '前日', data: beforeYesterdays } ] }); } }); };

  

文末小福利免费视频资源网站:

转载于:https://www.cnblogs.com/vicF/p/8037940.html

转载地址:https://blog.csdn.net/weixin_30267785/article/details/99173120 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:.Net学习笔记----2015-07-13(列表)
下一篇:NAND NOR Flash 和MTD

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年03月22日 08时43分02秒