echars

更新时间:02-08 教程 由 别想 分享

echarts是一款可视化图表库,可以准确、直观地展示各类数据。而MySQL是一款流行的关系型数据库管理系统,其功能强大,可以完成数据存储、查询和管理等一系列操作。

使用这两款工具可以实现数据的可视化展示和数据存储管理。下面是一个echarts mysql实例:

require(['echarts', 'echarts/chart/bar', 'echarts/chart/line', 'user'], function(ec, ecBar, ecLine, user){// echarts图表渲染引擎初始化var mychart = ec.init(document.getElementById('show'));// 定义echarts的optionvar option = {legend: {data:['访问次数']},tooltip : {trigger: 'axis'},calculable : true,xAxis : [{type : 'category',data : []}],yAxis : [{type : 'value'}],series : [{name:'访问次数',type:'line',data:[],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}}]};// 设置option的xAxis数据和series数据user.getRequestData(function(result){option.xAxis[0].data = result.xAxisData;option.series[0].data = result.seriesData;// echarts图表渲染mychart.setOption(option);});});// 数据请求var user = {getRequestData : function(callback){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){var data = JSON.parse(xhr.responseText);callback(data);}};xhr.open('GET', '/get_data_from_mysql.php', true);xhr.send();}};

其中,getRequestData是一个AJAX请求数据的方法。通过调用后台的get_data_from_mysql.php方法,获取到需要可视化展示的数据,进行数据的处理和echarts的option定义,最终通过调用echarts的setOption方法进行图表的渲染。

声明:关于《echars》以上内容仅供参考,若您的权利被侵害,请联系13825271@qq.com
本文网址:http://www.25820.com/tutorial/14_2085499.html