mylistryx/yii2-echarts

Echarts widget for Yii2.

dev-master 2026-01-22 10:06 UTC

Requires

• php: >=8.0
• yiisoft/yii2: ~2.0.0

MIT

• Sergey Zhukovskiy

• extension
• chart
• yii2
• echarts

README

ECharts widget for Yii2.

See the apache echarts project for details.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist mylistryx/yii2-echarts "*"

or add

"mylistryx/yii2-echarts": "*"

to the require section of your composer.json file.

Usage

Example

<?php
use yii\web\JsExpression;
use yii\echarts\ECharts;
?>

<?= ECharts::widget([
    'responsive' => true,
    'options' => [
        'style' => 'height: 400px;'
    ],
    'pluginEvents' => [
        'click' => [
            new JsExpression('function (params) {console.log(params)}'),
            new JsExpression('function (params) {console.log("ok")}')
        ],
        'legendselectchanged' => new JsExpression('function (params) {console.log(params.selected)}')
    ],
    'pluginOptions' => [
        'option' => [
            'title' => [
                'text' => 'Stacked line charts'
            ],
            'tooltip' => [
                'trigger' => 'axis'
            ],
            'legend' => [
                'data' => ['Email marketing', 'Affiliate advertising', 'Video ads', 'Direct access', 'Search engines']
            ],
            'grid' => [
                'left' => '3%',
                'right' => '4%',
                'bottom' => '3%',
                'containLabel' => true
            ],
            'toolbox' => [
                'feature' => [
                    'saveAsImage' => []
                ]
            ],
            'xAxis' => [
                'name' => 'Date',
                'type' => 'category',
                'boundaryGap' => false,
                'data' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            ],
            'yAxis' => [
                'type' => 'value'
            ],
            'series' => [
                [
                    'name' => 'Email marketing',
                    'type' => 'line',
                    'stack' => 'Total',
                    'data' => [120, 132, 101, 134, 90, 230, 210]
                ],
                [
                    'name' => 'Affiliate advertising',
                    'type' => 'line',
                    'stack' => 'Total',
                    'data' => [220, 182, 191, 234, 290, 330, 310]
                ],
                [
                    'name' => 'Video ads',
                    'type' => 'line',
                    'stack' => 'Total',
                    'data' => [150, 232, 201, 154, 190, 330, 410]
                ],
                [
                    'name' => 'Direct access',
                    'type' => 'line',
                    'stack' => 'Total',
                    'data' => [320, 332, 301, 334, 390, 330, 320]
                ],
                [
                    'name' => 'Search engines',
                    'type' => 'line',
                    'stack' => 'Total',
                    'data' => [820, 932, 901, 934, 1290, 1330, 1320]
                ]
            ]
        ]
    ]
]); ?>

Using themes

<?php
use yii\echarts\ECharts;

// Registers the theme JS files.
ECharts::registerTheme('dark');
?>

<?= ECharts::widget([
    'theme' => 'dark',
    'responsive' => true,
    'options' => [
        'style' => 'height: 400px;'
    ],
    'pluginOptions' => [
        'option' => []
    ]
]); ?>

Using maps

<?php
use yii\echarts\ECharts;

ECharts::$dist = ECharts::DIST_FULL;
ECharts::registerMap(['china', 'province/beijing']);
?>

<?= ECharts::widget([
    'responsive' => true,
    'options' => [
        'style' => 'height: 400px;'
    ],
    'pluginOptions' => [
        'option' => [
            'series' => [
                [
                    'name' => 'China map',
                    'type' => 'map',
                    'map' => 'china',
                    'data' => [
                        ['name' => 'Beijing', 'selected' => true]
                    ]
                ]
            ]
        ]
    ]
]); ?>

<?= ECharts::widget([
    'responsive' => true,
    'options' => [
        'style' => 'height: 400px;'
    ],
    'pluginOptions' => [
        'option' => [
            'geo' => [
                'map' => 'Map'
            ]
        ]
    ]
]); ?>

Configure CDN

<?php
return [
    'components' => [
        'assetManager' => [
            'class' => \yii\web\AssetManager::class,
            'bundles' => [
                'yii\echarts\EChartsAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => 'https://cdn.jsdelivr.net/npm/echarts@latest'
                ]
            ],
        ],
    ],
];
?>

License

yii2-echarts is released under the BSD-3-Clause License. See the bundled LICENSE for details.