ECharts 图表 echarts

用法

ECharts 图表部件是 zin 对 Apache ECharts 的封装，本部件延续了 Apache ECharts 的用法，只需要将图表配置传入部件即可，这里以 Apache ECharts 官网的基础折线图示例为例：

zin 声明

echarts
(
    set::xAxis(array(
        'type' => 'category',
        'data' => array('Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun')
    )),
    set::yAxis(array(
        'type' => 'value'
    )),
    set::series(array(
        array(
            'data' => array(150, 230, 224, 218, 135, 147, 260),
            'type' => 'line'
        )
    ))
)->size('100%', 400)->theme('dark');

生成的 HTML

<div style="width: 100%; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" data-zin-id="zin154" data-zui="Echarts" _echarts_instance_="ec_1685502639191">
  <div style="position: relative; width: 992px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
    <canvas data-zr-dom-id="zr_0" width="992" height="400" style="position: absolute; left: 0px; top: 0px; width: 992px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;">
    </div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;">
    </div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;">
    </div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;">
    </div>
  </div>
</div>

方法

echarts 部件除了接收图表配置外，还提供了三个方法，用于设置图表尺寸和外观。

size()

size() 方法用于设置图表的尺寸，使用图表部件时必须使用该方法设置尺寸值，否则图表将无法显示。

函数参数接收任意合法的长度值，若长度值没有指定单位，本方法将视其为像素值。

函数声明

public function size(string|int $width, string|int $height): echarts;

responsive()

responsive() 方法用于设置图表的响应式特性，即图表随容器大小的变化而变化。

图表部件已默认开启响应式特性，可以将参数值设为 false 关闭响应式特性： echarts(...)->responsive(false);

函数声明

public function responsive(bool $value): echarts;

theme()

theme() 方法用于设置图表的颜色主题，如内置的 'dark' 主题，未调用本方法时图表将设置为默认主题。

更多详情可参考 ECharts 中的样式简介 一文。

函数声明

public function theme(string|array $value): echarts;