README

Echarts-PHP 是一个 PHP 库，用作 Echarts js 库（https://github.com/apache/echarts）的封装。支持从版本 2.2.x 到 5.x 的 Apache ECharts（孵化）。

欢迎星标 ⭐️！

安装

安装 Echarts-PHP 的推荐方式是通过 Composer。只需运行 composer 命令即可安装

composer require hisune/echarts-php

目录

• 类：ECharts
  • __construct([string] $dist = '')
  • addSeries(Series $series)
  • addXAxis(XAxis $xAxis)
  • addYAxis(YAxis $yAxis)
  • setOption(array $option)
  • getOption([array] $render = null, [boolean] $jsObject = false)
  • setJsVar(string $name = null)
  • getJsVar()
  • render(string $id, [array] $attribute = [], [string] $theme = null)
  • on(string $event, string $callback)
• 类：Config
  • jsExpr(string $string)
  • eventMethod(string $name)
  • addExtraScript(string $file, [string] $dist = null)
  • $dist
  • $distType
  • $minify
  • $renderScript
  • $version
• 主题
• 属性 PHPDoc

用法

简单，推荐使用 PHP 属性

public ECharts::__construct([string] $dist = '')

• 参数 dist 是您的自定义 dist URL。

// The most simple example
use Hisune\EchartsPHP\ECharts;
$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');

使用属性添加系列

void ECharts::addSeries(\Hisune\EchartsPHP\Doc\IDE\Series $series)

use \Hisune\EchartsPHP\Doc\IDE\Series;
$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);

使用属性添加 XAxis

void ECharts::addXAxis(\Hisune\EchartsPHP\Doc\IDE\XAxis $xAxis)

use Hisune\EchartsPHP\Doc\IDE\XAxis;
$xAxis = new XAxis();
$xAxis->type = 'category';
$xAxis->data = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$chart->addXAxis($xAxis);

使用属性添加 YAxis

void ECharts::addYAxis(\Hisune\EchartsPHP\Doc\IDE\YAxis $yAxis)

use Hisune\EchartsPHP\Doc\IDE\YAxis;
$yAxis = new YAxis();
$yAxis->type = 'value';
$chart->addYAxis($yAxis);

或者，您可以直接设置选项数组

void ECharts::setOption(array $option)

• 参数 option 是要设置的 ECharts 选项数组。

array|string ECharts::getOption([array] $render = null, [boolean] $jsObject = false)

• 参数 render 是 ECharts 选项数组。
• 参数 jsObject 是否返回 json 字符串，默认返回 PHP 数组。

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

数组键支持

$chart->legend->data[] = '销量';
$chart->yAxis[0] = array('type' => 'value');

空对象赋值

如果您需要给空对象赋值，可以使用 StdClass，例如：$chart->yAxis = new \StdClass;

JavaScript 函数

string Config::jsExpr(string $string)

// With 'function' letter startup
'axisLabel' => array(
    // this array value will automatic conversion to js callback function
    'formatter' => "
        function (value)
        {
            return value + ' °C'
        }
    "
)

// Or you can add any js expr with jsExpr
use \Hisune\EchartsPHP\Config;
'backgroundColor' => Config::jsExpr('
    new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [{
        offset: 0,
        color: "#4b5769"
    }, {
        offset: 1,
        color: "#404a59"
    }])
');

自定义 JS 变量名

void ECharts::setJsVar(string $name = null)

• 参数 name 是您的自定义 js 变量名。默认情况下，js 变量名将随机生成。

string ECharts::getJsVar()

$chart->setJsVar('test');
echo $chart->getJsVar(); // echo test
// var chart_test = echarts.init( ...

自定义属性

string ECharts::render(string $id, [array] $attribute = [], [string] $theme = null)

• 参数 id 是您的 html dom ID。
• 参数 attribute 是您的 html dom 属性。
• 参数 theme 是您的 ECharts 主题。
• 返回 html 字符串。

$chart->render('simple-custom-id2', array('style' => 'height: 500px;'));

事件（针对 3.x+）

void ECharts::on(string $event, string $callback)

• 参数 event 是事件名称，支持的：click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout
• 参数 callback 是事件回调。

string Config::eventMethod(string $name)

• 参数 name 是要在事件回调中运行的 js 函数名称。
• 返回 js 字符串，例如：Config::eventMethod('test') => test(params);

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

自定义 dist

Hisune\EchartsPHP\Config::$dist = 'your dist url';

Dist 类型

\Hisune\EchartsPHP\Config::$distType = 'common'; // '' or 'common' or 'simple'

是否加载压缩 js 文件

\Hisune\EchartsPHP\Config::$minify = false; // default is true

从 CDN 添加额外脚本

string Config::addExtraScript(string $file, [string] $dist = null)

• 参数 file 是您的额外脚本文件名。
• 参数 dist 是您的 dist CDN uri。

Hisune\EchartsPHP\Config::addExtraScript('extension/dataTool.js'); // the second param is your customer dist url

使用 ECharts 主题的示例请使用 addExtraScript

use \Hisune\EchartsPHP\Config;
Config::addExtraScript('vintage.js', 'http://echarts.baidu.com/asset/theme/');
echo $chart->render('simple-custom-id', array(), 'vintage');

完整的 Echarts PHPDoc

更多详情请访问： https://hisune.com/view/50/echarts-php-property-phpdoc-auto-generate

示例

https://demo.hisune.com/echarts-php/

示例

所有在 https://echarts.org.cn/ 上展示的 Echarts 实时示例

许可证

MIT