chore: fix disappeared logo in demo

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.7.3
+
+* Fixed that `padding` on the component root doesn't work.
+
+## 6.7.2
+
+* Fixed that charts inside `<keep-alive>` failed to display after activation.
+
 ## 6.7.1
 
 * Fixed that native events won't actually trigger.

README.md

@@ -238,7 +238,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -258,7 +258,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
 ```
 <!-- vue2Scripts:end -->
 

README.zh-Hans.md

@@ -238,7 +238,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -258,7 +258,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
 ```
 <!-- vue2Scripts:end -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.7.1",
+  "version": "6.7.3",
   "description": "Vue.js component for Apache ECharts™.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {

src/demo/Demo.vue

@@ -297,7 +297,7 @@ input {
 }
 
 label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 }
@@ -311,7 +311,7 @@ select {
 }
 
 #logo {
-  display: inline-block;
+  display: inline-flex;
   width: 128px;
   height: 128px;
   pointer-events: none;
@@ -381,11 +381,13 @@ select {
       }
     }
   }
+}
 
-  .actions {
-    display: flex;
-    justify-content: center;
-  }
+.actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 }
 
 .renderer,

src/demo/examples/PolarChart.vue

@@ -7,7 +7,7 @@ import {
   LegendComponent,
   TooltipComponent
 } from "echarts/components";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import VChart from "../../ECharts";
 import VExample from "./Example";
 import getData from "../data/polar";
@@ -22,6 +22,23 @@ use([
 
 const option = shallowRef(getData());
 const theme = shallowRef("dark");
+const loading = shallowRef(false);
+const loadingOptions = computed(() =>
+  theme.value === "dark"
+    ? {
+        color: "#fff",
+        textColor: "#fff",
+        maskColor: "rgba(0, 0, 0, 0.7)"
+      }
+    : null
+);
+const style = computed(() => {
+  return theme.value === "dark"
+    ? loading.value
+      ? "background-color: #05040d"
+      : "background-color: #100c2a"
+    : "";
+});
 </script>
 
 <template>
@@ -29,8 +46,10 @@ const theme = shallowRef("dark");
     <v-chart
       :option="option"
       autoresize
+      :loading="loading"
+      :loading-options="loadingOptions"
       :theme="theme"
-      :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
+      :style="style"
     />
     <template #extra>
       <p class="actions">
@@ -39,6 +58,10 @@ const theme = shallowRef("dark");
           <option :value="null">Default</option>
           <option value="dark">Dark</option>
         </select>
+        <label>
+          <input type="checkbox" v-model="loading" />
+          Loading
+        </label>
       </p>
     </template>
   </v-example>

src/style.css

@@ -1,2 +1,2 @@
-x-vue-echarts{display:block;position:relative;width:100%;height:100%;min-width:0}
-.vue-echarts-inner{position:absolute;top:0;right:0;bottom:0;left:0}
+x-vue-echarts{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
+.vue-echarts-inner{flex-grow:1;min-width:0;width:auto!important;height:auto!important}