| | |
| | | </div> |
| | | </div> |
| | | <div style="padding-left: 0.5rem; margin-top: 20px"> |
| | | 共 {{ this.nodeData.length }}个世医 |
| | | 共 {{ totalCount }}个世医 |
| | | </div> |
| | | </div> |
| | | <div class="contentBox"> |
| | |
| | | <script> |
| | | import * as echarts from "echarts"; |
| | | import { |
| | | getNodeCount, |
| | | inheritMedicalSataStatistics, |
| | | inheritMedicalList, |
| | | inheritMedicalList |
| | | } from "@/api/index.js"; |
| | | export default { |
| | | data() { |
| | |
| | | toolTop: 0, |
| | | toolLeft: 0, |
| | | toolInfo: {}, |
| | | totalCount: 0, |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | getStatistics() { |
| | | inheritMedicalSataStatistics().then((res) => { |
| | | this.dynasty = res.object; |
| | | this.activeId = this.dynasty[0].dynastyId |
| | | this.getData(); |
| | | }); |
| | | }, |
| | | getData() { |
| | | this.nodeData = []; |
| | | // const defaultDynasty = this.dynasty.find(f.dynasty == "宋"); |
| | | // this.activeId = defaultDynasty.dynastyId |
| | | |
| | | inheritMedicalList({ |
| | | keywords: this.keyword, |
| | | dynastyId: this.activeId, |
| | | searchType: this.searchType, |
| | | path: this.conditionId, |
| | | path: this.conditionId |
| | | }).then((res) => { |
| | | for (let i = 0; i < res.object.nodeList.length; i++) { |
| | | const node = res.object.nodeList[i]; |
| | | if ( |
| | | this.nodeData.findIndex((citem) => citem.name == node.name) == -1 |
| | | ) { |
| | | this.nodeData.push({ |
| | | ...node, |
| | | id: node.identifier, |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | console.log(this.nodeData); |
| | | getNodeCount({ |
| | | keywords: this.keyword, |
| | | dynastyId: this.activeId, |
| | | searchType: this.searchType, |
| | | path: this.conditionId |
| | | }).then((res) => { |
| | | this.totalCount = res.object.totalCount |
| | | }); |
| | | // 初始化 echarts |
| | | this.initBarChart(); |
| | | }); |
| | |
| | | |
| | | let option = { |
| | | title: { |
| | | text: [""], |
| | | text: [""] |
| | | }, |
| | | backgroundColor: { |
| | | type: "image", |
| | | image: "/static/image/WMBg.png", |
| | | repeat: "repeat-x", // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat' |
| | | size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: "center center", // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | }, |
| | | tooltip: {}, |
| | | animationDurationUpdate: 1500, |
| | |
| | | label: { |
| | | show: true, |
| | | color: "black", // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize, // 设置文字大小 |
| | | fontSize: FontSize // 设置文字大小 |
| | | }, |
| | | edgeSymbol: ["circle", "arrow"], |
| | | edgeSymbolSize: [4, 10], |
| | |
| | | // params.data 是边的数据对象,你可以在这里定义关系名 |
| | | // 例如,你可以根据 source 和 target 的名称来定义关系名 |
| | | return params.data.relationName; // 如果定义了 relationName 则显示它,否则显示“父子” |
| | | }, |
| | | } |
| | | }, |
| | | //各个节点 |
| | | data: this.nodeData, |
| | |
| | | color: "#000000", |
| | | opacity: 0.9, |
| | | width: 2, |
| | | curveness: 0, |
| | | curveness: 0 |
| | | }, |
| | | force: { |
| | | // initLayout: 'circular', |
| | | // gravity: 0 |
| | | friction: 0.1, |
| | | repulsion: 500, |
| | | edgeLength: 6, |
| | | }, |
| | | }, |
| | | ], |
| | | edgeLength: 6 |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | //进行渲染 |
| | | myChart.setOption(option); |
| | |
| | | this.toolLeft = params.event.offsetX + "px"; |
| | | this.toolInfo = { |
| | | id: params.data.identifier, |
| | | name: encodeURIComponent(params.data.name), |
| | | name: encodeURIComponent(params.data.name) |
| | | }; |
| | | } else { |
| | | this.showTool = false; |
| | |
| | | switch (type) { |
| | | case 1: |
| | | uni.navigateTo({ |
| | | url: "/pages/character/detail?id=" + this.toolInfo.id, |
| | | url: "/pages/character/detail?id=" + this.toolInfo.id |
| | | }); |
| | | break; |
| | | case 2: |
| | |
| | | "&id=" + |
| | | this.toolInfo.id + |
| | | "&name=" + |
| | | this.toolInfo.name, |
| | | this.toolInfo.name |
| | | }); |
| | | break; |
| | | case 3: |
| | |
| | | "&id=" + |
| | | this.toolInfo.id + |
| | | "&name=" + |
| | | this.toolInfo.name, |
| | | this.toolInfo.name |
| | | }); |
| | | break; |
| | | } |
| | |
| | | this.keyword = ""; |
| | | } |
| | | this.getData(); |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped> |