{{ $t('editor.prPreview.viewDiff') }}
-
+ >
+
+
= 0;
+ return (
+ this.exampleConfig &&
+ this.exampleConfig.since &&
+ compareVersions(
+ this.shared.echartsFullVersion,
+ this.exampleConfig.since
+ ) >= 0
+ );
},
versionSinceBanner() {
- return this.$t('editor.bannerVersionRequire') + ' v' + this.exampleConfig.since + '+';
- },
+ return (
+ this.$t('editor.bannerVersionRequire') +
+ ' v' +
+ this.exampleConfig.since +
+ '+'
+ );
+ }
},
mounted() {
@@ -642,7 +603,7 @@ export default {
)}`;
return !isObjOrArray
? `${name}`
- : `${name}`;
+ : `${name}`;
},
expandOnCreatedAndUpdated(path) {
return (
@@ -968,7 +929,7 @@ $handler-width: 15px;
font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
monospace;
- .el-icon-document {
+ .icon-document {
margin-left: 5px;
font-size: 1rem;
@@ -1173,4 +1134,11 @@ $handler-width: 15px;
background: $clr-bg;
}
+.fill-none {
+ fill: none;
+}
+
+.stroke-current {
+ stroke: currentColor;
+}
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 6cb204d7..c0e94521 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -43,12 +43,14 @@
:inactive-text="''"
/>
-
-
- {{ $t('editor.renderCfgTitle')
- }}
-
-
+
+
+
+ {{ $t('editor.renderCfgTitle') }}
+
+
+
+
+
{{ $t('editor.download') }}
-
+
+
{{ $t('editor.screenshot') }}
+
{{ $t('editor.share.title') }}
@@ -161,6 +160,7 @@ import debounce from 'lodash/debounce';
import { download } from './downloadExample';
import { gotoURL, getURL } from '../common/route';
import { gt, rcompare } from 'semver';
+import SVGIcon from '../common/SVGIcon.vue';
const example = getExampleConfig();
const isGL = 'gl' in URL_PARAMS || isGLExample();
@@ -353,6 +353,9 @@ function run(recreateInstance) {
}
export default {
+ components: {
+ SVGIcon
+ },
props: {
inEditor: {
type: Boolean
@@ -845,4 +848,17 @@ export default {
}
}
}
+
+.icon {
+ width: 12px;
+ height: 12px;
+}
+
+.ml-4 {
+ margin-left: 4px;
+}
+
+.mr-4 {
+ margin-right: 4px;
+}
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index b3a21ef3..2f3e5af8 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -20,7 +20,9 @@
:id="'left-chart-nav-' + category"
:href="'#chart-type-' + category"
>
-
+
+
+
{{
$t('chartTypes.' + category)
}}
@@ -71,6 +73,7 @@ import CHART_LIST_GL from '../data/chart-list-data-gl';
import { EXAMPLE_CATEGORIES, BLACK_MAP } from '../common/config';
import { store } from '../common/store';
import ExampleCard from './ExampleCard.vue';
+import SVGIcon from '../common/SVGIcon.vue';
import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';
const icons = {};
@@ -106,10 +109,9 @@ const icons = {};
'rich',
'graphic'
].forEach(function (category) {
- icons[category] = require('../asset/icon/' + category + '.svg');
+ icons[category] = category;
});
-const glIcon = require('../asset/icon/gl.svg');
[
'globe',
'bar3D',
@@ -124,14 +126,15 @@ const glIcon = require('../asset/icon/gl.svg');
'graphGL',
'geo3D'
].forEach(function (category) {
- icons[category] = glIcon;
+ icons[category] = 'gl';
});
const LAZY_LOADED_CLASS = 'ec-shot-loaded';
export default {
components: {
- ExampleCard
+ ExampleCard,
+ SVGIcon
},
data() {
@@ -305,7 +308,7 @@ export default {
@import '../style/config.xl.scss';
$chart-nav-width: 200px;
-$chart-icon-width: 25px;
+$chart-icon-size: 20px;
$chart-icon-border: 1px;
$toolbar-height: 30px;
@@ -454,15 +457,15 @@ $pd-lg: 20px;
}
.chart-icon {
- content: '';
- width: 20px;
+ width: $chart-icon-size;
+ height: $chart-icon-size;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
svg {
- width: 100% !important;
- height: auto !important;
+ width: 100%;
+ height: 100%;
}
}
@@ -470,8 +473,8 @@ $pd-lg: 20px;
background-color: $nav-active-bg;
color: #fff;
- .chart-icon * {
- fill: #fff;
+ .chart-icon use {
+ filter: invert(1) grayscale(1) brightness(200%);
}
}
diff --git a/tool/plugin-svg-sprite.js b/tool/plugin-svg-sprite.js
new file mode 100644
index 00000000..df071faf
--- /dev/null
+++ b/tool/plugin-svg-sprite.js
@@ -0,0 +1,94 @@
+const { RawSource } = require('webpack-sources');
+const path = require('path');
+const fs = require('fs');
+
+class SvgSpritePlugin {
+ constructor(options = {}) {
+ this.spriteFilename = options.spriteFilename || 'sprite.svg';
+ this.svgPath = options.svgPath;
+ }
+
+ // Helper to process raw SVG string into a
+ processSvg(filePath, rawSvg) {
+ const id = path.basename(filePath, '.svg').replace(/[^\w0-9_-]/g, '-');
+
+ // Remove XML declaration and comments
+ let svg = rawSvg.replace(/<\?xml.*?\?>/g, '').replace(//gs, '');
+
+ // Extract viewBox (crucial for icon scaling)
+ const viewBoxMatch = svg.match(/viewBox="([^"]*)"/);
+ if (!viewBoxMatch) {
+ console.warn(
+ `Warning: SVG file '${filePath}' is missing a viewBox attribute. Skipping.`
+ );
+ return null;
+ }
+ const viewBox = viewBoxMatch[1];
+
+ // WARNING: Simple regex is used here. For production, a reliable XML parser is safer.
+ const symbolContent = svg
+ .replace(/<\/?svg[^>]*>/g, '') // Remove opening/closing