data () {
consttitle={//show: true, //whether it is displayed
text: "Canvas Relationship Diagram", //Big Title
subtext: "Graphics can be dragged and scaled", //Subtext
//sublink: "", //Sublink link
//target: "blank", //'self' The current window is open, and 'blank' new window is open
//subtarget: "blank", //Subtitle opens the link window
//textAlign: "center", //text horizontal alignment
//textBaseline: "top", //text vertical alignment
//textStyle: mytextStyle, //Title style
//subtextStyle: mytextStyle, //Subtitle style
//padding: 5, //Title margin 5 [5, 10] [5,10,5,10]
//itemGap: 10, //Size and title spacing
//zlevel: 0, //The Canvas of the figure belonging to it are layered. The Canvas of the zlevel large will be placed on top of the small Canvas of the zlevel
//z: 2, //OwnedComponentsz-layer, graphs with small z values will be overwritten by graphs with large z values
//left: "center", //The distance between the component from the left side of the container, 'left', 'center', 'right', '20%'
//top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
//right: "auto", //The distance from the right side of the container is '20%'
//bottom: "auto", //The distance between the component and the lower side of the container, '20%'
//backgroundColor: "transparent", //Title background color
//borderColor: "#ccc", //Border color
//borderWidth: 0, //Border line width
//shadowColor: "red", //shadow color
//shadowOffsetX: 0, //The offset distance in the horizontal direction of the shadow
//shadowOffsetY: 0, //The offset distance in the vertical direction of the shadow
//shadowBlur: 10, //The blur size of the shadow
};
const tooltip= { // Prompt box component
trigger: 'item', //Trigger type, 'item' data item graph trigger, mainly used in scatter charts, pie charts and other charts without category axis. 'axis' axis triggers, mainly used in charts where the category axis will be used.
//triggerOn: "mousemove", //The condition triggered by the prompt box, 'mousemove' triggered when the mouse is moved. 'click' triggers when the mouse is clicked. 'mousemove|click' triggers when the mouse moves and clicks at the same time. 'none' is not fired when 'mousemove' or 'click'
//showContent: true, //Whether to display the prompt box floating layer
//alwaysShowContent: true, // Whether to always display the prompt box content
//showDelay: 0, //The delay of floating layer display is ms
//hideDelay: 100, //The hidden delay in the floating layer, unit is ms
//enterable: false, //Can the mouse enter the floating layer of the prompt box?
//confine: false, // Whether to limit the tooltip box to the area of the chart
//transitionDuration: 0.4, //The transition time of the moving animation of the prompt box floating layer is s. When set to 0, it will move with the mouse immediately
//position: ['50%', '50%'], //The position of the prompt box is not set by default and the position will follow the position of the mouse. [10, 10], return to the function, inside the inner center position of the graphics where the mouse is located, top, left, bottom, right, top, left, bottom, right, the upper side of the graphics where the mouse is located, left, bottom, and right,
formatter: "{b}", //The prompt box floating-layer content formatter supports two forms: string template and callback function. The template variables are {a}, {b}, {c}, {d}, {e}, respectively representing series names, data names, data values, etc.
{b1}: {c1}
//backgroundColor: "transparent", //Title background color
//borderColor: "#ccc", //Border color
//borderWidth: 0, //Border line width
//padding: 5, // Legend inner margin, unit px 5 [5, 10] [5,10,5,10]
//textStyle: mytextStyle, //text style
};
const toolbox={//show: true, //Whether the toolbar component is displayed
oriented: "horizontal", //The layout of the toolbar icon is towards 'horizontal' 'vertical'
//itemSize: 15, //The size of the toolbar icon
//itemGap: 10, //Toolbar icon The interval between each item
//showTitle: true, //Whether to display the title of each tool icon when the mouse hover is displayed
feature: {
mark: {//'Assistive line switch'
show: true},
dataView: {//Data View tool, which can display the data used in the current chart, and can be updated dynamically after editing.
show: true, //Whether the tool is displayed.
title: "Data View",
readOnly:false, //Is it not editable (read-only)
lang: ['Data View', 'Close', 'Refresh'], //There are three tricks on the data view, the default is ['Data View', 'Close', 'Refresh']
backgroundColor: "#fff", //Floating background color of data view.
textareaColor: "#ffff", //From the background color of the floating layer text input area of the data view
textareaBorderColor: "#333", //Frame color of the floating layer text input area of the data view
textColor: "#000", //Text color.
buttonColor: "#c23531", //Button color.
buttonTextColor: "#fff", //Button text color.
},
magicType: {//Dynamic type switching
show: true,
title:"Switch", //Title text of each type can be configured separately.
type: ['line', 'bar'], // Enabled dynamic types, including 'line' (switch to line chart), 'bar' (switch to histogram), 'stack' (switch to stack mode), 'tiled' (switch to tiled mode)
},
restore: {//Configuration item restore.
show: true, //Whether the tool is displayed.
title: "Restore",
},
saveAsImage: {//Save as image.
show: true, //Whether the tool is displayed.
type: "png", //Save image format. Supports 'png' and 'jpeg'.
name: "pic1", //Save file name, default to use as name
backgroundColor: "#ffffff", //The background color of the saved image is used by default. If the backgroundColor does not exist, it will take white
title: "Save as picture",
pixelRatio:1 //Save the resolution ratio of the image, the default size is the same as the container. If you need to save a higher resolution, you can set it to a value greater than 1, such as 2
},
dataZoom: {//Data area zoom. Currently, only scaling of Cartesian coordinate systems is supported
show: true, //Whether the tool is displayed.
title: "Scaling", //Scaling and restoring title text
xAxisIndex: 0, //Specify which xAxis are controlled. If default, controls all x-axis. If set to false, no x-axis is controlled. If set to 3, the x-axisIndex is controlled to 3. If set to [0, 3], controls the x-axis with axisIndex 0 and 3
yAxisIndex: false, //Specify which yAxis are controlled. If default, controls all y-axis. If set to false, no y-axis is controlled. If set to 3, the axisIndex is controlled to 3. If set to [0, 3], controls the y-axis with axisIndex 0 and 3
},
},//zlevel: 0, //The Canvas of the figure belonging to it are layered, and the zlevel large Canvas will be placed on top of the zlevel small Canvas
//z: 2, //The z-layer of the component to which it belongs, graphics with small z value will be overwritten by graphics with large z value
//left: "center", //The distance between the component from the left side of the container, 'left', 'center', 'right', '20%'
//top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
right: "2%", //The distance from the right side of the component to the container, '20%'
//bottom: "auto", //The distance between the component and the lower side of the container, '20%'
//width: "auto", //Legend width
//height: "auto", //Legend height
};
const legend={//show: true, //whether it is displayed
//zlevel: 0, //The Canvas of the figure belonging to it are layered. The Canvas of the zlevel large will be placed on top of the small Canvas of the zlevel
//z: 2, //The z-layer of the component to which it belongs, graphics with small z value will be overwritten by graphics with large z value
//left: "center", //The distance between the component from the left side of the container, 'left', 'center', 'right', '20%'
//top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
//right: "auto", //The distance from the right side of the component to the container, '20%'
//bottom: "auto", //The distance between the component and the lower side of the container, '20%'
//width: "auto", //Legend width
//height: "auto", //Legend height
//orient: "horizontal", // Legend arrangement direction
//align: "auto", //Align the legend mark and text, left, right
//padding: 5, // Legend inner margin, unit px 5 [5, 10] [5,10,5,10]
//itemGap: 10, //The interval between each item in the legend
//itemWidth: 25, //The graph width of the legend mark
//itemHeight: 14, //The graph height of the legend mark
//formatter: function (name) { // Used to format legend text, supporting two forms: string templates and callback functions. The template variable is the legend name {name}
//return 'Legend ' + name;
//},
//selectedMode: "single", //The pattern selected by the legend, true is turned on, false is turned off, single single selection, multiple multiple selection
//inactiveColor: "#ccc", //The color when the legend is closed
//textStyle: mytextStyle, //text style
data: ['Current feature', 'Personal feature', 'Public feature', 'Feature canvas'], //Series are distinguished by name
//backgroundColor: "transparent", //Title background color
//borderColor: "#ccc", //Border color
//borderWidth: 0, //Border line width
//shadowColor: "red", //shadow color
//shadowOffsetX: 0, //The offset distance in the horizontal direction of the shadow
//shadowOffsetY: 0, //The offset distance in the vertical direction of the shadow
//shadowBlur: 10, //The blur size of the shadow
};
const dataZoom= [ //Region Zoom
{
id:'dataZoomX',
show:true, //Whether the component is displayed. If set to false, it will not be displayed, but the data filtering function still exists.
backgroundColor: "rgba(47,69,84,0)", //The background color of the component
type: 'slider', //slider means that there are sliding blocks, inside means built-in
dataBackground: { //Style of data shadow.
lineStyle: mylineStyle, //Shadow line style
areaStyle: myareaStyle, //Shadow fill style
},
fillerColor:"rgba(167,183,204,0.4)", //Select the fill color of the range.
borderColor: "#ddd", //Border color.
filterMode: 'filter', //'filter': The data outside the current data window is filtered out. That is, it will affect the data range of other axes. For each data item, as long as there is a dimension outside the data window, the entire data item will be filtered out.
//'weakFilter': The data outside the current data window is filtered out. That is, it will affect the data range of other axes. For each data item, the entire data item will be filtered out only when all dimensions are outside the same side of the data window.
//'empty': The data outside the current data window is set to empty. That is, it will not affect the data range of other axes.
//'none': But filter the data and only change the range of the number axis.
xAxisIndex: 0, //Set the x-axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays
yAxisIndex: [0, 2], //Set the y-axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays.
radiusAxisIndex: 3, //Set the radius axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays.
angleAxisIndex: [0, 2], //Set the angle axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays
start: 30, //The starting percentage of the data window range means 30%
end: 70, //The end percentage of the data window range indicates 70%
startValue: 10, //The starting value of the data window range
endValue: 100, //The end value of the data window range.
oriented: "horizontal", //Is the layout horizontal or vertical? Not only the layout method, but also the Cartesian coordinate system, it also determines that the default controls the horizontal or vertical numerical axis. 'horizontal': horizontal. 'vertical': vertical.
zoomLock: false, // Whether to lock the size of the selection area (or data window)? If set to true, the size of the selected area is locked, that is, it can only be translated, not scaled.
throttle: 100, //Set the frequency of triggering view refresh. Units are milliseconds (ms).
zoomOnMouseWheel: true, //How to trigger zoom. The optional value is: true: means that no function key is pressed, and the mouse wheel can trigger zooming. false: means that the mouse wheel cannot trigger zoom. 'shift': It means that holding down shift and mouse wheel can trigger zooming. 'ctrl': It means that holding down ctrl and mouse wheel can trigger zoom. 'alt': It means that holding alt and the mouse wheel can trigger zooming.
moveOnMouseMove: true, //How to trigger data window panning. true: means that no function key is pressed, and the mouse movement can trigger the data window panning. false: means that the mouse wheel cannot trigger zoom. 'shift': means that holding shift and mouse movement can trigger data window panning. 'ctrl': means that holding down ctrl and mouse movement can trigger data window panning. 'alt': means that holding alt and mouse movement can trigger data window panning.
left: "center", //The distance from the left side of the container, 'left', 'center', 'right', '20%'
top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
right: "auto", //The distance from the right side of the component to the container, '20%'
bottom: "auto", //The distance from the lower side of the container, '20%'
},
{
id:'dataZoomY',
type:'inside',
filterMode:'empty',
disabled:false, // Whether to stop the component's function.
xAxisIndex: 0, //Set the x-axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays
yAxisIndex: [0, 2], //Set the y-axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays.
radiusAxisIndex: 3, //Set the radius axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays.
angleAxisIndex: [0, 2], //Set the angle axis controlled by the dataZoom-inside component, and multiple axes can be represented by arrays
start: 30, //The starting percentage of the data window range means 30%
end: 70, //The end percentage of the data window range indicates 70%
startValue: 10, //The starting value of the data window range
endValue: 100, //The end value of the data window range.
oriented: "horizontal", //Is the layout horizontal or vertical? Not only the layout method, but also the Cartesian coordinate system, it also determines that the default controls the horizontal or vertical numerical axis. 'horizontal': horizontal. 'vertical': vertical.
zoomLock: false, // Whether to lock the size of the selection area (or data window)? If set to true, the size of the selected area is locked, that is, it can only be translated, not scaled.
throttle: 100, //Set the frequency of triggering view refresh. Units are milliseconds (ms).
zoomOnMouseWheel: true, //How to trigger zoom. The optional value is: true: means that no function key is pressed, and the mouse wheel can trigger zooming. false: means that the mouse wheel cannot trigger zoom. 'shift': It means that holding down shift and mouse wheel can trigger zooming. 'ctrl': It means that holding down ctrl and mouse wheel can trigger zoom. 'alt': It means that holding alt and the mouse wheel can trigger zooming.
moveOnMouseMove: true, //How to trigger data window panning. true: means that no function key is pressed, and the mouse movement can trigger the data window panning. false: means that the mouse wheel cannot trigger zoom. 'shift': means that holding shift and mouse movement can trigger data window panning. 'ctrl': means that holding down ctrl and mouse movement can trigger data window panning. 'alt': means that holding alt and mouse movement can trigger data window panning.
}
];
const visualMap= [ //Visual mapping component, used to perform "visual encoding", that is, map data to visual elements. The visual element can be: symbol: the graphic category of the primitive. symbolSize: The size of the element. color: The color of the element.
//colorAlpha: Transparency of the color of the element. opacity: Transparency of elements and their appendages (such as text tags). colorLightness: The lightness and darkness of the color. colorSaturation: The saturation of the color. colorHue: The tone of the color.
{
show:true, // Whether to display the visualMap-continuous component. If set to false, it will not be displayed, but the data mapping function still exists
type: 'continuous', //Defined as continuous type viusalMap
min: 10, //Specify the minimum allowed value of the visualMapContinuous component
max: 100, //Specify the maximum allowed value of the visualMapContinuous component
range: [15, 40], //Specify the position of the corresponding value of the handle. range should be within the range of min max
calculate: true, // Whether to display the handle for dragging (the handle can be dragged and adjusted to the selected range)
realtime: true, //Whether to update in real time when dragging
inverse: false, //Whether to reverse the visualMap component
precision: 0, //The decimal accuracy of data display is 0 by default, no decimal points
itemWidth: 20, //The width of the figure, that is, the width of the strip.
itemHeight: 140, //The height of the figure, that is, the height of the strip.
align: "auto", //Specify the placement position of the handle and text in the component. The optional value is: 'auto' and automatically decides. 'left' handle and label on the right. 'right' handle and label on the left. 'top' handle and label are under. 'bottom' handle and label on.
text: ['High', 'Low'], //Text at both ends
textGap: 10, //The distance between the text subjects at both ends is px
dimension: 2, //Specify the "dimensionality" of the data to map to the visual element. "Data" means . It can be understood as a two-dimensional array, where each column is a dimension, and the last dimension in data is taken by default
seriesIndex: 1, //Specify which series data is taken, that is, which series is from, and all series are taken by default
hoverLink: true, //When the mouse is suspended on the visualMap component, the corresponding graphic element in the chart will be highlighted
inRange: { //Define the visual element in the selected range
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange: {//Defines the visual element outside the selected range.
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //The Canvas of the graph belonging to is layered, and the zlevel large Canvas will be placed on top of the zlevel small Canvas
z: 2, //The z-layer of the component belonging to it, and the graph with a small z value will be overwritten by a graph with a large z value.
left: "center", //The distance from the left side of the container, 'left', 'center', 'right', '20%'
top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
right: "auto", //The distance from the right side of the component to the container, '20%'
bottom: "auto", //The distance from the lower side of the container, '20%'
ORient: "vertical", // Legend arrangement direction
padding: 5, // Legend inner margin, unit px 5 [5, 10] [5,10,5,10]
backgroundColor: "transparent", //Title background color
borderColor: "#ccc", //Border color
borderWidth: 0, //Border line width
textStyle: mytextStyle, //Text Style
formatter: function (value) { //Tag formatting tool.
return 'aaaa' + value; //The range tag displays the content.
}
},
{
show:true, // Whether to display the visualMap-continuous component. If set to false, it will not be displayed, but the data mapping function still exists
type: 'piecewise', //Defined as segmented visualMap
splitNumber: 5, //For continuous data, it is automatically split into several segments. Default is 5 segments
pieces: [ //Customize the scope of each paragraph, the text of each paragraph, and the special style of each paragraph
{ min: 1500 }, //No max is specified, indicating that max is infinite (Infinity).
{ min: 900, max: 1500},
{ min:310, max: 1000},
{ min:200, max: 300},
{ min:10, max: 200, label: '10 to 200 (custom label)'},
{ value:123, label: '123(custom special color)', color: 'grey' }, // means that value is equal to 123.
{ max: 5 } //Don't specify min, which means that min is infinite (-Infinity).
],
categories: ['Severe pollution', 'severe pollution', 'moderate pollution', 'mild pollution', 'good', 'optimal'], //A full set used to represent discrete data (or can be called category data, enumerated data)
min: 10, //Specify the minimum allowed value of the visualMapContinuous component
max: 100, //Specify the maximum allowed value of the visualMapContinuous component
minOpen: true, //There will be an additional "< min" selection block on the interface
maxOpen: true, //There will be an additional ">max" selection block on the interface.
selectedMode: "multiple", //Select mode, can be: 'multiple' (multiple selection). 'single'(single choice).
inverse: false, //Whether to reverse the visualMap component
precision: 0, //The decimal accuracy of data display is 0 by default, no decimal points
itemWidth: 20, //The width of the figure, that is, the width of the strip.
itemHeight: 140, //The height of the figure, that is, the height of the strip.
align: "auto", //Specify the placement position of the handle and text in the component. The optional value is: 'auto' and automatically decides. 'left' handle and label on the right. 'right' handle and label on the left. 'top' handle and label are under. 'bottom' handle and label on.
text: ['High', 'Low'], //Text at both ends
textGap: 10, //The distance between the text subjects at both ends is px
showLabel: true, // Whether to display the text label for each item
itemGap: 10, //The distance between each two elements, unit is px
itemSymbol: "roundRect", //Default graphics. Optional values are: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension: 2, //Specify the "dimensionality" of the data to map to the visual element. "Data" means . It can be understood as a two-dimensional array, where each column is a dimension, and the last dimension in data is taken by default
seriesIndex: 1, //Specify which series data is taken, that is, which series is from, and all series are taken by default
hoverLink: true, //When the mouse is suspended on the visualMap component, the corresponding graphic element in the chart will be highlighted
inRange: { //Define the visual element in the selected range
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange: {//Defines the visual element outside the selected range.
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel:0, //The Canvas of the graph belonging to is layered, and the zlevel large Canvas will be placed on top of the zlevel small Canvas
z: 2, //The z-layer of the component belonging to it, and the graph with a small z value will be overwritten by a graph with a large z value.
left: "center", //The distance from the left side of the container, 'left', 'center', 'right', '20%'
top: "top", //The distance between the component and the upper side of the container, 'top', 'middle', 'bottom', '20%'
right: "auto", //The distance from the right side of the component to the container, '20%'
bottom: "auto", //The distance from the lower side of the container, '20%'
ORient: "vertical", // Legend arrangement direction
padding: 5, // Legend inner margin, unit px 5 [5, 10] [5,10,5,10]
backgroundColor: "transparent", //Title background color
borderColor: "#ccc", //Border color
borderWidth: 0, //Border line width
textStyle: mytextStyle, //Text Style
formatter: function (value) { //Tag formatting tool.
return 'aaaa' + value; //The range tag displays the content.
}
}
];
const mytextStyle={
color:"#333", // Text color:
fontStyle: "normal", //italic italic oblique tilt
fontWeight: "normal", //text thickness bold bolder lighter 100 | 200 | 300 | 400...
fontFamily: "sans-serif", //Font series
fontSize: 18, //font size
};
const mylineStyle={
color:"#333", //color, 'rgb(128, 128, 128)', 'rgba(128, 128, 0.5)', support linear gradient, radial gradient, texture fill
shadowColor: "red", //shadow color
shadowOffsetX: 0, //The offset distance in the horizontal direction of the shadow.
shadowOffsetY: 0, //The offset distance in the vertical direction of the shadow
shadowBlur: 10, //The blur size of the graphic shadow.
type: "solid", //The type of coordinate axis line, solid, dashed, dotted
width: 1, //Coordinate axis line width
opacity: 1, //Graphic transparency. Supports numbers from 0 to 1, and the figure is not drawn when 0
};
const myareaStyle={
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], //Separate the area color. The separating area will be set in sequence in order of colors in the array. By default, it is a dark spacer color.
shadowColor: "red", //shadow color
shadowOffsetX: 0, //The offset distance in the horizontal direction of the shadow.
shadowOffsetY: 0, //The offset distance in the vertical direction of the shadow
shadowBlur: 10, //The blur size of the graphic shadow.
opacity: 1, //Graphic transparency. Supports numbers from 0 to 1, and the figure is not drawn when 0
};
const myitemStyle={
color:"blue", //color
borderColor: "#000", //Border color
borderWidth: 0, //The stroke width of the bar is not stroked by default.
borderType: "solid", //The stroke type of the bar is solid line by default, and supports 'dashed', 'dotted'.
barBorderRadius: 0, //The rounded corner radius of the cylindrical border, unit px, supports passing in arrays to specify 4 rounded corner radii of the cylindrical shape respectively.
shadowBlur: 10, //The blur size of the graphic shadow.
shadowColor: "#000", //Shadow Color
shadowOffsetX: 0, //The offset distance in the horizontal direction of the shadow.
shadowOffsetY: 0, //The offset distance in the vertical direction of the shadow.
opacity: 1, //Graphic transparency. Supports numbers from 0 to 1, and the figure is not drawn when 0.
};
const mylabel={
show:false, // Whether to display the label.
position: "inside", //The location of the tag. // Absolute pixel values [10, 10],// Relative percentages ['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
offset: [30, 40], //Whether to offset the text. No offset by default. For example: [30, 40] means that the text is offset 30 in the horizontal direction and 40 in the vertical direction.
formatter: '{b}: {c}', //Tag content formatter. The template variables include {a}, {b}, and {c}, respectively representing the series name, data name, and data value.
textStyle: mytextStyle
};
const mypoint={
symbol:"pin", //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
silent: false, // Whether the graphics do not respond to and trigger the mouse event, the default is false, that is, respond to and trigger the mouse event.
label: {
normal: mylabel,
emphasis: mylabel
},
itemStyle: {
normal: myitemStyle,
emphasis: myitemStyle
}
};
const myline={
symbol: ["pin", "circle"], //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
precision: 2, //The accuracy of the value of the line is useful when displaying the average line.
silent: false, // Whether the graphics do not respond to and trigger the mouse event, the default is false, that is, respond to and trigger the mouse event.
label: {
normal: mylabel,
emphasis: mylabel
},
lineStyle: {
normal: mylineStyle,
emphasis: mylineStyle
}
};
const myarea={
silent:false, // Whether the graphics do not respond to and trigger the mouse event, the default is false, that is, respond to and trigger the mouse event.
label: {
normal: mylabel,
emphasis: mylabel
},
itemStyle: {
normal: myitemStyle,
emphasis: myitemStyle
}
};return{
options: {
title: title,//Title settings
tooltip: tooltip,//Node suspension prompt
//toolbox: toolbox,// Switch to download
legend: legend,//group filtering prompts
//dataZoom: dataZoom,// Scalable
//visualMap: visualMap,// Map Map
animationDurationUpdate: 1500, //The duration of the animation.
animationEasingUpdate: 'quinticInOut', //The loading effect of animation
//hasChanged: false,
//flag: false,
series: [
{
type:"graph", //Relationship diagram
//zlevel: 0, //zlevel values of all figures in the bar chart.
//z: 2, //z values of all figures of the bar chart component. Controls the front and back order of the graphics. Graphs with small z values will be overwritten by graphics with large z values.
//left: "10%", //The distance from the left side of the container, a percentage string or an integer number
top: '15%', //The distance from the upper side of the container, percentage string or integer number
//right: "auto", //The distance from the right side of the component, a percentage string or integer number
bottom: "15%", //The distance from the component to the bottom side of the container, a percentage string or integer number
//width: "auto", //Legend width
//height: "auto", //Legend height
//silent: false, // Whether the graphics do not respond to and trigger mouse events, the default is false, that is, respond to and trigger mouse events.
//name: "Public Feature", //Series name, used to display tooltip, legend filtering, and when setOption updates data and configuration items, it is used to specify the corresponding series.
//legendHoverLink: true, //Whether to enable linkage highlighting when legend hover is enabled.
//hoverAnimation: true, //Whether to enable the prompt animation effect of the hover node of the mouse.
//coordinateSystem: null, //null no coordinate system, 'cartesia personal feature d' uses a two-dimensional cartesian coordinate system. 'geo' uses geographic coordinate system, 'polar' uses polar coordinate system
//xAxisIndex: 0, //The index of the x-axis used is useful when there are multiple x-axis in a single chart instance.
//yAxisIndex: 0, //The index of the y-axis used is useful when there are multiple y-axis in a single chart instance.
//polarIndex: 0, //The index of the polar coordinate system used is useful when there are multiple polar coordinate systems in a single chart instance.
//geoIndex: 0, //The index of the geographic coordinate system used is useful when there are multiple geographic coordinate systems in a single chart instance.
//calendarIndex: 0, //The index of the calendar coordinate system used is useful when there are multiple calendar coordinate systems in a single chart instance.
layout: 'circular', //'none' does not adopt any layout, using x and y provided in the node as the position of the node.'circular' adopts a ring layout, and 'force' adopts a force-guided layout.
//circular:{}, //Ring layout related configuration
//force:{}, //Configuration items related to force guidance layout
roam: true, //Whether to enable mouse zoom and pan roaming. Not enabled by default. If you just want to enable zoom or pan, you can set it to 'scale' or 'move'. Set to true to enable
nodeScaleRatio: 0.6, //The corresponding scaling ratio of the node when the mouse roams and zooms. When set to 0, the node does not scale with the mouse zoom.
//draggable: true, //Whether the node can be dragged and dropped, it is only useful when using force to guide the layout.
//focusNodeAdjacency: true, //Whether the node and edges and adjacency nodes are highlighted when the mouse is moved to the node. enlarge
symbol: "circle", //Graphic 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
//symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
//symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
edgeSymbol: ['', 'arrow'],//The mark types at both ends of the edges can be specified by an array, or a single unified specification. The marks are not displayed by default, and common ones can be set as arrows.
//edgeSymbolSize: [5, 2], //The mark sizes at both ends of the edges can be specified by an array, or a single unified specification.
cursor: "pointer", //What is the style of the mouse when the mouse is suspended on a graphic element. same as CSS cursor.
label: { //The text label on the graph can be used to illustrate some data information of the graph, such as values, names, etc.
//normal: mylabel,
//emphasis: mylabel
},
edgeLabel: {//Show the label in the middle of the line
//show: true,
//normal: mylabel,
//emphasis: mylabel
},
emphasis: {//The highlighted graphic style that appears in the suspended appearance.
//lineStyle: mylineStyle,
//itemStyle: myitemStyle,
//label: mylineStyle,
//edgeLabel: mylineStyle,
},
itemStyle: {//Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: myitemStyle,
//emphasis: myitemStyle,
},
lineStyle: {//Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: mylineStyle,
//emphasis: mylineStyle,
},
categories: [//Category for node classification, optional.
{
name:"Current feature", //Category name
//symbol: "circle", //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
//symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
//symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
//label: { //The text label on the graph can be used to illustrate some data information of the graph, such as values, names, etc.
//normal: mylabel,
//emphasis: mylabel
//},
//itemStyle: { //Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: myitemStyle,
//emphasis: myitemStyle,
//},
},
{
name:"Personal Characteristics", //Category Name
//symbol: "rect", //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
//symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
//symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
//label: { //The text label on the graph can be used to illustrate some data information of the graph, such as values, names, etc.
//normal: mylabel,
//emphasis: mylabel
//},
//itemStyle: { //Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: myitemStyle,
//emphasis: myitemStyle,
//},
},
{
name:"Public Feature", //Category Name
//symbol: "roundRect", //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
//symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
//symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
//label: { //The text label on the graph can be used to illustrate some data information of the graph, such as values, names, etc.
//normal: mylabel,
//emphasis: mylabel
//},
//itemStyle: { //Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: myitemStyle,
//emphasis: myitemStyle,
//},
},
{
name:"Feature canvas", //Category name
//symbol: "pin", //Graphics 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//symbolSize: 50, //The size of the mark can be set to a single number such as 10, or it can be divided into width and height by arrays, for example [20, 10] means that the mark width is 20 and the height is 10.
//symbolRotate: 0, //The rotation angle of the marker. Note that when symbol is 'arrow' in markLine, the angle that symbolRotate is forced to be set to tangent is ignored.
//symbolOffset: [0, 0], // Mark the offset from the original position. By default, the marker is centered at the corresponding position of the data.
//label: { //The text label on the graph can be used to illustrate some data information of the graph, such as values, names, etc.
//normal: mylabel,
//emphasis: mylabel
//},
//itemStyle: { //Graphic style, normal is the style of the graphics in the default state; emphasis is the style of the graphics in the highlight state, such as when the mouse is suspended or the legend is linked to highlight.
//normal: myitemStyle,
//emphasis: myitemStyle,
//},
},
],
data: [//data isnode
{
name:'Current Feature',//x: 100,
//y: 100,
//value: 20,
//symbolSize: 20,
itemStyle: {
normal: {
color:'blank'}
}
}, {
name:'Personal Characteristics',//x: 100,
//y: 100,
//value: 20,
//symbolSize: 20,
itemStyle: {
normal: {
color:'#15a4fa'}
}
}, {
name:'public feature',//x: 100,
//y: 100,
//value: 20,
//symbolSize: 20,
itemStyle: {
color:'blue'}
}, {
name:'Feature Canvas',//x: 100,
//y: 100,
//value: 20,
//symbolSize: 100,
itemStyle: {
color:'red'}
}
],
links: [//links are edges
{
source:'Current Feature',
target:'personal characteristics'}, {
source:'Current Feature',
target:'public features'}, {
source:'Current Feature',
target:'Feature Canvas'}
],//markPoint: same bar
//markLine: same bar
//markArea: same bar
//tooltip: tooltip
},
]
}
};
},
mounted () { }
}