Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Latest Stable Version Total Downloads Latest Unstable Version License PHP Version Require

Echarts-PHP is a PHP library that works as a wrapper for the Echarts js library ( Support Apache ECharts (incubating) from version 2.2.x to 5.x.

Welcome star ⭐️!


The recommended way to install Echarts-PHP is through Composer. Just run the composer command to install it:

composer require hisune/echarts-php

Table of Contents


Simple, recommend using PHP property

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

  • Param dist is your customer 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');

Add series with property

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(
        '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';

Add XAxis with property

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');

Add YAxis with property

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

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

Or you can set option array directly

void ECharts::setOption(array $option)

  • Param option is ECharts option array to be set.

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

  • Param render is ECharts option array.
  • Param jsObject is whether or not to return json string, return PHP array by default.
$option = array (
  'tooltip' =>
  array (
    'show' => true,
  'legend' =>
  array (
    'data' =>
    array (
      0 => '销量',
  // ...

Array key support

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

Empty object assignment

If you need to assign a value to an empty object, you can use StdClass, for example: $chart->yAxis = new \StdClass;

Javascript function

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"

Customer JS variable name

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

  • Param name is your customer js variable name. By default, js variable name will generate by random.

string ECharts::getJsVar()

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

Customer attribute

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

  • Param id is your html dom ID.
  • Param attribute is your html dom attribute.
  • Param theme is your ECharts theme.
  • Return html string.
$chart->render('simple-custom-id2', array('style' => 'height: 500px;'));

Events (for 3.x+)

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

  • Param event is event name, available: click, dblclick, mousedown, mousemove, mouseup, mouseover, mouseout
  • Param callback is event callback.

string Config::eventMethod(string $name)

  • Param name is your js function name which to be run in event callback.
  • Return js string, eg: 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);');

Customer dist

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

Dist type

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

Whether or not load minify js file

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

Add extra script from cdn

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

  • Param file is your extra script filename.
  • Param dist is your dist CDN uri.
Hisune\EchartsPHP\Config::addExtraScript('extension/dataTool.js'); // the second param is your customer dist url

The example for ECharts theme use addExtraScript

use \Hisune\EchartsPHP\Config;
Config::addExtraScript('vintage.js', '');
echo $chart->render('simple-custom-id', array(), 'vintage');

Full Echarts PHPDoc

For more detail visit:



All the Echarts live demos present on