图表配置支持写入JS代码

src/Widgets/ApexCharts/Chart.php

@@ -3,6 +3,7 @@
 namespace Dcat\Admin\Widgets\ApexCharts;
 
 use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Support\JavaScript;
 use Dcat\Admin\Traits\InteractsWithApi;
 use Dcat\Admin\Widgets\Widget;
 use Illuminate\Support\Str;
@@ -11,7 +12,9 @@ class Chart extends Widget
 {
     use InteractsWithApi;
 
-    public static $js = '@apex-charts';
+    public static $js = [
+        '@apex-charts'
+    ];
 
     protected $containerSelector;
 
@@ -212,19 +215,19 @@ class Chart extends Widget
     }
 
     /**
-     * @param string $options
-     *
      * @return string
      */
-    protected function buildDefaultScript($options)
+    protected function buildDefaultScript()
     {
+        $options = JavaScript::format($this->options);
+
         return <<<JS
 (function () {
-    var options = {$options}, extend = {$this->buildExtendOptionsScript()};
+    var options = {$options};
 
     var chart = new ApexCharts(
         $("{$this->containerSelector}")[0], 
-        $.extend(options, extend(options))
+        options
     );
     chart.render();
 })();
@@ -236,10 +239,8 @@ JS;
      */
     public function script()
     {
-        $options = json_encode($this->options);
-
         if (! $this->allowBuildRequest()) {
-            return $this->buildDefaultScript($options);
+            return $this->buildDefaultScript();
         }
 
         $this->fetched(
@@ -248,13 +249,17 @@ if (! response.status) {
     return Dcat.error(response.message || 'Server internal error.');
 }
 
-var chartBox = $(response.selector || '{$this->containerSelector}'), extend = {$this->buildExtendOptionsScript()};
+var chartBox = $(response.selector || '{$this->containerSelector}');
 
 if (chartBox.length) {
     chartBox.html('');
+
+    if (typeof response.options === 'string') {
+        eval(response.options);
+    }
     
     setTimeout(function () {
-        new ApexCharts(chartBox[0], $.extend(response.options, extend(response.options))).render();
+        new ApexCharts(chartBox[0], response.options).render();
     }, 50);
 }
 JS
@@ -263,18 +268,6 @@ JS
         return $this->buildRequestScript();
     }
 
-    /**
-     * @return string
-     */
-    protected function buildExtendOptionsScript()
-    {
-        return <<<JS
-function (options) {
-    {$this->scripts['extend']}
-}
-JS;
-    }
-
     /**
      * @return string
      */
@@ -322,10 +315,27 @@ HTML;
         return [
             'status'   => 1,
             'selector' => $this->containerSelector,
-            'options'  => $this->options,
+            'options'  => $this->formatScriptOptions(),
         ];
     }
 
+    /**
+     * 配置选项转化为JS可执行代码.
+     *
+     * @return string
+     */
+    protected function formatScriptOptions()
+    {
+        $code = JavaScript::format($this->options);
+
+        return "response.options = {$code}";
+    }
+
+    /**
+     * 生成唯一ID.
+     *
+     * @return string
+     */
     protected function generateId()
     {
         return 'apex-chart-'.Str::random(8);