| | |
| | | </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 |
| | | } from "@/api/index.js"; |
| | |
| | | // 标题顶部栏需要的东西 |
| | | keyword: "", |
| | | idIndex: 0, |
| | | activeId: "", |
| | | activeId: 28, |
| | | conditionId: "", |
| | | searchType: "KEYWORD", |
| | | searchType: "DYNASTY", |
| | | dynasty: [], |
| | | nodeData: [], |
| | | showTool: false, |
| | | toolTop: 0, |
| | | toolLeft: 0, |
| | | toolInfo: {} |
| | | toolInfo: {}, |
| | | totalCount: 0, |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | }, |
| | | mounted() { |
| | | this.getStatistics(); |
| | | this.getData(); |
| | | }, |
| | | methods: { |
| | | 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 == "宋"); |
| | | |
| | | inheritMedicalList({ |
| | | keywords: this.keyword, |
| | | dynastyId: this.activeId, |
| | | searchType: this.searchType, |
| | | path: this.conditionId |
| | | }).then((res) => { |
| | | console.log(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, |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3" |
| | | } |
| | | }); |
| | | } |
| | | this.nodeData.push({ |
| | | ...node, |
| | | id: node.identifier, |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | 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(); |
| | | }); |
| | |
| | | //通过 $ref 进行挂载 |
| | | let myChart = echarts.init(this.$refs.barChart); |
| | | |
| | | let FontSize = 12; // 字体大小 |
| | | let FontSize = 18; // 字体大小 |
| | | let BorderWidth = 2; // 边框大小 |
| | | let SymbolSize = 80; // 尺寸距离 |
| | | let Distance = 10; |
| | | // 不同尺寸下修改echarts的字体 |
| | | if (window.innerWidth > 2560 && window.innerWidth <= 3840) { |
| | | FontSize = 28; |
| | | FontSize = 20; |
| | | BorderWidth = 5; |
| | | SymbolSize = 100; |
| | | Distance = 33; |
| | | } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { |
| | | FontSize = 28; |
| | | FontSize = 20; |
| | | BorderWidth = 4; |
| | | SymbolSize = 90; |
| | | Distance = 22; |
| | |
| | | { |
| | | type: "graph", |
| | | layout: "force", |
| | | symbolSize: 120, |
| | | symbolSize: 100, |
| | | //是否允许用户拖动图片 |
| | | roam: true, |
| | | label: { |
| | |
| | | }; |
| | | //进行渲染 |
| | | myChart.setOption(option); |
| | | myChart.getZr().on("click", (params) => { |
| | | if (!params.target) { |
| | | this.showTool = false; |
| | | } |
| | | }); |
| | | myChart.on("click", (params) => { |
| | | console.log(params.event.offsetX, params.event.offsetY); |
| | | if (params.componentType === "series") { |
| | |
| | | id: params.data.identifier, |
| | | name: encodeURIComponent(params.data.name) |
| | | }; |
| | | } else { |
| | | this.showTool = false; |
| | | } |
| | | }); |
| | | }, |
| | |
| | | box-shadow: 1px 1px 5px #888888; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 1rem; |
| | | height: 0.25rem; |
| | | width: 1.4rem; |
| | | height: 0.3rem; |
| | | margin-left: 0.2rem; |
| | | border-radius: 0.13rem; |
| | | float: left; |
| | |
| | | box-shadow: 1px 1px 5px #888888; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 1.3rem; |
| | | height: 0.25rem; |
| | | width: 1.6rem; |
| | | height: 0.3rem; |
| | | float: left; |
| | | margin-left: 0.2rem; |
| | | border-radius: 0.13rem; |
| | |
| | | } |
| | | .filterText { |
| | | margin-left: 10px; |
| | | font-size: 16px; |
| | | font-size: 0.16rem; |
| | | } |
| | | .fontColor { |
| | | color: #827e44 !important; |