lulubin/yii2-widget-echarts

An Yii2 widget for echarts

dev-main 2023-07-25 05:27 UTC

Requires

• bower-asset/echarts: *
• yiisoft/yii2: *

MIT

• lulubin

• extension
• widget
• yii2
• echarts

README

composer require lulubin/yii2-widget-echarts *

2.Usage

<?php
use yii\web\JsExpression;
use lulubin\echarts\ECharts;
ECharts::registerTheme('white');
?>
<?= ECharts::widget([
	'theme' => 'white',
    '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' => '折线图堆叠'],
            'tooltip' => ['trigger' => 'axis'],
            'legend' => ['data' => ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']],
            'grid' => ['left' => '3%','right' => '4%','bottom' => '3%','containLabel' => true],
            'toolbox' => ['feature' => ['saveAsImage' => []]],
            'xAxis' => [
                'name' => '日期',
                'type' => 'category',
                'boundaryGap' => false,
                'data' => ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            ],
            'yAxis' => ['type' => 'value'],
            'series' => [
                ['name' => '邮件营销','type' => 'line','stack' => '总量','data' => [120, 132, 101, 134, 90, 230, 210]],
                ['name' => '联盟广告','type' => 'line','stack' => '总量','data' => [220, 182, 191, 234, 290, 330, 310]],
                ['name' => '视频广告','type' => 'line','stack' => '总量','data' => [150, 232, 201, 154, 190, 330, 410]],
                ['name' => '直接访问','type' => 'line','stack' => '总量','data' => [320, 332, 301, 334, 390, 330, 320]],
                ['name' => '搜索引擎','type' => 'line','stack' => '总量','data' => [820, 932, 901, 934, 1290, 1330, 1320]]
            ]
        ]
    ]
]); ?>

Using maps

<?php
use lulubin\echarts\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' => '广东', 'selected' => true]]
                ]
            ]
        ]
    ]
]); ?>

Configure CDN

<?php
return [
    'components' => [
        'assetManager' => [
            'class' => 'yii\web\AssetManager',
            'bundles' => [
                'lulubin\echarts\EChartsAsset' => [
                    'sourcePath' => null,
                    'baseUrl' => '//cdn.bootcss.com/echarts/3.0.0'
                ]
            ],
        ],
    ],
];
?>