彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 彩世界平台 > Think PHP:异步更新ECharts图表数据

Think PHP:异步更新ECharts图表数据

发布时间:2019-09-06 13:56编辑:彩世界平台浏览(147)

    在对一个以Think PHP为基础的网站源码进行改动时,由于其没有数据统计的功能,我想着在其代码的基础上机上这个功能。当然,数据统计的结果最好能够以图表的形式显示出来。经过在网上搜索之后,我选择了EChart,其是个开源的数据可视化JavaScript库,操作简单,使用方便。

    介绍:

    官网介绍:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 [ZRender ( 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

    ECharts提供了折线图、柱状图、散点图、饼图、K线图,以及地图、热力图、关系图等多种图表API,并支持多图混搭。

    官网给出了很多示例,效果非常酷炫而且支持实时互动。其基本的工作原理是使用HTMLdiv标签作为容器来承载图表。在下载时会发现提供了4种下载版本,这里推荐大家使用“源代码”版本,方便调试。

    ECharts一直在交互上不断的改进,最新版的ECharts3支持坐标轴、维度上对数据进行过滤、缩放、平移。对于数据的改变,ECharts会找到两组数据的差异,结合动画去表现数据的变化。对于地理数据,加入了酷炫的特效。

    图片 1image.png

    使用起来简单、易上手。

    官方教程中给出了一个Demo源码:

    (一)传统的,通过标签引入

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小的Dom --> <div style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById; // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption; </script></body></html>
    

    (二)也可以使用模块化的方式

    显示效果为:(可以看到在鼠标滑过时可以实时显示真实数据)

    首先,可以通过npm安装ECharts

    图片 2image.png

    引入js:

    由上述给出的Demo可以看出,Y轴的数据由series中的data项给出,X轴的数据由xAxis中的data给出。在实际使用时,数据不可能在代码中给出,我们往往需要在数据库中查找数据之后进行显示。这种情况下就需要异步加载数据,ECharts 中可以通过jQuery等工具异步获取数据后通过 setOption 将数据填入data项即可。(附官网给出的异步加载示例)

    初始化:

    var myChart = echarts.init(document.getElementById;// 显示标题,图例和空的坐标轴myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }]});// 异步加载数据$.get('data.json').done(function  { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] });});
    

    配置文件:

    本次示例使用的Think PHP的版本为3.2.3,目前其最新的版本为5.0.10,不过对于基本功能来说两者的区别不大,所以就算是与我的版本不同,代码也基本上可以运行。(点击下载Think PHP3.2.3)下载完成之后,我们需要安装本地服务器WAMPServer,点击进入官网进行下载安装即可,这里不再做过多说明。

    然后就可以写配置文件啦,通过setOption生成所需要的图表。

    本文由彩世界平台发布于彩世界平台,转载请注明出处:Think PHP:异步更新ECharts图表数据

    关键词:

上一篇:没有了

下一篇:没有了