|
|
@@ -1,191 +1,489 @@
|
|
|
<template>
|
|
|
- <div class="echarts-container" />
|
|
|
+ <div id="main" class="echarts-container" />
|
|
|
</template>
|
|
|
<script>
|
|
|
-import * as echarts from 'echarts/core'
|
|
|
-import { TooltipComponent } from 'echarts/components'
|
|
|
-import { TreeChart } from 'echarts/charts'
|
|
|
-import { CanvasRenderer } from 'echarts/renderers'
|
|
|
-echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
|
|
|
-let myChart
|
|
|
-let option
|
|
|
+import { TreeChart } from "echarts/charts";
|
|
|
+import { TooltipComponent } from "echarts/components";
|
|
|
+import * as echarts from "echarts/core";
|
|
|
+import { CanvasRenderer } from "echarts/renderers";
|
|
|
+
|
|
|
+echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
|
|
|
+// let this.myChart;
|
|
|
+let option;
|
|
|
+
|
|
|
+var treeNodePadding = 50; //节点间最小间隔
|
|
|
+
|
|
|
+var treeTopPadding = 120; //tree距顶端的距离
|
|
|
+
|
|
|
+var rightNode; //最右侧节点,用于计算偏移量
|
|
|
export default {
|
|
|
- name: 'TreeChart',
|
|
|
+ name: "TreeChart",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ centerLoca: [],
|
|
|
+ fontSize: 6,
|
|
|
+ chartWidth: 0,
|
|
|
+ chartHeight: 0,
|
|
|
+ center: [this.chartWidth, "50%"],
|
|
|
+ };
|
|
|
+ },
|
|
|
props: {
|
|
|
treeData: {
|
|
|
type: Object,
|
|
|
default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
- }
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ topDeep: Number,
|
|
|
+ type: String,
|
|
|
+ clickNodeList: Array,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ clickNodeList: {
|
|
|
+ handler(newValue, old) {
|
|
|
+ if (newValue) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ treeData: {
|
|
|
+ handler(newValue, old) {
|
|
|
+ console.log(newValue);
|
|
|
+ if (newValue) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ chartWidth: {
|
|
|
+ handler(newValue, old) {
|
|
|
+ console.log(newValue);
|
|
|
+ if (newValue) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.init()
|
|
|
+ this.init();
|
|
|
// 监听树图节点的点击事件
|
|
|
- myChart.on('click', (e) => {
|
|
|
- // console.log('e:', e)
|
|
|
- this.$emit('clickNode', e)
|
|
|
- })
|
|
|
+ this.myChart.on("click", (e) => {
|
|
|
+ console.log("e:", e);
|
|
|
+ this.$emit("clickNode", e);
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
+ const that = this;
|
|
|
// console.log('$el:', this.$el)
|
|
|
- myChart = echarts.init(this.$el)
|
|
|
+ that.myChart = echarts.init(this.$el);
|
|
|
+ that.myChart.clear();
|
|
|
option = {
|
|
|
- tooltip: { // 提示框浮层设置
|
|
|
- trigger: 'item',
|
|
|
- triggerOn: 'mousemove', // 提示框触发条件
|
|
|
+ tooltip: {
|
|
|
+ // 提示框浮层设置
|
|
|
+ trigger: "item",
|
|
|
+ triggerOn: "mousemove", // 提示框触发条件
|
|
|
enterable: true, // 鼠标是否可进入提示框浮层中，默认false
|
|
|
confine: true, // 是否将tooltip框限制在图表的区域内
|
|
|
- formatter: function(params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
|
|
|
- // console.log('params:', params)
|
|
|
- return params.marker + params.name + '<br/>' + '$ ' + (params.value || '--')
|
|
|
+ padding: [5, 10],
|
|
|
+ formatter: function (params) {
|
|
|
+ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
|
|
|
+ const relationStr =
|
|
|
+ "<div style='display: flex;flex-direction: column;'>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.numberLayers") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ (Number(params.data.TOP_NETWORK_DEEP) - Number(that.topDeep)) +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.memberCode") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.USER_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.name") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.REAL_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.level") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.DEC_LV_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.highest") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.EMP_LV_NAME +
|
|
|
+ "，" +
|
|
|
+ params.data.CROWN_LV_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.periodNumber") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.PERIOD_AT +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "</div>";
|
|
|
+ const networkStr =
|
|
|
+ "<div style='display: flex;flex-direction: column;'>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.memberCode") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.USER_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.name") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.REAL_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.level") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.DEC_LV_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.highest") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.EMP_LV_NAME +
|
|
|
+ "，" +
|
|
|
+ params.data.CROWN_LV_NAME +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "<div>" +
|
|
|
+ '<span style="color: #606266;">' +
|
|
|
+ that.$t("atlas.periodNumber") +
|
|
|
+ ": " +
|
|
|
+ "</span>" +
|
|
|
+ '<span style="color: #000000;">' +
|
|
|
+ params.data.PERIOD_AT +
|
|
|
+ "</span>" +
|
|
|
+ "</div>" +
|
|
|
+ "</div>";
|
|
|
+
|
|
|
+ return that.type === "placement" ? relationStr : networkStr;
|
|
|
},
|
|
|
// valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数
|
|
|
// return '$' + value.toFixed(2)
|
|
|
// },
|
|
|
- backgroundColor: '#FFF', // 提示框浮层的背景颜色
|
|
|
- borderColor: '#1890FF', // 提示框浮层的边框颜色
|
|
|
- borderWidth: 1, // 提示框浮层的边框宽
|
|
|
+ backgroundColor: "rgba(250,250,250,0.99)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "#1890FF", // 提示框浮层的边框颜色
|
|
|
+ borderWidth: 0.5, // 提示框浮层的边框宽
|
|
|
borderRadius: 8, // 提示框浮层圆角
|
|
|
- padding: [6, 8], // 提示框浮层的内边距
|
|
|
- textStyle: { // 提示框浮层的文本样式
|
|
|
- color: '#333', // 文字颜色
|
|
|
- fontWeight: 400, // 字体粗细
|
|
|
- fontSize: 16, // 字体大小
|
|
|
- lineHeight: 20, // 行高
|
|
|
- width: 60, // 文本显示宽度
|
|
|
+ textStyle: {
|
|
|
+ // 提示框浮层的文本样式
|
|
|
+ color: "#333", // 文字颜色
|
|
|
+ // fontWeight: 400, // 字体粗细
|
|
|
+ // fontSize: that.fontSize, // 字体大小
|
|
|
+ // lineHeight: 20, // 行高
|
|
|
+ // width: 60, // 文本显示宽度
|
|
|
// 文字超出宽度是否截断或者换行；只有配置width时有效
|
|
|
- overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
|
|
|
- ellipsis: '...'
|
|
|
+ overflow: "breakAll", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
|
|
|
+ ellipsis: "...",
|
|
|
+ },
|
|
|
+ extraCssText:
|
|
|
+ "min-height:100px;box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: left;", // 额外添加到浮层的css样式
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ shadowStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: "rgba(255, 255, 255, 0)" },
|
|
|
+ { offset: 1, color: "rgba(37, 107, 230, 0.18)" },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
},
|
|
|
- extraCssText: 'box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: right;' // 额外添加到浮层的css样式
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- width: '100%',
|
|
|
- height: '100%',
|
|
|
- type: 'tree',
|
|
|
+ width: that.chartWidth + "px",
|
|
|
+ height: "100%",
|
|
|
+ type: "tree",
|
|
|
data: [this.treeData],
|
|
|
- name: '树图',
|
|
|
- top: '10%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
|
|
|
- left: '5%', // 组件离容器左侧的距离
|
|
|
- bottom: '1%', // 组件离容器下侧的距离
|
|
|
- right: '2%', // 组件离容器右侧的距离
|
|
|
- layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
|
|
|
- orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
|
|
|
- edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
|
|
|
+ name: "树图",
|
|
|
+ top: "1%", // 组件离容器上侧的距离，像素值20，或相对容器的百分比
|
|
|
+ left: "1%", // 组件离容器左侧的距离
|
|
|
+ bottom: "1%", // 组件离容器下侧的距离
|
|
|
+ right: "1%", // 组件离容器右侧的距离
|
|
|
+ layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
|
|
|
+ orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
|
|
|
+ edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
|
|
|
+ // edgeForkPosition:"10%",
|
|
|
roam: true, // 是否开启鼠标缩放或平移，默认false
|
|
|
+ zoom: 0.5,
|
|
|
scaleLimit: {
|
|
|
min: 0.5,
|
|
|
- max: 10
|
|
|
+ max: 10,
|
|
|
+ },
|
|
|
+ center: that.center || null,
|
|
|
+ // center: [5, 5],
|
|
|
+ initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
|
|
|
+ // symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
|
|
|
+ symbol: function (value, params) {
|
|
|
+ // params.data节点的所有数据
|
|
|
+ if (params.data.leaf == true) {
|
|
|
+ return "emptyCircle";
|
|
|
+ } else if (params.data.leaf == false) {
|
|
|
+ return "circle";
|
|
|
+ }
|
|
|
},
|
|
|
- initialTreeDepth: 5, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
|
|
|
- // symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
|
|
|
- symbolRotate: 270, // 配合arrow图形使用效果较好
|
|
|
- symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小
|
|
|
- itemStyle: { // 树图中每个节点的样式
|
|
|
- color: '#1890FF', // 节点未展开时的填充色
|
|
|
- borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
|
|
|
- borderWidth: 1, // 描边线宽，为0时无描边
|
|
|
- borderType: 'dotted', // 描边类型
|
|
|
- borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
|
|
|
- shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
|
|
|
- shadowBlur: 16, // 图形阴影的模糊大小
|
|
|
- opacity: 1 // 图形透明度
|
|
|
+ // symbolRotate: 270, // 配合arrow图形使用效果较好
|
|
|
+ symbolSize: 10, // 大于0时是圆圈，等于0时不展示，标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ // 树图中每个节点的样式
|
|
|
+ color: "#1890FF", // 节点未展开时的填充色
|
|
|
+ borderColor: "rgba(255, 144, 0, 1)", // 图形的描边颜色
|
|
|
+ borderWidth: 0.5, // 描边线宽，为0时无描边
|
|
|
+ borderType: "dotted", // 描边类型
|
|
|
+ borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
|
|
|
+ shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
|
|
|
+ shadowBlur: 12, // 图形阴影的模糊大小
|
|
|
+ opacity: 1, // 图形透明度
|
|
|
},
|
|
|
- label: { // 每个节点对应的文本标签样式
|
|
|
+ label: {
|
|
|
+ // 每个节点对应的文本标签样式
|
|
|
show: true, // 是否显示标签
|
|
|
- distance: 8, // 文本距离图形元素的距离
|
|
|
- position: 'left', // 标签位置
|
|
|
- verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
|
|
|
- align: 'center', // 文字水平对齐方式，默认自动，left，right，center
|
|
|
- fontSize: 16, // 字体大小
|
|
|
- color: '#333', // 字体颜色
|
|
|
- backgroundColor: '#F0F5FA', // 文字块的背景颜色
|
|
|
- borderColor: '#1890FF', // 文字块边框颜色
|
|
|
- borderWidth: 1, // 文字块边框宽度
|
|
|
- borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
|
|
|
- borderRadius: 4, // 文字块的圆角
|
|
|
- padding: [6, 12], // 文字块内边距
|
|
|
- shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
|
|
|
+ // distance: 22, // 文本距离图形元素的距离
|
|
|
+ position: "bottom", // 标签位置
|
|
|
+ verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
|
|
|
+ align: "center", // 文字水平对齐方式，默认自动，left，right，center
|
|
|
+ fontSize: that.fontSize, // 字体大小
|
|
|
+ color: "#333", // 字体颜色
|
|
|
+ backgroundColor: "#F0F5FA", // 文字块的背景颜色
|
|
|
+ borderColor: "#1890FF", // 文字块边框颜色
|
|
|
+ borderWidth: 0.5, // 文字块边框宽度
|
|
|
+ borderType: "solid", // 文字块边框描边类型 solid dashed dotted
|
|
|
+ borderRadius: 6, // 文字块的圆角
|
|
|
+ padding: [5, 6], // 文字块内边距
|
|
|
+ shadowColor: "rgba(0,121,221,0.6)", // 文字块的背景阴影颜色
|
|
|
shadowBlur: 6, // 文字块的背景阴影长度
|
|
|
- width: 60,
|
|
|
+ width: 80,
|
|
|
// 文字超出宽度是否截断或者换行；只有配置width时有效
|
|
|
- overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
|
|
|
- ellipsis: '...'
|
|
|
+ overflow: "truncate", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
|
|
|
+ ellipsis: "...",
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ params.data.USER_NAME + "\n" + "\n" + params.data.REAL_NAME
|
|
|
+ );
|
|
|
+ // return params.data.REAL_NAME
|
|
|
+ },
|
|
|
},
|
|
|
- lineStyle: { // 树图边的样式
|
|
|
- color: 'rgba(0,0,0,.35)', // 树图边的颜色
|
|
|
- width: 2, // 树图边的宽度
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ // 树图边的样式
|
|
|
+ color: "rgba(0,0,0,.35)", // 树图边的颜色
|
|
|
+ width: 1, // 树图边的宽度
|
|
|
curveness: 0.5, // 树图边的曲度
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
|
|
|
- shadowBlur: 10 // 图形阴影的模糊大小
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
|
|
|
+ shadowBlur: 10, // 图形阴影的模糊大小
|
|
|
},
|
|
|
- emphasis: { // 树图中图形和标签高亮的样式
|
|
|
+ emphasis: {
|
|
|
+ // 树图中图形和标签高亮的样式
|
|
|
disabled: false, // 是否关闭高亮状态，默认false
|
|
|
// 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
|
|
|
- focus: 'self', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
|
|
|
- blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
|
|
|
- itemStyle: { // 该节点的样式
|
|
|
- color: '#1890FF', // 图形的颜色
|
|
|
+ focus: "relative", // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点
|
|
|
+ blurScope: "coordinateSystem", // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局
|
|
|
+ itemStyle: {
|
|
|
+ // 该节点的样式
|
|
|
+ color: "#1890FF", // 图形的颜色
|
|
|
// borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色
|
|
|
- borderWidth: 1, // 描边线宽，为0时无描边
|
|
|
- borderType: 'solid', // 描边类型 solid dashed dotted
|
|
|
- borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
|
|
|
- shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
|
|
|
+ // borderWidth: 1, // 描边线宽，为0时无描边
|
|
|
+ borderType: "solid", // 描边类型 solid dashed dotted
|
|
|
+ borderCap: "square", // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
|
|
|
+ shadowColor: "rgba(0,121,221,0.3)", // 阴影颜色
|
|
|
shadowBlur: 12, // 图形阴影的模糊大小
|
|
|
- opacity: 1 // 图形透明度
|
|
|
+ opacity: 1, // 图形透明度
|
|
|
},
|
|
|
- lineStyle: { // 树图边的样式
|
|
|
- color: 'rgba(0,0,0,.45)', // 树图边的颜色
|
|
|
+ lineStyle: {
|
|
|
+ // 树图边的样式
|
|
|
+ color: "rgba(0,0,0,.45)", // 树图边的颜色
|
|
|
width: 2, // 树图边的宽度
|
|
|
curveness: 0.5, // 树图边的曲度
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
|
|
|
- shadowBlur: 6 // 图形阴影的模糊大小
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
|
|
|
+ shadowBlur: 6, // 图形阴影的模糊大小
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ // 高亮标签的文本样式
|
|
|
+ color: "#333",
|
|
|
+ fontWeight: 600,
|
|
|
},
|
|
|
- label: { // 高亮标签的文本样式
|
|
|
- color: '#333',
|
|
|
- fontWeight: 600
|
|
|
- }
|
|
|
},
|
|
|
- blur: { // 淡出状态的相关配置，开启emphasis.focus后有效
|
|
|
+ blur: {
|
|
|
+ // 淡出状态的相关配置，开启emphasis.focus后有效
|
|
|
itemStyle: {}, // 节点的样式
|
|
|
lineStyle: {}, // 树图边的样式
|
|
|
- label: {} // 淡出标签的文本样式
|
|
|
+ label: {}, // 淡出标签的文本样式
|
|
|
},
|
|
|
- leaves: { // 叶子节点的特殊配置
|
|
|
- label: { // 叶子节点的文本标签样式
|
|
|
- distance: 8,
|
|
|
+ leaves: {
|
|
|
+ // 叶子节点的特殊配置
|
|
|
+ label: {
|
|
|
+ // 叶子节点的文本标签样式
|
|
|
+ // distance: 22,
|
|
|
// color: '#1890FF',
|
|
|
- position: 'right',
|
|
|
- verticalAlign: 'middle',
|
|
|
- align: 'left'
|
|
|
+ position: "bottom",
|
|
|
+ verticalAlign: "middle",
|
|
|
+ align: "center",
|
|
|
},
|
|
|
itemStyle: {}, // 叶子节点的样式
|
|
|
emphasis: {}, // 叶子节点高亮状态的配置
|
|
|
blur: {}, // 叶子节点淡出状态的配置
|
|
|
- select: {} // 叶子节点选中状态的配置
|
|
|
+ select: {}, // 叶子节点选中状态的配置
|
|
|
},
|
|
|
animation: true, // 是否开启动画
|
|
|
expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
|
|
|
- animationDuration: 550, // 初始动画的时长
|
|
|
- animationEasing: 'linear', // 初始动画的缓动效果
|
|
|
+ animationDuration: 500, // 初始动画的时长
|
|
|
+ animationEasing: "linear", // 初始动画的缓动效果
|
|
|
animationDelay: 0, // 初始动画的延迟
|
|
|
- animationDurationUpdate: 750, // 数据更新动画的时长
|
|
|
- animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
|
|
|
- animationDelayUpdate: 0 // 数据更新动画的延迟
|
|
|
+ animationDurationUpdate: 500, // 数据更新动画的时长
|
|
|
+ animationEasingUpdate: "cubicInOut", // 数据更新动画的缓动效果
|
|
|
+ animationDelayUpdate: 0, // 数据更新动画的延迟
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && that.myChart.setOption(option, true);
|
|
|
+ that.resize();
|
|
|
+
|
|
|
+ // that.adjustTreeView();
|
|
|
+ that.myChart.getZr().off("mousewheel");
|
|
|
+ that.myChart.getZr().on("mousewheel", (param) => {
|
|
|
+ let currentOption = that.myChart.getOption();
|
|
|
+ // console.log(currentOption);
|
|
|
+ if (currentOption.series[0]) {
|
|
|
+ let zoom = currentOption.series[0].zoom;
|
|
|
+ // that.fontSize = 10 * zoom
|
|
|
+ currentOption.textStyle.fontSize = 10 * zoom;
|
|
|
+ currentOption.series[0].label.fontSize = 8 * zoom;
|
|
|
+ currentOption.series[0].label.width = 110 * zoom;
|
|
|
+ currentOption.series[0].label.distance = 18 * zoom;
|
|
|
+ currentOption.series[0].leaves.distance = 18 * zoom;
|
|
|
+ option && that.myChart.setOption(currentOption);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ resize() {
|
|
|
+ let elesArr = Array.from(
|
|
|
+ new Set(this.myChart._chartsViews[0]._data._graphicEls)
|
|
|
+ );
|
|
|
+ console.log(elesArr.length)
|
|
|
+ let dep = this.myChart._chartsViews[0]._data.tree.root.height; //获取树高
|
|
|
+ console.log(dep);
|
|
|
+ let layer_height = 90; //层级之间的高度
|
|
|
+ let currentHeight = layer_height * (dep + 1) || layer_height;
|
|
|
+ let newHeight = Math.max(currentHeight, layer_height);
|
|
|
+ this.chartHeight = newHeight + "px";
|
|
|
+ let layer_width = 90; // 兄弟节点之间的距离
|
|
|
+ let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
|
|
|
+ let newWidth = Math.max(currentWidth, layer_width);
|
|
|
+ console.log(newWidth);
|
|
|
+ if (newWidth < 200) {
|
|
|
+ this.center[0] = '-70%';
|
|
|
+ this.center[1] = (dep * 2) + '0%';
|
|
|
+
|
|
|
+ }else if (newWidth > 200 && newWidth < 500) {
|
|
|
+ this.center[0] = '-56%';
|
|
|
+ this.center[1] = (dep * 1.5) + '0%';
|
|
|
+
|
|
|
+ }else if (newWidth > 500 && newWidth < 1000) {
|
|
|
+ this.center[0] = '-30%';
|
|
|
+ this.center[1] = (dep) + '0%';
|
|
|
+
|
|
|
+ } else if (newWidth > 1000){
|
|
|
+ this.center[0] = elesArr.length > 60 ? newWidth * 1.5 : newWidth * 1.2;
|
|
|
+ this.center[1] = (dep ) + '0%';
|
|
|
+ }
|
|
|
+ this.chartWidth = newWidth;
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ doGlobalTreeChart(ec, data) {
|
|
|
+ // this.myChart.setOption(getGlobalTreeOption());
|
|
|
+ //生成图表后做调整
|
|
|
+ this.adjustTreeView();
|
|
|
+ },
|
|
|
+
|
|
|
+ //调整tree显示
|
|
|
+ adjustTreeView() {
|
|
|
+ var zr = this.myChart.getZr();
|
|
|
+ var domWidth = zr.painter.getWidth();
|
|
|
+ var treeWidth = this.getTreeWidth(zr);
|
|
|
+ if (treeWidth <= domWidth) return;
|
|
|
+ },
|
|
|
+
|
|
|
+ //计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度
|
|
|
+
|
|
|
+ getTreeWidth(zr) {
|
|
|
+ var nodes = zr.storage._roots;
|
|
|
+ console.log(nodes);
|
|
|
+ let max = 0;
|
|
|
+ let min = 0;
|
|
|
+ for (var i = 0; i < nodes.length; i++) {
|
|
|
+ if (nodes[i].type == "image" || nodes[i].type == "icon") {
|
|
|
+ var nodeX = nodes[i].style.x;
|
|
|
+
|
|
|
+ if (nodeX > max) {
|
|
|
+ max = nodeX;
|
|
|
+
|
|
|
+ rightNode = nodes[i];
|
|
|
+
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (nodeX < min) {
|
|
|
+ min = nodeX;
|
|
|
}
|
|
|
- ]
|
|
|
+ }
|
|
|
}
|
|
|
- myChart.setOption(option)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+ return max - min;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.echarts-container {
|
|
|
width: 100%;
|
|
|
- height: calc( 100vh - 100px )
|
|
|
+ height: calc(100vh - 105px);
|
|
|
}
|
|
|
</style>
|
|
|
+
|
kevin_zhangl