|
|
@@ -0,0 +1,752 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="echars">
|
|
|
+ <div ref="first_pie" id="first_pie"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+let data = [
|
|
|
+ {
|
|
|
+ name: "李富贵",
|
|
|
+ id: "lfg",
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FCBB5B",
|
|
|
+ borderColor: "#FCBB5B",
|
|
|
+ shadowColor: "#FCBB5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "王桂花",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "李思思",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "自住房屋",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "车子",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "租房",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "黄涛",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于海",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "张柏",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "付梦杰",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+let links = [
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 1,
|
|
|
+ value: "夫妻",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 2,
|
|
|
+ value: "父亲",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 2,
|
|
|
+ target: 0,
|
|
|
+ value: "女儿",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 3,
|
|
|
+ value: "自住",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 4,
|
|
|
+ value: "车主",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 5,
|
|
|
+ value: "租户",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 6,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 7,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 8,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 9,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+let data2 = [
|
|
|
+ {
|
|
|
+ name: "租房",
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FCBB5B",
|
|
|
+ borderColor: "#FCBB5B",
|
|
|
+ shadowColor: "#FCBB5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "黄涛",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于海",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "张柏",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "付梦杰",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "李富贵",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+let links2 = [
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 1,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 2,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 3,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 4,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 5,
|
|
|
+ value: "房主",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 0,
|
|
|
+ value: "租户",
|
|
|
+ },
|
|
|
+];
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ // this.initEcharts()
|
|
|
+ // this.initNew();
|
|
|
+ this.initTwo(data, links);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initEcharts() {
|
|
|
+ this.myChart = echarts.init(this.$refs.first_pie);
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "#1a4377",
|
|
|
+ tooltip: {},
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "graph",
|
|
|
+ layout: "force",
|
|
|
+ force: {
|
|
|
+ repulsion: 1500,
|
|
|
+ edgeLength: 120,
|
|
|
+ layoutAnimation: true,
|
|
|
+ },
|
|
|
+ symbolSize: 70,
|
|
|
+ nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
|
|
|
+ roam: true, //缩放
|
|
|
+ draggable: true, //节点是否可以拖拽
|
|
|
+ edgeSymbol: ["none", "arrow"], //线2头标记
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "inside",
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ edgeLabel: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ formatter: "{c}",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolKeepAspect: false,
|
|
|
+ focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "#29ACFC",
|
|
|
+ borderWidth: 2,
|
|
|
+ shadowColor: "#29ACFC",
|
|
|
+ color: "#29ACFC",
|
|
|
+ curveness: 0.08,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 0.9,
|
|
|
+ width: 2,
|
|
|
+ curveness: 0.15,
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#FFF", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#FFF", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "李富贵",
|
|
|
+ tooltip: {
|
|
|
+ formatter:
|
|
|
+ "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FCBB5B",
|
|
|
+ borderColor: "#FCBB5B",
|
|
|
+ shadowColor: "#FCBB5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter:
|
|
|
+ "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "王桂花",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter:
|
|
|
+ "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "李思思",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "自住房屋",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "车子",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "租房",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "黄涛",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于海",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "张柏",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "付梦杰",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ links: [
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 1,
|
|
|
+ value: "夫妻",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 2,
|
|
|
+ value: "父亲",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 2,
|
|
|
+ target: 0,
|
|
|
+ value: "女儿",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 3,
|
|
|
+ value: "自住",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 4,
|
|
|
+ value: "车主",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 5,
|
|
|
+ value: "租户",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 6,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 7,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 8,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 9,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+ initNew() {
|
|
|
+ let data = [
|
|
|
+ {
|
|
|
+ name: "李富贵",
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{b} <br/>性别：男<br/>职务：富阳区灵桥镇灵桥村务农",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FCBB5B",
|
|
|
+ borderColor: "#FCBB5B",
|
|
|
+ shadowColor: "#FCBB5B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter:
|
|
|
+ "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "王桂花",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ formatter:
|
|
|
+ "{b} <br/>性别：男<br/>出生年月：19951114<br/>星座：处女座",
|
|
|
+ },
|
|
|
+ name: "李思思",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "自住房屋",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "车子",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "租房",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "黄涛",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于海",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "张柏",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "付梦杰",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ let links = [
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 1,
|
|
|
+ value: "夫妻",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 2,
|
|
|
+ value: "父亲",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 2,
|
|
|
+ target: 0,
|
|
|
+ value: "女儿",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 3,
|
|
|
+ value: "自住",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 4,
|
|
|
+ value: "车主",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 0,
|
|
|
+ target: 5,
|
|
|
+ value: "租户",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 6,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 7,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 8,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ source: 5,
|
|
|
+ target: 9,
|
|
|
+ value: "租赁",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let categories = [];
|
|
|
+ let categoryStatus = {};
|
|
|
+
|
|
|
+ data.forEach((item) => {
|
|
|
+ let aaa = item.name + "_childrens";
|
|
|
+ categories.push(aaa);
|
|
|
+ Object.assign(categoryStatus, { aaa: true });
|
|
|
+ });
|
|
|
+ this.myChart = echarts.init(this.$refs.first_pie);
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "关系图点击节点展开次级节点效果尝试",
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ y: "8%",
|
|
|
+ data: categories,
|
|
|
+ },
|
|
|
+ animationDuration: 1500,
|
|
|
+ animationEasingUpdate: "quinticInOut",
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "ECharts学习",
|
|
|
+ type: "graph",
|
|
|
+ layout: "none",
|
|
|
+ data: data,
|
|
|
+ links: links,
|
|
|
+ categories: categories.map(function (a) {
|
|
|
+ return {
|
|
|
+ name: a,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ roam: true,
|
|
|
+ focusNodeAdjacency: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "#fff",
|
|
|
+ borderWidth: 1,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.3)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ position: "right",
|
|
|
+ formatter: "{b}",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "source",
|
|
|
+ curveness: 0.3,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ this.myChart.on("click", function (params) {
|
|
|
+ let categoryName = params.name + "_childrens";
|
|
|
+
|
|
|
+ // 如果 category 状态为显示，则通过一定规则隐藏所有 childres
|
|
|
+ if (categoryStatus[categoryName]) {
|
|
|
+ // 这里为了省事，直接通过字符串匹配判断了
|
|
|
+ for (let i in categories) {
|
|
|
+ if (
|
|
|
+ categories[i].includes(params.name) &&
|
|
|
+ categories[i] != "node0"
|
|
|
+ ) {
|
|
|
+ this.myChart.dispatchAction({
|
|
|
+ type: "legendUnSelect",
|
|
|
+ // 图例名称
|
|
|
+ name: categories[i],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ categoryStatus[categoryName] = false;
|
|
|
+
|
|
|
+ // 如 category 状态为隐藏，则显示
|
|
|
+ } else {
|
|
|
+ for (let i in categories) {
|
|
|
+ if (
|
|
|
+ (categories[i].includes(params.name) &&
|
|
|
+ categoryStatus[categories[i]]) ||
|
|
|
+ categories[i] === categoryName
|
|
|
+ ) {
|
|
|
+ this.myChart.dispatchAction({
|
|
|
+ type: "legendSelect",
|
|
|
+ // 图例名称
|
|
|
+ name: categories[i],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ categoryStatus[categoryName] = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initTwo(data, links) {
|
|
|
+ this.myChart = echarts.init(this.$refs.first_pie);
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "#1a4377",
|
|
|
+ tooltip: {},
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "graph",
|
|
|
+ layout: "force",
|
|
|
+ force: {
|
|
|
+ repulsion: 1500,
|
|
|
+ edgeLength: 120,
|
|
|
+ layoutAnimation: true,
|
|
|
+ },
|
|
|
+ symbolSize: 70,
|
|
|
+ nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
|
|
|
+ roam: true, //缩放
|
|
|
+ draggable: true, //节点是否可以拖拽
|
|
|
+ edgeSymbol: ["none", "arrow"], //线2头标记
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "inside",
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ edgeLabel: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ formatter: "{c}",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolKeepAspect: false,
|
|
|
+ focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "#29ACFC",
|
|
|
+ borderWidth: 2,
|
|
|
+ shadowColor: "#29ACFC",
|
|
|
+ color: "#29ACFC",
|
|
|
+ curveness: 0.08,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 0.9,
|
|
|
+ width: 2,
|
|
|
+ curveness: 0.15,
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#FFF", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#FFF", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data: data,
|
|
|
+ links: links,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // this.myChart.on("click", function (params) {
|
|
|
+ // console.log(params,'paramsparams');
|
|
|
+ // })
|
|
|
+ let _this = this;
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ this.myChart.on("click", function (params) {
|
|
|
+ console.log(params, "paramsparams");
|
|
|
+ if (params.name == "租房") {
|
|
|
+ var option1 = _this.myChart.getOption();
|
|
|
+
|
|
|
+ option1.series[0].data = data2;
|
|
|
+ option1.series[0].links = links2;
|
|
|
+
|
|
|
+ _this.myChart.setOption(option1);
|
|
|
+ } else if (params.name == "李富贵") {
|
|
|
+ var option1 = _this.myChart.getOption();
|
|
|
+
|
|
|
+ option1.series[0].data = data;
|
|
|
+ option1.series[0].links = links;
|
|
|
+
|
|
|
+ _this.myChart.setOption(option1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 图表点击事件监听
|
|
|
+ // this.myChart.on("click", function (params) {
|
|
|
+ // // 刷新数据的逻辑，例如从服务器获取新数据
|
|
|
+ // fetchNewData()
|
|
|
+ // .then(function (newData) {
|
|
|
+ // let that = this
|
|
|
+ // // 更新图表的数据
|
|
|
+ // that.myChart.setOption({
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // // 假设您要更新的是 series 下的某个数据系列
|
|
|
+ // data: newData[0], // 使用新数据更新 series.data
|
|
|
+ // links: newData[1],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // .catch(function (error) {
|
|
|
+ // console.error("Error fetching new data:", error);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // 这里可以添加其他需要在点击后执行的代码
|
|
|
+ // });
|
|
|
+ // 模拟的数据获取函数，实际应用中应该从服务器获取
|
|
|
+ function fetchNewData() {
|
|
|
+ // 返回一个新数据的 Promise
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // 模拟获取到的新数据
|
|
|
+ const newData = [
|
|
|
+ /* 新数据数组 */
|
|
|
+ data2,
|
|
|
+ links2,
|
|
|
+ ];
|
|
|
+ resolve(newData);
|
|
|
+ }, 1000); // 延迟 1 秒来模拟异步数据加载
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ test() {
|
|
|
+ this.initTwo(data2, links2);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+
|
|
|
+ beforeDestroy() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.echars {
|
|
|
+ width: 75vw;
|
|
|
+ height: 80vh;
|
|
|
+ background: rgba(255, 217, 0, 0.349);
|
|
|
+ position: relative;
|
|
|
+ top: 5vh;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+#first_pie {
|
|
|
+ width: 75vw;
|
|
|
+ height: 80vh;
|
|
|
+ background-color: pink;
|
|
|
+}
|
|
|
+</style>
|
