Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 8235095d 编写于 作者: 1 100pah
浏览文件
操作

featrue: [geo] 

(1) support name on <g>.
(2) some refactor.
上级 b0d4a358
展开全部 隐藏空白更改
内联 并排
Showing with 818 addition and 457 deletion
src/component/helper/MapDraw.ts
浏览文件 @ 8235095d
此差异已折叠。
src/coord/geo/Geo.ts
浏览文件 @ 8235095d
...@@ -169,7 +169,7 @@ class Geo extends View { ...@@ -169,7 +169,7 @@ class Geo extends View {
return this._nameCoordMap.get(name) || (region && region.getCenter()); return this._nameCoordMap.get(name) || (region && region.getCenter());
} }
dataToPoint(data: number[], noRoam?: boolean, out?: number[]): number[] { dataToPoint(data: number[] | string, noRoam?: boolean, out?: number[]): number[] {
if (typeof data === 'string') { if (typeof data === 'string') {
// Map area name to geoCoord // Map area name to geoCoord
data = this.getGeoCoord(data); data = this.getGeoCoord(data);
......
src/coord/geo/GeoSVGResource.ts
浏览文件 @ 8235095d
...@@ -17,38 +17,54 @@ ...@@ -17,38 +17,54 @@
* under the License. * under the License.
*/ */
import { parseSVG, makeViewBoxTransform, SVGNodeTagLower } from 'zrender/src/tool/parseSVG'; import { parseSVG, makeViewBoxTransform, SVGNodeTagLower, SVGParserResultNamedItem } from 'zrender/src/tool/parseSVG';
import Group from 'zrender/src/graphic/Group'; import Group from 'zrender/src/graphic/Group';
import Rect from 'zrender/src/graphic/shape/Rect'; import Rect from 'zrender/src/graphic/shape/Rect';
import {assert, createHashMap, HashMap} from 'zrender/src/core/util'; import {assert, createHashMap, each, HashMap} from 'zrender/src/core/util';
import BoundingRect from 'zrender/src/core/BoundingRect'; import BoundingRect from 'zrender/src/core/BoundingRect';
import { GeoResource, GeoSVGGraphicRoot, GeoSVGSourceInput, RegionGraphic } from './geoTypes'; import { GeoResource, GeoSVGGraphicRoot, GeoSVGSourceInput } from './geoTypes';
import { parseXML } from 'zrender/src/tool/parseXML'; import { parseXML } from 'zrender/src/tool/parseXML';
import { GeoSVGRegion } from './Region'; import { GeoSVGRegion } from './Region';
import Element from 'zrender/src/Element'; import Element from 'zrender/src/Element';
type RegionName = string;
export interface GeoSVGGraphicRecord { export interface GeoSVGGraphicRecord {
root: Group; root: Group;
boundingRect: BoundingRect; boundingRect: BoundingRect;
regionGraphics: RegionGraphic[]; named: SVGParserResultNamedItem[];
// A name may correspond to multiple graphics.
regionElementMap: HashMap<Element[], RegionName>;
} }
/**
* "region available" means that: enable users to set attribute `name="xxx"` on those tags
* to make it be a region.
* 1. region styles and its label styles can be defined in echarts opton:
* ```js
* geo: {
* regions: [{
* name: 'xxx',
* itemStyle: { ... },
* label: { ... }
* }, {
* ...
* },
* ...]
* };
* ```
* 2. name can be duplicated in different SVG tag. All of the tags with the same name share
* a region option. For exampel if there are two <path> representing two lung lobes. They have
* no common parents but both of them need to display label "lung" inside.
*/
const REGION_AVAILABLE_SVG_TAG_MAP = createHashMap<number, SVGNodeTagLower>([ const REGION_AVAILABLE_SVG_TAG_MAP = createHashMap<number, SVGNodeTagLower>([
'rect', 'circle', 'line', 'ellipse', 'polygon', 'polyline', 'text', 'tspan', 'path' 'rect', 'circle', 'line', 'ellipse', 'polygon', 'polyline', 'path',
// <text> <tspan> are also enabled becuase some SVG might paint text itself,
// but still need to trigger events or tooltip.
'text', 'tspan',
// <g> is also enabled because this case: if multiple tags share one name
// and need label displayed, every tags will display the name, which is not
// expected. So we can put them into a <g name="xxx">. Thereby only one label
// displayed and located based on the bounding rect of the <g>.
'g'
]); ]);
const OPTION_STYLE_ENABLED_TAG_MAP = createHashMap<number, SVGNodeTagLower>([
'rect', 'circle', 'line', 'ellipse', 'polygon', 'polyline', 'path'
]);
const LABEL_HOST_MAP = createHashMap<number, SVGNodeTagLower>([
'rect', 'circle', 'line', 'ellipse', 'polygon', 'polyline', 'path'
]);
export class GeoSVGResource implements GeoResource { export class GeoSVGResource implements GeoResource {
readonly type = 'geoSVG'; readonly type = 'geoSVG';
...@@ -57,9 +73,9 @@ export class GeoSVGResource implements GeoResource { ...@@ -57,9 +73,9 @@ export class GeoSVGResource implements GeoResource {
private _firstGraphic: GeoSVGGraphicRecord; private _firstGraphic: GeoSVGGraphicRecord;
private _boundingRect: BoundingRect; private _boundingRect: BoundingRect;
private _regions: GeoSVGRegion[] = []; private _regions: GeoSVGRegion[];
// Key: region.name // Key: region.name
private _regionsMap: HashMap<GeoSVGRegion> = createHashMap<GeoSVGRegion>(); private _regionsMap: HashMap<GeoSVGRegion>;
// All used graphics. key: hostKey, value: root // All used graphics. key: hostKey, value: root
private _usedGraphicMap: HashMap<GeoSVGGraphicRecord> = createHashMap(); private _usedGraphicMap: HashMap<GeoSVGGraphicRecord> = createHashMap();
...@@ -98,21 +114,14 @@ export class GeoSVGResource implements GeoResource { ...@@ -98,21 +114,14 @@ export class GeoSVGResource implements GeoResource {
this._boundingRect = this._firstGraphic.boundingRect.clone(); this._boundingRect = this._firstGraphic.boundingRect.clone();
const regionGraphics = firstGraphic.regionGraphics;
// PENDING: `nameMap` will not be supported until some real requirement come. // PENDING: `nameMap` will not be supported until some real requirement come.
// if (nameMap) { // if (nameMap) {
// regionGraphics = applyNameMap(regionGraphics, nameMap); // named = applyNameMap(named, nameMap);
// } // }
// Create resions only for the first graphic. const { regions, regionsMap } = createRegions(firstGraphic.named);
for (let i = 0; i < regionGraphics.length; i++) { this._regions = regions;
const regionGraphic = regionGraphics[i]; this._regionsMap = regionsMap;
const region = new GeoSVGRegion(regionGraphic.name, regionGraphic.el);
// PENDING: if `nameMap` supported, this region can not be mounted on
// `this`, but can only be created each time `load()` called.
this._regions.push(region);
this._regionsMap.set(regionGraphic.name, region);
}
} }
return { return {
...@@ -148,10 +157,10 @@ export class GeoSVGResource implements GeoResource { ...@@ -148,10 +157,10 @@ export class GeoSVGResource implements GeoResource {
// PENDING: `nameMap` will not be supported until some real requirement come. // PENDING: `nameMap` will not be supported until some real requirement come.
// `nameMap` can only be obtained from echarts option. // `nameMap` can only be obtained from echarts option.
// The original `regionGraphics` must not be modified. // The original `named` must not be modified.
// if (nameMap) { // if (nameMap) {
// svgGraphic = extend({}, svgGraphic); // svgGraphic = extend({}, svgGraphic);
// svgGraphic.regionGraphics = applyNameMap(svgGraphic.regionGraphics, nameMap); // svgGraphic.named = applyNameMap(svgGraphic.named, nameMap);
// } // }
return svgGraphic; return svgGraphic;
...@@ -227,59 +236,75 @@ function buildGraphic( ...@@ -227,59 +236,75 @@ function buildGraphic(
(root as GeoSVGGraphicRoot).isGeoSVGGraphicRoot = true; (root as GeoSVGGraphicRoot).isGeoSVGGraphicRoot = true;
const regionGraphics = [] as GeoSVGGraphicRecord['regionGraphics']; const named = [] as GeoSVGGraphicRecord['named'];
const regionElementMap = createHashMap<Element[], RegionName>();
const named = result.named; each(result.named, namedItem => {
for (let i = 0; i < named.length; i++) { if (REGION_AVAILABLE_SVG_TAG_MAP.get(namedItem.svgNodeTagLower) != null) {
const namedItem = named[i]; named.push(namedItem);
const svgNodeTagLower = namedItem.svgNodeTagLower; setSilent(namedItem.el);
if (REGION_AVAILABLE_SVG_TAG_MAP.get(svgNodeTagLower) != null) {
const optionStyleEnabled = OPTION_STYLE_ENABLED_TAG_MAP.get(svgNodeTagLower);
const el = namedItem.el;
const name = namedItem.name;
regionGraphics.push({
name: name,
el: el,
optionStyleEnabled: optionStyleEnabled != null,
stateTrigger: optionStyleEnabled != null ? el : null,
// text/tspan/image do not suport style but support event.
eventTrigger: el,
useLabel: LABEL_HOST_MAP.get(svgNodeTagLower) != null
});
const els = regionElementMap.get(name) || regionElementMap.set(name, []);
els.push(el);
// Only named element has silent: false, other elements should
// act as background and has no user interaction.
el.silent = false;
// text|tspan will be converted to group.
if (el.isGroup) {
el.traverse(child => {
child.silent = false;
});
}
} }
});
return { root, boundingRect, named };
}
function setSilent(el: Element): void {
// Only named element has silent: false, other elements should
// act as background and has no user interaction.
el.silent = false;
// text|tspan will be converted to group.
if (el.isGroup) {
el.traverse(child => {
child.silent = false;
});
} }
}
function createRegions(
named: SVGParserResultNamedItem[]
): {
regions: GeoSVGRegion[];
regionsMap: HashMap<GeoSVGRegion>;
} {
const regions: GeoSVGRegion[] = [];
const regionsMap = createHashMap<GeoSVGRegion>();
// Create resions only for the first graphic.
each(named, namedItem => {
// Region has feature to calculate center for tooltip or other features.
// If there is a <g name="xxx">, the center should be the center of the
// bounding rect of the g.
if (namedItem.namedFrom != null) {
return;
}
return { root, boundingRect, regionGraphics, regionElementMap: regionElementMap }; const region = new GeoSVGRegion(namedItem.name, namedItem.el);
// PENDING: if `nameMap` supported, this region can not be mounted on
// `this`, but can only be created each time `load()` called.
regions.push(region);
// PENDING: if multiple tag named with the same name, only one will be
// found by `_regionsMap`. `_regionsMap` is used to find a coordinate
// by name. We use `region.getCenter()` as the coordinate.
regionsMap.set(namedItem.name, region);
});
return { regions, regionsMap };
} }
// PENDING: `nameMap` will not be supported until some real requirement come. // PENDING: `nameMap` will not be supported until some real requirement come.
// /** // /**
// * Use the alias in geoNameMap. // * Use the alias in geoNameMap.
// * The input `regionGraphics` must not be modified. // * The input `named` must not be modified.
// */ // */
// function applyNameMap( // function applyNameMap(
// regionGraphics: GeoSVGGraphicRecord['regionGraphics'], // named: GeoSVGGraphicRecord['named'],
// nameMap: NameMap // nameMap: NameMap
// ): GeoSVGGraphicRecord['regionGraphics'] { // ): GeoSVGGraphicRecord['named'] {
// const result = [] as GeoSVGGraphicRecord['regionGraphics']; // const result = [] as GeoSVGGraphicRecord['named'];
// for (let i = 0; i < regionGraphics.length; i++) { // for (let i = 0; i < named.length; i++) {
// let regionGraphic = regionGraphics[i]; // let regionGraphic = named[i];
// const name = regionGraphic.name; // const name = regionGraphic.name;
// if (nameMap && nameMap.hasOwnProperty(name)) { // if (nameMap && nameMap.hasOwnProperty(name)) {
// regionGraphic = extend({}, regionGraphic); // regionGraphic = extend({}, regionGraphic);
......
src/coord/geo/geoTypes.ts
浏览文件 @ 8235095d
...@@ -140,21 +140,3 @@ export interface GeoResource { ...@@ -140,21 +140,3 @@ export interface GeoResource {
export interface GeoSVGGraphicRoot extends Group { export interface GeoSVGGraphicRoot extends Group {
isGeoSVGGraphicRoot: boolean; isGeoSVGGraphicRoot: boolean;
} }
export type RegionGraphic = {
// Region name. Can not be null/undefined.
name: string;
// Main el.
el: Element;
// If it specified, use it to trigger state
// style change (emphasis/select/blur)
// Can be null/undefined.
stateTrigger: Element;
// If it specified, use it to trigger event to users
// Can be null/undefined.
eventTrigger: Element;
// Whether to set label on `el.textContent`.
useLabel: boolean;
// Whether to be enabled to set style via in echarts option.
optionStyleEnabled: boolean;
};
src/core/echarts.ts
浏览文件 @ 8235095d
...@@ -36,8 +36,6 @@ import ChartView, {ChartViewConstructor} from '../view/Chart'; ...@@ -36,8 +36,6 @@ import ChartView, {ChartViewConstructor} from '../view/Chart';
import * as graphic from '../util/graphic'; import * as graphic from '../util/graphic';
import {getECData} from '../util/innerStore'; import {getECData} from '../util/innerStore';
import { import {
enterEmphasisWhenMouseOver,
leaveEmphasisWhenMouseOut,
isHighDownDispatcher, isHighDownDispatcher,
HOVER_STATE_EMPHASIS, HOVER_STATE_EMPHASIS,
HOVER_STATE_BLUR, HOVER_STATE_BLUR,
...@@ -1484,24 +1482,28 @@ class ECharts extends Eventful<ECEventDefinition> { ...@@ -1484,24 +1482,28 @@ class ECharts extends Eventful<ECEventDefinition> {
ecModel && ecModel.eachComponent(condition, function (model) { ecModel && ecModel.eachComponent(condition, function (model) {
if (!excludeSeriesIdMap || excludeSeriesIdMap.get(model.id) == null) { if (!excludeSeriesIdMap || excludeSeriesIdMap.get(model.id) == null) {
if (isHighDownPayload(payload)) { if (isHighDownPayload(payload)) {
if (payload.type === HIGHLIGHT_ACTION_TYPE) { if (model instanceof SeriesModel) {
if (model instanceof SeriesModel) { if (payload.type === HIGHLIGHT_ACTION_TYPE && !payload.notBlur) {
!payload.notBlur && blurSeriesFromHighlightPayload(model, payload, ecIns._api); blurSeriesFromHighlightPayload(model, payload, ecIns._api);
}
}
else {
const { focusSelf, dispatchers } = findComponentHighDownDispatchers(
model.mainType, model.componentIndex, payload.name, ecIns._api
);
if (payload.type === HIGHLIGHT_ACTION_TYPE && focusSelf && !payload.notBlur) {
blurComponent(model.mainType, model.componentIndex, ecIns._api);
} }
else { // PENDING:
const { focusSelf, dispatchers } = findComponentHighDownDispatchers( // Whether to put this "enter emphasis" code in `ComponentView`,
model.mainType, model.componentIndex, payload.name, ecIns._api // which will be the same as `ChartView` but might be not necessary
); // and will be far from this logic.
if (focusSelf && !payload.notBlur) { if (dispatchers) {
blurComponent(model.mainType, model.componentIndex, ecIns._api); each(dispatchers, dispatcher => {
} payload.type === HIGHLIGHT_ACTION_TYPE
// PENDING: ? enterEmphasis(dispatcher)
// Whether to put this "enter emphasis" code in `ComponentView`, : leaveEmphasis(dispatcher);
// which will be the same as `ChartView` but might be not necessary });
// and will be far from this logic.
if (dispatchers) {
each(dispatchers, dispatcher => enterEmphasis(dispatcher));
}
} }
} }
} }
......
test/geo-svg-demo.html
浏览文件 @ 8235095d
...@@ -38,8 +38,8 @@ under the License. ...@@ -38,8 +38,8 @@ under the License.
<div id="main_geo_svg_organ"></div> <div id="main_geo_svg_organ"></div>
<!-- <div id="main_geo_svg_organ1"></div> --> <div id="main_geo_svg_regions"></div>
<div id="main_geo_svg_line_path"></div>
...@@ -99,6 +99,8 @@ under the License. ...@@ -99,6 +99,8 @@ under the License.
tooltip: { tooltip: {
}, },
geo: { geo: {
left: 10,
right: '50%',
map: 'seatmap', map: 'seatmap',
roam: true, roam: true,
selectedMode: 'multiple', selectedMode: 'multiple',
...@@ -107,18 +109,16 @@ under the License. ...@@ -107,18 +109,16 @@ under the License.
emphasis: { emphasis: {
focus: 'self', focus: 'self',
itemStyle: { itemStyle: {
// color: null color: null
}, },
label: { label: {
show: false, position: 'bottom',
distance: 20,
textBorderColor: '#fff', textBorderColor: '#fff',
textBorderWidth: 2 textBorderWidth: 2
} }
}, },
blur: { blur: {
// itemStyle: {
// opacity: 0.3
// }
}, },
select: { select: {
itemStyle: { itemStyle: {
...@@ -130,7 +130,25 @@ under the License. ...@@ -130,7 +130,25 @@ under the License.
textBorderWidth: 2 textBorderWidth: 2
} }
} }
} },
grid: {
left: '60%'
},
xAxis: {
splitLine: {
show: false
}
},
yAxis: {
data: ['heart', 'large-intestine', 'small-intestine', 'spleen', 'kidney', 'lung', 'liver']
},
series: [{
type: 'bar',
emphasis: {
focus: 'self'
},
data: [121, 321, 141, 52, 198, 289, 139]
}]
}; };
var chart = testHelper.create(echarts, 'main_geo_svg_organ', { var chart = testHelper.create(echarts, 'main_geo_svg_organ', {
...@@ -149,9 +167,34 @@ under the License. ...@@ -149,9 +167,34 @@ under the License.
listenAndPrintEvent(chart); listenAndPrintEvent(chart);
if (chart) { if (chart) {
chart.on('highlight', function () { chart.on('mouseover', { seriesIndex: 0 }, function (event) {
console.log('agsd'); chart.dispatchAction({
type: 'highlight',
geoIndex: 0,
name: event.name
});
});
chart.on('mouseout', { seriesIndex: 0 }, function (event) {
chart.dispatchAction({
type: 'downplay',
geoIndex: 0,
name: event.name
});
}); });
// chart.on('mouseover', { geoIndex: 0 }, function (event) {
// chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// name: event.name
// });
// });
// chart.on('mouseout', { geoIndex: 0 }, function (event) {
// chart.dispatchAction({
// type: 'downplay',
// seriesIndex: 0,
// name: event.name
// });
// });
} }
}); });
...@@ -162,36 +205,54 @@ under the License. ...@@ -162,36 +205,54 @@ under the License.
<!--
<script> <script>
require(['echarts'/*, 'map/js/china' */], function (echarts) { require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option; var option;
$.ajax({ $.ajax({
url: '../../vis-data/map/svg/organ/Veins_Medical_Diagram_clip_art.svg', url: '../../vis-data/map/svg/geo-topo/Sicily_prehellenic_topographic_map.svg',
dataType: 'text' dataType: 'text'
}).done(function (svg) { }).done(function (svg) {
echarts.registerMap('seatmap', { echarts.registerMap('sicily', {
svg: svg svg: svg
}); });
option = { option = {
tooltip: { tooltip: {
}, },
series: { geo: [{
type: 'map', map: 'sicily',
map: 'seatmap',
roam: true, roam: true,
selectedMode: 'multiple', selectedMode: 'multiple',
// height: 100, itemStyle: {
// zoom: 1.5 color: null
},
tooltip: {
show: true,
confine: true,
formatter: function (params) {
return [
'This is the introduction:',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx'
].join('<br>');
}
},
emphasis: { emphasis: {
focus: 'self',
label: { label: {
textBorderColor: '#fff', show: false
textBorderWidth: 2
} }
}, },
select: { select: {
...@@ -199,39 +260,202 @@ under the License. ...@@ -199,39 +260,202 @@ under the License.
color: '#b50205' color: '#b50205'
}, },
label: { label: {
show: false, show: false
textBorderColor: '#fff',
textBorderWidth: 2
} }
} },
} regions: [{
name: 'Sikeloi',
tooltip: {
formatter: 'Sikeloi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}, {
name: 'Sikanoi',
tooltip: {
formatter: 'Sikanoi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}, {
name: 'Elymoi',
tooltip: {
formatter: 'Elymoi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}],
z: 0
}]
}; };
var chart = testHelper.create(echarts, 'main_geo_svg_organ1', { var chart = testHelper.create(echarts, 'main_geo_svg_regions', {
title: [ title: [
'pure geo component with svg resource', 'symbol and label use the same name in SVG.',
'click seat: check **allSelected** correct.' 'Hover each symbol and text, tooltip should be displayed.',
'Hover the three area, tooltip should be displayed.',
'Click, check **selected**.'
], ],
option: option, option: option,
info: {}, info: {},
infoKey: 'event', infoKey: 'event',
height: 500 height: 500
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
}); });
listenAndPrintEvent(chart); listenAndPrintEvent(chart);
if (chart) { });
chart.on('highlight', function () {
console.log('agsd'); });
}); </script>
}
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
$.ajax({
url: '../../vis-data/map/svg/geo-topo/Map_of_Iceland.svg',
dataType: 'text'
}).done(function (svg) {
echarts.registerMap('Map_of_Iceland', {
svg: svg
});
option = {
tooltip: {
alwaysShowContent: true,
enterable: true,
extraCssText: 'user-select: text'
},
geo: [{
map: 'Map_of_Iceland',
roam: true,
selectedMode: 'single',
tooltip: {
show: true,
// confine: true
},
label: {
fontSize: 20,
textBorderColor: '#fff',
textBorderWidth: 2
},
emphasis: {
itemStyle: {
color: null,
borderColor: '#b50805',
borderWidth: 5
}
},
select: {
itemStyle: {
color: null,
borderColor: '#b50205',
borderWidth: 5
}
},
regions: [{
name: 'trip1',
label: {
formatter: 'Western Trip'
},
tooltip: {
position: 'right',
formatter: [
'Western Trip:',
'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
].join('<br>')
}
}, {
name: 'trip2',
label: {
formatter: 'Eastern Trip'
},
tooltip: {
position: 'left',
formatter: [
'Western Trip:',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx',
'xxxxxxxxxxxx'
].join('<br>')
}
}]
}]
};
var chart = testHelper.create(echarts, 'main_geo_svg_line_path', {
title: [
'Select some route in SVG via API.',
'Some route should be highlighted (check selectedMode **single**).',
'label should be displayed.'
],
option: option,
info: {},
infoKey: 'event',
height: 500,
buttons: [{
text: 'highlight trip1',
onclick: function () {
chart.dispatchAction({
type: 'geoSelect',
geoIndex: 0,
name: 'trip1'
});
chart.dispatchAction({
type: 'showTip',
geoIndex: 0,
name: 'trip1'
});
}
}, {
text: 'highlight trip2',
onclick: function () {
chart.dispatchAction({
type: 'geoSelect',
geoIndex: 0,
name: 'trip2'
});
chart.dispatchAction({
type: 'showTip',
geoIndex: 0,
name: 'trip2'
});
}
}]
});
listenAndPrintEvent(chart);
}); });
}); });
</script> --> </script>
......
test/geo-svg.html
浏览文件 @ 8235095d
...@@ -39,10 +39,10 @@ under the License. ...@@ -39,10 +39,10 @@ under the License.
<div id="main_simple_geo_json"></div> <div id="main_simple_geo_json"></div>
<div id="main_simple_geo_svg"></div> <div id="main_simple_geo_svg"></div>
<div id="main_geo_svg_emphasis_select"></div>
<div id="main_pure_geo_svg"></div> <div id="main_pure_geo_svg"></div>
<div id="main_pure_map_svg"></div> <div id="main_pure_map_svg"></div>
<div id="main_map_geo_svg"></div> <div id="main_map_geo_svg"></div>
<div id="main_geo_svg_regions"></div>
...@@ -135,7 +135,7 @@ under the License. ...@@ -135,7 +135,7 @@ under the License.
option: option, option: option,
info: {}, info: {},
infoKey: 'event', infoKey: 'event',
height: 300 height: 200
}); });
listenAndPrintEvent(chart); listenAndPrintEvent(chart);
...@@ -187,7 +187,7 @@ under the License. ...@@ -187,7 +187,7 @@ under the License.
option: option, option: option,
info: {}, info: {},
infoKey: 'event', infoKey: 'event',
height: 300 height: 200
}); });
listenAndPrintEvent(chart); listenAndPrintEvent(chart);
...@@ -199,6 +199,129 @@ under the License. ...@@ -199,6 +199,129 @@ under the License.
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
const svg = [
'<?xml version="1.0" encoding="utf-8"?>',
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">',
'<path name="a" d="M 0,0 L 0,100 100,100 100,0 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'<path name="a" d="M 110,0 L 110,100 210,100 210,0 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'<g name="b">',
'<path d="M 0,110 L 0,210 100,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'<path d="M 110,110 L 110,210 210,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'</g>',
'<radialGradient id="XMLID_1_" cx="0" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">',
'<stop offset="0" style="stop-color:#E6E6E6"/>',
'<stop offset="1" style="stop-color:#4D4D4D"/>',
'</radialGradient>',
'<path name="c" d="M 0,220 L 0,320 100,220 Z" fill="url(#XMLID_1_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'<radialGradient id="XMLID_2_" cx="110" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">',
'<stop offset="0" style="stop-color:#E6E6E6"/>',
'<stop offset="1" style="stop-color:#4D4D4D"/>',
'</radialGradient>',
'<path name="c" d="M 110,220 L 110,320 210,220 Z" fill="url(#XMLID_2_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
'</svg>'
].join('')
echarts.registerMap('testGeoSVG_select_hover', { svg: svg });
option = {
// tooltip: {
// },
geo: {
map: 'testGeoSVG_select_hover',
roam: true,
selectedMode: 'single',
// height: '100%',
// center
// layoutCenter: ['30%', 40],
// layoutSize: 40,
// boundingCoords
zoom: 1,
aspectScale: 1,
label: {
show: true
},
emphasis: {
label: {
show: true,
fontSize: 100
}
},
select: {
itemStyle: {
color: 'red'
}
}
}
};
var chart = testHelper.create(echarts, 'main_geo_svg_emphasis_select', {
title: [
'click buttons',
'hover check'
],
option: option,
info: {},
infoKey: 'event',
height: 200,
button: [{
text: 'highlight a',
onclick: function () {
chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'a' });
}
}, {
text: 'downplay a',
onclick: function () {
chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'a' });
}
}, {
text: 'select a',
onclick: function () {
chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'a' });
}
}, {
text: 'unselect a',
onclick: function () {
chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'a' });
}
}, {
text: 'highlight b',
onclick: function () {
chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'b' });
}
}, {
text: 'downplay b',
onclick: function () {
chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'b' });
}
}, {
text: 'select b',
onclick: function () {
chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'b' });
}
}, {
text: 'unselect b',
onclick: function () {
chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'b' });
}
}]
});
listenAndPrintEvent(chart);
if (chart) {
chart.on('highlight', function () {
});
}
});
</script>
<script> <script>
...@@ -220,6 +343,9 @@ under the License. ...@@ -220,6 +343,9 @@ under the License.
map: 'seatmap', map: 'seatmap',
roam: true, roam: true,
selectedMode: 'multiple', selectedMode: 'multiple',
tooltip: {
show: true
},
// height: 100, // height: 100,
// zoom: 1.5 // zoom: 1.5
emphasis: { emphasis: {
...@@ -251,7 +377,8 @@ under the License. ...@@ -251,7 +377,8 @@ under the License.
var chart = testHelper.create(echarts, 'main_pure_geo_svg', { var chart = testHelper.create(echarts, 'main_pure_geo_svg', {
title: [ title: [
'pure geo component with svg resource', 'pure geo component with svg resource',
'click seat: check **allSelected** correct.' 'click seat: check **allSelected** correct.',
'hover seat: check **tooltip** and **label** correct.'
], ],
option: option, option: option,
info: {}, info: {},
...@@ -359,6 +486,9 @@ under the License. ...@@ -359,6 +486,9 @@ under the License.
selectedMode: 'multiple', selectedMode: 'multiple',
// height: 100, // height: 100,
// zoom: 1.5 // zoom: 1.5
tooltip: {
show: true
},
emphasis: { emphasis: {
label: { label: {
textBorderColor: '#fff', textBorderColor: '#fff',
...@@ -407,118 +537,7 @@ under the License. ...@@ -407,118 +537,7 @@ under the License.
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
$.ajax({
url: '../../vis-data/map/svg/geo-topo/Sicily_prehellenic_topographic_map.svg',
dataType: 'text'
}).done(function (svg) {
echarts.registerMap('sicily', {
svg: svg
});
option = {
tooltip: {
},
geo: [{
map: 'sicily',
roam: true,
selectedMode: 'multiple',
itemStyle: {
color: null
},
tooltip: {
show: true,
confine: true,
formatter: function (params) {
return [
'This is the introduction:',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx',
'xxxxxxxxxxxxxxxxxxxxx'
].join('<br>');
}
},
emphasis: {
label: {
show: false
}
},
select: {
itemStyle: {
color: '#b50205'
},
label: {
show: false
}
},
regions: [{
name: 'Sikeloi',
tooltip: {
formatter: 'Sikeloi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}, {
name: 'Sikanoi',
tooltip: {
formatter: 'Sikanoi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}, {
name: 'Elymoi',
tooltip: {
formatter: 'Elymoi',
textStyle: { color: '#555' },
backgroundColor: '#ccc'
}
}],
z: 0
}],
// series: {
// type: 'map',
// selectedMode: 'multiple',
// coordinateSystem: 'geo',
// geoIndex: 0
// }
};
var chart = testHelper.create(echarts, 'main_geo_svg_regions', {
title: [
'symbol and label use the same name in SVG.',
'Hover each symbol and text, tooltip should be displayed.',
'Hover the three area, tooltip should be displayed.',
'Click, check **selected**.'
],
option: option,
info: {},
infoKey: 'event',
height: 500
});
listenAndPrintEvent(chart);
if (chart) {
chart.on('georoam', function (params) {
// console.log(params);
});
}
});
});
</script>
</body> </body>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或