| | |
| | | </template> |
| | | |
| | | <script> |
| | | import echarts from "@/assets/js/echarts.min.js"; |
| | | import floatingWindow from "./floatingWindow.vue"; |
| | | export default { |
| | | components: { |
| | |
| | | { |
| | | type: "tree", |
| | | data: [this.chartData], |
| | | // symbol: "emptyCircle", |
| | | top: "10%", |
| | | bottom: "10%", |
| | | layout: "radial", |
| | | symbol: "emptyCircle", |
| | | symbol: "circle", |
| | | symbolSize: 7, |
| | | initialTreeDepth: 3, // 展开所有节点 |
| | | animationDurationUpdate: 750, |
| | | emphasis: { |
| | | focus: "descendant", |
| | | }, |
| | | |
| | | label: { |
| | | position: "top", //标签的位置。 |
| | | verticalAlign: "middle", //文字垂直对齐方式,默认自动。 |
| | | fontSize: 12, //文字的字体大小 |
| | | color: "#bc1c00", |
| | | }, |
| | | leaves: { |
| | | symbol: "emptyCircle", |
| | | label: { |
| | | fontSize: 12, |
| | | }, |
| | | }, |
| | | // leaves: { |
| | | // symbol: "emptyCircle", |
| | | // label: { |
| | | // fontSize: 12, |
| | | // }, |
| | | // }, |
| | | expandAndCollapse: false, |
| | | lineStyle: { |
| | | color: "#bc1c00", |
| | | width: 1, |
| | | }, |
| | | itemStyle: { |
| | | symbol: "emptyCircle", |
| | | color: "#bc1c00", |
| | | color: function (params) { |
| | | return "green"; |
| | | }, |
| | | }, |
| | | roam: true, |
| | | center: ["5%", "0%"], // 微调垂直居中 |
| | |
| | | <style lang="less" scoped> |
| | | .page { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 100vh; |
| | | box-sizing: border-box; |
| | | background-color: #e9e1d4; |
| | | position: relative; |
| | |
| | | } |
| | | |
| | | .page-header { |
| | | height: 9.4%; |
| | | height: 9.4vh; |
| | | width: 100%; |
| | | text-align: left; |
| | | border-bottom: 2px solid #937950; |
| | |
| | | { |
| | | "name": "flare", |
| | | "itemStyle": { |
| | | "color": "#8D77B3" |
| | | }, |
| | | "children": [ |
| | | |
| | | |
| | | |
| | | |
| | | { |
| | | "name": "vis", |
| | | "children": [{ |
| | | "name": "axis", |
| | | "children": [{ |
| | | "name": "Axes", |
| | | "value": 1302, |
| | | "type": "node" |
| | | }, |
| | | { |
| | | "name": "Axis", |
| | | "value": 24593, |
| | | "type": "node" |
| | | }, |
| | | { |
| | | "name": "AxisGridLine", |
| | | "value": 652, |
| | | "type": "node", |
| | | "itemStyle": { |
| | | "color": "#87A7B9" |
| | | } |
| | | }, |
| | | { |
| | | "name": "AxisLabel", |
| | | "value": 636, |
| | | "type": "node", |
| | | "itemStyle": { |
| | | "color": "#6F8F5A" |
| | | } |
| | | }, |
| | | { |
| | | "name": "CartesianAxes", |
| | | "value": 6703, |
| | | "type": "node" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "controls", |
| | | "children": [{ |
| | | "name": "AnchorControl", |
| | | "value": 2138 |
| | | }, |
| | | { |
| | | "name": "ClickControl", |
| | | "value": 3824 |
| | | }, |
| | | { |
| | | "name": "Control", |
| | | "value": 1353 |
| | | }, |
| | | { |
| | | "name": "ControlList", |
| | | "value": 4665 |
| | | }, |
| | | { |
| | | "name": "DragControl", |
| | | "value": 2649 |
| | | }, |
| | | { |
| | | "name": "ExpandControl", |
| | | "value": 2832 |
| | | }, |
| | | { |
| | | "name": "HoverControl", |
| | | "value": 4896 |
| | | }, |
| | | { |
| | | "name": "IControl", |
| | | "value": 763 |
| | | }, |
| | | { |
| | | "name": "PanZoomControl", |
| | | "value": 5222 |
| | | }, |
| | | { |
| | | "name": "SelectionControl", |
| | | "value": 7862 |
| | | }, |
| | | { |
| | | "name": "TooltipControl", |
| | | "value": 8435 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "events", |
| | | "children": [{ |
| | | "name": "DataEvent", |
| | | "value": 2313 |
| | | }, |
| | | { |
| | | "name": "SelectionEvent", |
| | | "value": 1880 |
| | | }, |
| | | { |
| | | "name": "TooltipEvent", |
| | | "value": 1701 |
| | | }, |
| | | { |
| | | "name": "VisualizationEvent", |
| | | "value": 1117 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "legend", |
| | | "children": [{ |
| | | "name": "Legend", |
| | | "value": 20859 |
| | | }, |
| | | { |
| | | "name": "LegendItem", |
| | | "value": 4614 |
| | | }, |
| | | { |
| | | "name": "LegendRange", |
| | | "value": 10530 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "operator", |
| | | "children": [{ |
| | | "name": "distortion", |
| | | "children": [{ |
| | | "name": "BifocalDistortion", |
| | | "value": 4461 |
| | | }, |
| | | { |
| | | "name": "Distortion", |
| | | "value": 6314 |
| | | }, |
| | | { |
| | | "name": "FisheyeDistortion", |
| | | "value": 3444 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "encoder", |
| | | "children": [{ |
| | | "name": "ColorEncoder", |
| | | "value": 3179 |
| | | }, |
| | | { |
| | | "name": "Encoder", |
| | | "value": 4060 |
| | | }, |
| | | { |
| | | "name": "PropertyEncoder", |
| | | "value": 4138, |
| | | "type": "test" |
| | | }, |
| | | { |
| | | "name": "ShapeEncoder", |
| | | "value": 1690, |
| | | "type": "test" |
| | | |
| | | }, |
| | | { |
| | | "name": "SizeEncoder", |
| | | "value": 1830 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "filter", |
| | | "children": [{ |
| | | "name": "FisheyeTreeFilter", |
| | | "value": 5219 |
| | | }, |
| | | { |
| | | "name": "GraphDistanceFilter", |
| | | "value": 3165 |
| | | }, |
| | | { |
| | | "name": "VisibilityFilter", |
| | | "value": 3509 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "IOperator", |
| | | "value": 1286 |
| | | }, |
| | | { |
| | | "name": "label", |
| | | "children": [{ |
| | | "name": "Labeler", |
| | | "value": 9956 |
| | | }, |
| | | { |
| | | "name": "RadialLabeler", |
| | | "value": 3899 |
| | | }, |
| | | { |
| | | "name": "StackedAreaLabeler", |
| | | "value": 3202 |
| | | } |
| | | ] |
| | | }, |
| | | |
| | | { |
| | | "name": "Operator", |
| | | "value": 2490, |
| | | "type": "node" |
| | | }, |
| | | { |
| | | "name": "OperatorList", |
| | | "value": 5248, |
| | | "type": "node" |
| | | |
| | | }, |
| | | { |
| | | "name": "OperatorSequence", |
| | | "value": 4190, |
| | | "type": "node" |
| | | |
| | | { |
| | | "name": "vis", |
| | | "children": [ |
| | | { |
| | | "name": "axis", |
| | | "children": [ |
| | | {"name": "Axes", "value": 1302}, |
| | | {"name": "Axis", "value": 24593}, |
| | | {"name": "AxisGridLine", "value": 652}, |
| | | {"name": "AxisLabel", "value": 636}, |
| | | {"name": "CartesianAxes", "value": 6703} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "controls", |
| | | "children": [ |
| | | {"name": "AnchorControl", "value": 2138}, |
| | | {"name": "ClickControl", "value": 3824}, |
| | | {"name": "Control", "value": 1353}, |
| | | {"name": "ControlList", "value": 4665}, |
| | | {"name": "DragControl", "value": 2649}, |
| | | {"name": "ExpandControl", "value": 2832}, |
| | | {"name": "HoverControl", "value": 4896}, |
| | | {"name": "IControl", "value": 763}, |
| | | {"name": "PanZoomControl", "value": 5222}, |
| | | {"name": "SelectionControl", "value": 7862}, |
| | | {"name": "TooltipControl", "value": 8435} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "events", |
| | | "children": [ |
| | | {"name": "DataEvent", "value": 2313}, |
| | | {"name": "SelectionEvent", "value": 1880}, |
| | | {"name": "TooltipEvent", "value": 1701}, |
| | | {"name": "VisualizationEvent", "value": 1117} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "legend", |
| | | "children": [ |
| | | {"name": "Legend", "value": 20859}, |
| | | {"name": "LegendItem", "value": 4614}, |
| | | {"name": "LegendRange", "value": 10530} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "operator", |
| | | "children": [ |
| | | { |
| | | "name": "distortion", |
| | | "children": [ |
| | | {"name": "BifocalDistortion", "value": 4461}, |
| | | {"name": "Distortion", "value": 6314}, |
| | | {"name": "FisheyeDistortion", "value": 3444} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "encoder", |
| | | "children": [ |
| | | {"name": "ColorEncoder", "value": 3179}, |
| | | {"name": "Encoder", "value": 4060}, |
| | | {"name": "PropertyEncoder", "value": 4138}, |
| | | {"name": "ShapeEncoder", "value": 1690}, |
| | | {"name": "SizeEncoder", "value": 1830} |
| | | ] |
| | | }, |
| | | { |
| | | "name": "filter", |
| | | "children": [ |
| | | {"name": "FisheyeTreeFilter", "value": 5219}, |
| | | {"name": "GraphDistanceFilter", "value": 3165}, |
| | | {"name": "VisibilityFilter", "value": 3509} |
| | | ] |
| | | }, |
| | | {"name": "IOperator", "value": 1286}, |
| | | { |
| | | "name": "label", |
| | | "children": [ |
| | | {"name": "Labeler", "value": 9956}, |
| | | {"name": "RadialLabeler", "value": 3899}, |
| | | {"name": "StackedAreaLabeler", "value": 3202} |
| | | ] |
| | | }, |
| | | |
| | | {"name": "Operator", "value": 2490}, |
| | | {"name": "OperatorList", "value": 5248}, |
| | | {"name": "OperatorSequence", "value": 4190}, |
| | | {"name": "OperatorSwitch", "value": 2581}, |
| | | {"name": "SortOperator", "value": 2023} |
| | | ] |
| | | }, |
| | | {"name": "Visualization", "value": 16540} |
| | | ] |
| | | } |
| | | }, |
| | | { |
| | | "name": "OperatorSwitch", |
| | | "value": 2581 |
| | | }, |
| | | { |
| | | "name": "SortOperator", |
| | | "value": 2023 |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "name": "Visualization", |
| | | "value": 16540 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | } |
| | |
| | | .honors-main { |
| | | width: 77.3%; |
| | | min-width: 1600px; |
| | | transform: scale(1); |
| | | } |
| | | |
| | | .honors-title p { |