12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <template>
- <div id='box2' style='width:100%;height:100%;'></div>
- </template>
- <script>
- import echarts from 'echarts'
- export default {
- 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>
|