| | |
| | | }, |
| | | getChartRight(chartName, data) { |
| | | let chartDom = this.$refs[chartName]; |
| | | // let myRightChart = echarts.init(chartDom); |
| | | if ( |
| | | myRightChart != null && |
| | | myRightChart != "" && |
| | |
| | | } |
| | | myRightChart = echarts.init(chartDom); |
| | | let img = "/cockpitPage/dotted-circle.png"; |
| | | let height = myRightChart.getHeight() / 1; |
| | | let width = height + 5; |
| | | let option; |
| | | if (data) { |
| | | option = { |
| | |
| | | elements: [ |
| | | { |
| | | type: "image", |
| | | z: 3, |
| | | // z: 3, |
| | | style: { |
| | | image: img, |
| | | width: 240, |
| | | height: 240, |
| | | width: width, |
| | | height: height, |
| | | }, |
| | | left: "center", |
| | | top: "center", |
| | |
| | | borderRadius: 4, |
| | | formatter: function (params) { |
| | | let label = |
| | | params.name.length > 5 |
| | | ? `${params.name.slice(0, 4)}...` |
| | | params.name.length > 4 |
| | | ? `${params.name.slice(0, 3)}...` |
| | | : params.name; |
| | | return `{a|${label}} {b|${params.value + "%"}}`; |
| | | }, |
| | |
| | | |
| | | .chart-left { |
| | | width: calc(60% - 20px); |
| | | height: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-right: 20px; |
| | | float: left; |
| | | border: 1px solid #00ffff; |
| | |
| | | .chart-right { |
| | | width: 40%; |
| | | float: left; |
| | | height: 100%; |
| | | height: calc(100% - 20px); |
| | | position: relative; |
| | | .chart-bg { |
| | | width: 100%; |