|
@@ -1,72 +1,79 @@
|
|
|
<template>
|
|
|
- <div id="box2" style="width:100%;height:100%;"></div>
|
|
|
+ <div id='box2' style='width:100%;height:100%;'></div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import echarts from "echarts";
|
|
|
+import echarts from 'echarts'
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- props: ["chillerExecuteRate"],
|
|
|
- mounted() {
|
|
|
- this.$nextTick(function() {
|
|
|
- this.pie(this.chillerExecuteRate, "#box2", ["#FFBA6B", "#FEE9D2"]);
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- pie(pieData, box, colors) {
|
|
|
- const that = this;
|
|
|
- const myChart = echarts.init(document.querySelector(box));
|
|
|
- const data = pieData;
|
|
|
- const option = {
|
|
|
- grid: {
|
|
|
- top: 5,
|
|
|
- bottom: 5
|
|
|
- },
|
|
|
- color: colors,
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "valueOfMarket",
|
|
|
- type: "pie",
|
|
|
- center: ["50%", "50%"],
|
|
|
- radius: ["60%", "70%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- hoverAnimation: false,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- position: "center",
|
|
|
- color: "#000000",
|
|
|
- fontSize: 20,
|
|
|
- lineHeight: 0,
|
|
|
- formatter: "{b}\n{c}%"
|
|
|
- }
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: data,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 100 - data,
|
|
|
- name: "",
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ props: ['chillerExecuteRate'],
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.pie(this.chillerExecuteRate, '#box2', ['#FFBA6B', '#FEE9D2'])
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ chillerExecuteRate(val, old) {
|
|
|
+ if (val) {
|
|
|
+ this.pie(val, '#box2', ['#FFBA6B', '#FEE9D2'])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pie(pieData, box, colors) {
|
|
|
+ const that = this
|
|
|
+ const myChart = echarts.init(document.querySelector(box))
|
|
|
+ const data = pieData
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ top: 5,
|
|
|
+ bottom: 5
|
|
|
+ },
|
|
|
+ color: colors,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'valueOfMarket',
|
|
|
+ type: 'pie',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: ['60%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverAnimation: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'center',
|
|
|
+ color: '#000000',
|
|
|
+ fontSize: 20,
|
|
|
+ lineHeight: 0,
|
|
|
+ formatter: '{b}\n{c}%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 100 - data,
|
|
|
+ name: '',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|