发布于 2017-03-29 16:00:05 | 228 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

ECharts Javascript免费图表库

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。


Echarts-PHP is a PHP library that works as a wrapper for the Echarts js library(https://github.com/ecomfe/echarts). Support Echarts version from 2.2.x to 3.x.

Echarts-PHP是一个对echarts js封装的PHP库。

Echarts-PHP使用PHP的property来绑定echarts js的options,同时支持所有options的IDE代码提示,使用非常方便。

所有IDE自动提示的PHPDoc都由脚本自动生成,因此当echarts js的options的属性有变动时,PHPDoc的更新变得异常简单。

我们可以通过直接对property赋值来指定options:

// The most simple example  use HisuneEchartsPHPECharts;  $chart = new ECharts();  $chart->tooltip->show = true;  $chart->legend->data[] = '销量';  $chart->xAxis[] = array(      'type' => 'category',      'data' => array("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子")  );  $chart->yAxis[] = array(      'type' => 'value'  );  $chart->series[] = array(      'name' => '销量',      'type' => 'bar',      'data' => array(5, 20, 40, 10, 10, 20)  );  echo $chart->render('simple-custom-id');

对于series、xAxis、yAxis数组,也可以使用property进行赋值,例如:

use HisuneEchartsPHPDocIDESeries;  $series = new Series();  $series->type = 'map';  $series->map = 'world';  $series->data = array(      array(          'name' => 'China',          'value' => 100,      )  );  $series->label->emphasis->textStyle->color = '#fff';  $series->roam = true;  $series->scaleLimit->min = 1;  $series->scaleLimit->max = 5;  $series->itemStyle->normal->borderColor = '#F2EFF4';  $series->itemStyle->normal->areaColor = '#993399';  $series->itemStyle->emphasis->areaColor = '#993399';  $chart->addSeries($series);

或者直接可以对option数组进行赋值:

$option = array (    'tooltip' =>    array (      'show' => true,    ),    'legend' =>    array (      'data' =>      array (        0 => '销量',      ),    ),    // ...  )  $chart->setOption($option);

除了option配置,还支持echarts js 3.x版本的事件:

use HisuneEchartsPHPConfig;  // Recommend standard  $chart->on('click', Config::eventMethod('console.log'));  // Or write js directly  $chart->on('mousedown', 'console.log(params);');

详细的使用文档可访问:README.md

项目地址:Github



历史版本 :
ECharts v4.0.2 发布:修复了用户反馈的三个问题
ECharts 全新大版本 4.0 正式发布:带来 8 项全新特性
ECharts v3.8 发布,新增支持多种布局的树图
ECharts v3.7.1 发布:改善了 K 线图边界模糊的问题
ECharts v3.7 发布:增加富文本标签、可滚动图例
ECharts 3.6.2 发布,增强了自定义系列和矩形树图
ECharts 3.6.1 发布,JavaScript 图表库
ECharts 3.6.0 发布,新增自定义系列和极坐标柱状图
ECharts 3.5.4 发布,JavaScript 图表库
ECharts 3.5.3 发布,JavaScript 图表组件
ECharts GL 1.0 alpha 发布
ECharts GL 1.0 alpha 发布
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务