在项目vue中使用echarts的操作步骤

1.在组件中创建该模块

1. <template>
2. <div id = "testChart"></div>
3. </template>

2.导入echarts

前提是：已经在项目中配置过echarts

在<script></script>中导入echarts

1. <script>
2. import {echartInit} from "../../../utils/echartUtils"
3. </script>

3.初始化该模块

1. export default {
2. name: 'Test', //vue该组件名称Test.vue
3. mounted() {
4. this.testChart = echartInit('testChart'); //初始化该echarts表
5. /*this.testChart.setOption(this.option); */ // 如果是写死的数据，可以在这儿setOption()看效果
6. },
7. }

4.将data中的option数据返回

在返回的数据（请求的数据）成功后加入setOption();

如果是写死的数据，可以在mounted中直接加入setOption()看结果；

如下为动态数据获取

1. export default{
2. data() {
3. return {
4. option: {
5. "grid": {
6. "height": "67%",
7. "right": "10%",
8. "top": "8%",
9. "width": "83%"
10. },
11. "legend": {
12. "data": ['新增','完成','未完成'],
13. bottom: '5%'
14. },
15. "series": [
16. {
17. name: '新增',
18. type: 'line',
19. /*areaStyle: {},*/
20. smooth: false,
21. data: []
22. },
23. {
24. name: '完成',
25. type: 'line',
26. /*areaStyle: {},*/ //折线下显示填充色
27. smooth: false,
28. data: [] //可以写固定的数据
29. },
30. {
31. name: '未完成',
32. type: 'line',
33. smooth: false, // 折线，false不平滑的折线,true平滑的曲线
34. data: [] //可以写固定的数据
35. },
36. ],
37. "toolbox": {
38. "emphasis": {
39. "iconStyle": {
40. "textAlign": "right",
41. "textPosition": "left"
42. }
43. },
44.  
45. "orient": "vertical",
46. "right": "2%",
47. "show": true,
48. "textStyle": {
49. "align": "left"
50. }
51. },
52. "tooltip": {
53. "axisPointer": {
54. "type": "shadow"
55. },
56. "trigger": "axis"
57. },
58. "xAxis": {
59. "axisLine": {
60. "lineStyle": {
61. "color": "rgb(0, 138, 205)"
62. }
63. },
64. "boundaryGap": true,
65. "data": [], //可以写固定的数据
66. "splitLine": {
67. "show": false
68. },
69. "splitNumber": 1,
70. "type": "category"
71. },
72. "yAxis": {
73. "min": 0,
74. "splitNumber": 8,
75. "type": "value"
76. }
77. },
78. testChart: {}
79. }
80. },
81. }

5.通过getData()向后台获取数据并返回，将获取的数据返回setOption()

this.testChart.setOption(this.option);

补充知识：vue+echarts踩过的坑

vue+echarts踩过的坑

文字显示居中：可以修改label的padding（只限修改个别地区）设置padding

地图只显示某一部分地区四个省份

用到了geo中regions（用了一整张中国地图，放大这四个地区某个中心点）

1. geo: {
2. map: “china”,
3. mapLocation: {
4. x: ‘center'
5. },
6. center: [“115.892151”, “28.676493”],
7. zoom:4.8,
8. label: {
9. normal:{
10. show:false
11. },
12. emphasis: {
13. show: false
14. }
15. },
16. roam: false,
17. itemStyle: {
18. normal: {
19. areaColor: “#fff”, //地图默认的背景颜色
20. borderColor: “#fff”,//地图默认的边线颜色,
21. opacity:0
22. },
23. emphasis: {
24. areaColor: “#fff”,//地图触发地区的背景颜色
25. }
26. },
27. regions: [
28. {
29. name: “浙江”,
30. label: {
31. normal:{
32. show:true,
33. fontSize:16,
34. color:'#fff',
35. padding:[100,4,4,4]
36. },
37. emphasis: {
38. show: true
39. },
40. // label:{
41. // formatter:'{b}',
42. // }
43. },
44. itemStyle: {
45. normal: {
46. areaColor: “#1FB2A8”,
47. borderWidth:4,
48. borderColor:'#fff',
49. opacity:1
50. },
51. emphasis: {
52. areaColor: “orange”, //地图触发地区的背景颜色
53. borderWidth:4,
54. borderColor:'#fff',
55. }
56. }
57. },
58. {
59. name: “江西”,
60. label: {
61. normal:{
62. show:true,
63. fontSize:16,
64. color:'#fff',
65. padding:[100,20,4,4]
66. },
67. emphasis: {
68. show: false
69. }
70. },
71. itemStyle: {
72. normal: {
73. areaColor: “#1FB2A8”,
74. borderWidth:4,
75. borderColor:'#fff',
76. opacity:1
77. },
78. emphasis: {
79. areaColor: “orange”, //地图触发地区的背景颜色
80. borderWidth:4,
81. borderColor:'#fff'
82. }
83. }
84. },
85. {
86. name: “福建”,
87. label: {
88. normal:{
89. show:true,
90. fontSize:16,
91. color:'#fff',
92. padding:[0,70,0,0]
93. },
94. emphasis: {
95. show: false
96. }
97. },
98. itemStyle: {
99. normal: {
100. areaColor: “#1FB2A8”,
101. borderWidth:4,
102. borderColor:'#fff',
103. opacity:1
104. },
105. emphasis: {
106. areaColor: “orange”, //地图触发地区的背景颜色
107. borderWidth:4,
108. borderColor:'#fff'
109. }
110. }
111. },
112. {
113. name: “上海”,
114. label: {
115. normal:{
116. show:true,
117. fontSize:10,
118. color:'#fff',
119. padding:[15,0,0,0]
120. },
121. emphasis: {
122. show: false
123. }
124. },
125. itemStyle: {
126. normal: {
127. areaColor: “#1FB2A8”,
128. borderWidth:4,
129. borderColor:'#fff',
130. opacity:1
131. },
132. emphasis: {
133. areaColor: “orange” ,//地图触发地区的背景颜色
134. borderWidth:4,
135. borderColor:'#fff'
136. }
137. }
138. }
139. ]
140. },
141. series: [
142. {
143. type: ‘map',
144. coordinateSystem: ‘geo',
145. },
146. {
147. type: ‘map',
148. geoIndex: 0,
149. data:datass
150. }
151. ],
152. 显示问题
153. formatter: function (params) {
154. // console.log(params)
155. var res='';
156. var name='';
157. for (var i = 0; i < datass.length; i++) {
158. if (datass[i].name == params.name) {
159. name=<p class="big">+datass[i].name+</p>
160. if(datass[i].value==''){
161. res=''
162. }else{
163. datass[i].value.forEach(element => {
164. res+=<p class="small">+element+</p>
165. });
166. }
167. }
168. }
169. return name+res
170. },
171. y轴显示百分号
172. axisLabel: {
173. formatter: ‘{value}%'
174. }

以上这篇在项目vue中使用echarts的操作步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

原文链接：https://www.cnblogs.com/lynn20/p/11673805.html