BarTwoWayChart.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <div :id="id" :class="className" :style="{ height:height,width:width }" />
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. import resize from './mixins/resize'
  7. export default {
  8. mixins: [resize],
  9. props: {
  10. className: {
  11. type: String,
  12. default: "chart"
  13. },
  14. id: {
  15. type: String,
  16. default: "chart"
  17. },
  18. width: {
  19. type: String,
  20. default: "100%"
  21. },
  22. height: {
  23. type: String,
  24. default: "400px"
  25. },
  26. data: {
  27. type: Object,
  28. default: {}
  29. },
  30. },
  31. data() {
  32. return {
  33. chart: null
  34. };
  35. },
  36. watch: {
  37. data: {
  38. handler(newVal, oldVal) {
  39. if (newVal) {
  40. this.initChart();
  41. }
  42. },
  43. deep: true //对象内部属性的监听,关键。
  44. }
  45. },
  46. mounted() {
  47. this.$nextTick(() => {
  48. this.initChart();
  49. })
  50. },
  51. beforeDestroy() {
  52. if (!this.chart) {
  53. return;
  54. }
  55. this.chart.dispose();
  56. this.chart = null;
  57. },
  58. methods: {
  59. initChart() {
  60. let that = this;
  61. this.chart = echarts.init(document.getElementById(this.id));
  62. let option = {
  63. tooltip: {
  64. show: true,
  65. trigger: 'axis',
  66. axisPointer: {
  67. type: 'shadow'
  68. }
  69. },
  70. legend: {
  71. left: '17%',
  72. top: 10,
  73. data: that.data.legendData
  74. },
  75. grid: [{
  76. left: '17%',
  77. show: true,
  78. containLabel: false,
  79. bottom:'45%',
  80. top:'20%',
  81. backgroundColor:'#FCF0D3',
  82. borderColor:'#F5EEF1',
  83. }, {
  84. left: '17%',
  85. show: true,
  86. containLabel: false,
  87. bottom:"10%",
  88. top:'55%',
  89. backgroundColor:'#DDF7FE',
  90. borderColor:'#F5EEF1',
  91. }, {
  92. left: '17%',
  93. height: 0,
  94. bottom:'10',
  95. top:'90%',
  96. }],
  97. xAxis: [{
  98. type: 'category',
  99. // inverse: true,
  100. axisLine: {
  101. show: false
  102. },
  103. axisTick: {
  104. show: false
  105. },
  106. axisLabel: {
  107. show: false,
  108. },
  109. splitLine: {
  110. show: false,
  111. },
  112. data: that.data.xAxisData
  113. }, {
  114. gridIndex: 1,
  115. type: 'category',
  116. axisLine: {
  117. show: false
  118. },
  119. axisTick: {
  120. show: false
  121. },
  122. axisLabel: {
  123. show: false,
  124. },
  125. splitLine: {
  126. show: false,
  127. },
  128. data: that.data.xAxisData
  129. },
  130. {
  131. gridIndex: 2,
  132. show: true,
  133. axisTick: {
  134. show: false
  135. },
  136. axisLine: {
  137. show: false
  138. },
  139. data: that.data.xAxisData
  140. }
  141. ],
  142. yAxis: [{
  143. // position: 'right',
  144. axisLabel: {
  145. color: '#333333',
  146. // fontSize: '12'
  147. },
  148. axisLine: {
  149. show: true,
  150. lineStyle:{
  151. color:'#F5EEF1',
  152. },
  153. },
  154. splitLine: {
  155. lineStyle:{
  156. color:'#F5EEF1',
  157. },
  158. },
  159. type: 'value',
  160. inverse: false,
  161. axisTick: {
  162. show: false
  163. },
  164. },
  165. {
  166. gridIndex: 1,
  167. // position: 'left',
  168. axisLabel: {
  169. color: '#333333',
  170. // fontSize: '12'
  171. },
  172. axisLine: {
  173. show: true,
  174. lineStyle:{
  175. color:'#F5EEF1',
  176. },
  177. },
  178. splitLine: {
  179. lineStyle:{
  180. color:'#F5EEF1',
  181. },
  182. },
  183. type: 'value',
  184. inverse: true,
  185. axisTick: {
  186. show: false
  187. },
  188. },
  189. {
  190. gridIndex: 2,
  191. // position: 'center',
  192. type: 'value',
  193. // inverse: true,
  194. axisLabel: {
  195. show: false,
  196. },
  197. axisTick: {
  198. show: false,
  199. },
  200. axisLine: {
  201. show: false,
  202. },
  203. },
  204. ],
  205. series: [{
  206. name: that.data.legendData[0],
  207. barWidth: '50%',
  208. type: 'bar',
  209. itemStyle: {
  210. color: '#F29700',
  211. },
  212. data: that.data.seriesData[0]
  213. },
  214. {
  215. type: 'bar',
  216. barWidth: '50%',
  217. xAxisIndex: 1,
  218. yAxisIndex: 1,
  219. name: that.data.legendData[1],
  220. itemStyle: {
  221. color: '#048EF3',
  222. },
  223. data: that.data.seriesData[1]
  224. }
  225. ]
  226. };
  227. this.chart.setOption(option);
  228. }
  229. }
  230. };
  231. </script>