Echarts的使用以及动态加载数据 |
您所在的位置:网站首页 › echarts动态获取数据库数据$name › Echarts的使用以及动态加载数据 |
一、Echarts的介绍
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代,重新定义数据图表的时候到了(ps:来自网络) 自己最近使用echarts对中国石化客户关系进行可视化分析,结合官网学习了ECharts 中实现异步数据,然后自己作为小白在这里总结下使用方法。 官方文档:Echart3官方文档.Echart2官方文档. 二、Echarts的使用1、官方下载 Echarts3.0的完整版下载 2、页面引入Echart.js和JQuery(异步加载使用)并准备一个div容器 #main{width: 600px;height: 400px;}3、echart实例初始化设置,然后异步请求数据,画一张柱状图 关于几个配置项的解释: title:图片的名称 legend:图例组件,可以通过点击图例控制哪些系列不显示 xAxis:直角坐标系 grid 中的 x 轴 yAxis:直角坐标系 grid 中的 y 轴 series:系列列表。每个系列通过 type 决定自己的图表类型,这里是柱状图‘bar’ myChart=echarts.init(document.getElementById('main'));//获取容器 //先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); // 异步加载json格式数据 $.getJSON('http://localhost:63342/echart/loaddata/client.php',function(data){ myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] }); });4、通过PHP进行后台数据处理:client.php 其中段代码,主要是将数据库的对应字段的每一列提取出来,然后放在关联数组里 while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){ array_push($json_data['data'],intval($row['data']));//将字符串转化为数值 array_push($json_data['categories'],$row['categories']); }最后这是我们想要的json数据格式 想要的数据格式5、数据库设计 注意:这里“data”是整形,要使用intval()方法转化下 数据库数据6、最终效果 效果 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |