1 initbarChart(data) {
2 if (!this.barChart) {
3 this.barChart = this.$echarts.init(document.getElementById(this.id))
4 }
5 // let xData = val.divisionName
6 // let yData = val.value0
7 const xData = data.map((item) => item.name)
8 const yData = data.map((item) => item.value)
9 // 修改柱子宽度之后需要根据实际情况微调一下下面的symbolOffset
10 const barWidth = 30
11 this.barChart.setOption({
12 backgroundColor: '#fff',
13 grid: {
14 top: '8%',
15 left: '2%',
16 bottom: '6%',
17 right: '6%',
18 containLabel: true
19 },
20 tooltip: {
21 // trigger: 'axis',
22 show: true,
23 backgroundColor: '#fff',
24 borderColor: '#fff',
25 textStyle: {
26 color: '#606266'
27 },
28 // showContent: true,
29 formatter: '{b}：{c}个'
30
31 // formatter: (params) => {
32 // console.log(params, 'params')
33 // },
34 },
35 toolbox: {
36 show: false,
37 orient: 'vertical',
38 left: 'right',
39 top: '0%',
40 feature: {
41 saveAsImage: { show: true } // 保存图表
42 }
43 },
44 animation: false,
45 xAxis: [
46 {
47 name: '',
48 nameGap: 10,
49 nameTextStyle: {
50 color: 'rgba(192, 210, 230, 1)',
51 fontSize: 12,
52 fontWeight: 'bold',
53 padding: [0, 0, 0, 0]
54 },
55 show: true,
56 type: 'value',
57 // type: 'log', //第1步，换成log；
58 // logBase: 3,
59 // min: 1,
60 axisLabel: {
61 textStyle: {
62 color: 'rgba(48, 49, 51, 1)'
63 }
64 // formatter: function (value) {
65 // return value === 1 ? 0 : value //第2步，将y轴最小值1变成从0开始；
66 // },
67 },
68 axisTick: {
69 show: false
70 },
71 axisLine: {
72 show: false
73 },
74 splitLine: {
75 show: true,
76 lineStyle: {
77 color: 'rgba(223, 227, 232, 1)',
78 type: 'dashed'
79 }
80 }
81 }
82 ],
83 yAxis: [
84 {
85 type: 'category',
86 data: xData,
87 cursor: 'pointer',
88 axisTick: {
89 show: false,
90 alignWithLabel: true
91 },
92 nameTextStyle: {
93 color: '#82b0ec'
94 },
95 axisLine: {
96 show: false,
97 lineStyle: {
98 color: '#82b0ec'
99 }
100 },
101 labels: {
102 style: {
103 cursor: 'pointer'
104 }
105 },
106 axisLabel: {
107 textStyle: {
108 color: 'rgba(48, 49, 51, 1)',
109 lineHeight: 18
110
111 },
112 formatter: function(value, index) {
113 // let text=
115 return `${value.slice(0, 6)}\n${value.slice(6, -1)}查`
116 },
117 // rotate: 30,
118 margin: 15
119 }
120 }
121 ],
122 series: [
// 难点
123 {
124 name: '',
125 type: 'pictorialBar',
126
127 yAxisIndex: 0,
128 symbolSize: function(d) {
129 return d > 0 ? [8, barWidth] : [0, 0]
130 },
131 symbolOffset: [4, 0], // 上部椭圆
132 symbolPosition: 'end',
133 z: 12,
134 label: {
135 // 顶部文字
136 normal: {
137 show: false,
138 position: 'top',
139 // "formatter": "{c}%"
140 fontSize: 14,
141 // fontWeight: "bold",
142 color: '#52E568'
143 }
144 },
145 color: '#ffa041',
146 data: yData
147 },
148 {
149 name: '',
150 type: 'pictorialBar',
151 symbolSize: function(d) {
152 return d > 0 ? [10, barWidth] : [0, 0]
153 },
154 symbolOffset: [-4, 0], // 下部椭圆
155 // "barWidth": "20",
156 z: 12,
157 color: '#f57b22',
158 data: yData
159 },
160 {
161 type: 'bar',
162 // silent: true,
163 barWidth: barWidth,
164 Offset: [2, 0],
165 itemStyle: {
166 normal: {
167 color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
168 {
169 offset: 0,
170 color: '#ff740a'
171 },
172 {
173 offset: 1,
174 color: '#fe9c3e'
175 }
176 ]),
177 opacity: 0.8
178 }
179 },
180 data: yData
181 }
182 ]
183 }, true)
184 const that = this
185 this.barChart.off('click')
186 this.barChart.on('click', async function(param) {
187 if (that.xData.includes(param.name)) {
188 let getNames
189 let getDatas
190 data.forEach(item => {
191 if (param.name === item.name) {
192 that.currentItem = item
193 getDatas = item.children.map(item1 => item1.name)
194 getNames = item.children.map(item2 => item2.name)
195 }
196 }
197 )
198 that.barChart.setOption({}, true)
199 setTimeout(() => {
200 that.initbarChart(that.currentItem.children)
201 that.$emit('showBackButton')
202 }, 100)
203 /* that.barChart.setOption({
204 yAxis: [
205 {
206 data: getDatas
207 }
208 ],
209 series: [
210 {
211 data: getNames
212 }
213 ]
214 }) */
215 }
216 })
217 this.barChart.resize()
218 },
