1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <template>
| <div :class="className" :style="{height:height,width:width}" />
| </template>
|
| <script>
| import echarts from 'echarts'
| require('echarts/theme/macarons') // echarts theme
| import resize from '../../dashboard/mixins/resize'
|
| export default {
| mixins: [resize],
| props: {
| className: {
| type: String,
| default: 'chart'
| },
| width: {
| type: String,
| default: '100%'
| },
| height: {
| type: String,
| default: '350px'
| },
| chartData: {
| type:Object,
| //required: true
| }
| },
| watch: {
| chartData: {
| deep: true,
| handler(val) {
| this.setOptions(val)
| }
| }
| },
| data() {
| return {
| chart: null
| }
| },
| mounted() {
| this.$nextTick(() => {
| this.initChart()
| })
| },
| beforeDestroy() {
| if (!this.chart) {
| return
| }
| this.chart.dispose()
| this.chart = null
| },
| methods: {
| initChart() {
| this.chart = echarts.init(this.$el, 'macarons')
| this.setOptions(this.chartData)
| },
| setOptions({actualData,expectedData,title} = {}) {
| this.chart.setOption({
| title: {
| text: '能源平衡分析',
| x:'left',
| y: 'top',
| textStyle: {
| color: "#333"
| },
| },
| tooltip: {
| trigger: 'item',
| formatter: actualData
| },
| grid: {
| top: 40,
| left: '2%',
| right: '2%',
| bottom: '3%',
| containLabel: true
| },
| legend: {
| // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
| orient: 'vertical',
| // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
| x: 'left',
| // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
| y: '10%',
| //left: 10,
| itemWidth: 24, // 设置图例图形的宽
| itemHeight: 18, // 设置图例图形的高
| textStyle: {
| color: '#666' // 图例文字颜色
| },
| // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
| // itemGap: 30,
| backgroundColor: '#eee', // 设置整个图例区域背景颜色
| data: actualData,
| },
| series: [{
| //name: '能源',
| type: 'pie',
| radius: ['50%', '80%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
| center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
| data: expectedData,
| // itemStyle 设置饼状图扇形区域样式
| itemStyle: {
| // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
| // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
| emphasis: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgba(30, 144, 255，0.5)'
| }
| },
| // 设置值域的那指向线
| labelLine: {
| normal: {
| show: false // show设置线是否显示，默认为true，可选值：true ¦ false
| }
| },
| avoidLabelOverlap: false,
|
| // 设置值域的标签
| label: {
| normal: {
| position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
| // formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
| // {a}指series.name {b}指series.data的name
| // {c}指series.data的value {d}%指这一部分占总数的百分比
| formatter: '{b} : ({d}%)'
| }
| }
| }
| ],
| })
| }
| }
| }
| </script>
|
|
