interactiveBarLine.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div :id="id" style="height: 100%;width:100%;"></div>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {}
  8. },
  9. props:{
  10. id:{
  11. type: String
  12. }
  13. },
  14. mounted(){
  15. this.drawLine();
  16. },
  17. methods:{
  18. drawLine(){
  19. let _this = this
  20. // 基于准备好的dom,初始化echarts实例
  21. let myChart = this.$echarts.init(document.getElementById(this.id));
  22. let arrlabel = ["0-50", "51-60", "61-70", "71-80", "81-90", "90+"];
  23. let arrTotal1 = [3042,884,1060,1430,1246,70];
  24. let arrTotal2 = [4175,909,1125,933,566,24];
  25. let arrTotal3 = [2042,784,1260,1130,746,70];
  26. myChart.setOption({
  27. backgroundColor: 'rgba(17, 17, 17, 0.14)',
  28. tooltip: {
  29. trigger: 'axis',
  30. borderRadius: 0,
  31. },
  32. grid: {
  33. left: '0',
  34. right: '0',
  35. bottom: '5%',
  36. top: '10',
  37. containLabel: true,
  38. },
  39. xAxis: [{
  40. type: 'category',
  41. position: "bottom",
  42. axisLabel: {
  43. margin: 10,
  44. textStyle: {
  45. fontSize: 11,
  46. color: '#fafafa'
  47. },
  48. interval:0,
  49. // formatter:function(val){
  50. // let firstOne = arrlabel[0];
  51. // let labellength = arrlabel.length
  52. // let lastOne = arrlabel[labellength-1];
  53. // if(firstOne != val && lastOne != val){
  54. // return val
  55. // }
  56. // }
  57. },
  58. boundaryGap: true,
  59. splitLine: {
  60. lineStyle: {
  61. color: 'rgba(185, 193, 173, 0.63)',
  62. },
  63. show: true
  64. },
  65. axisLine: {
  66. lineStyle: {
  67. color: 'rgba(185, 193, 173, 0.63)',
  68. width: 1,
  69. }
  70. },
  71. axisTick: {
  72. show: false,
  73. },
  74. data: arrlabel
  75. }],
  76. yAxis: [{
  77. type: 'value',
  78. // name: '单 位(%)',
  79. axisTick: {
  80. show: false
  81. },
  82. axisLine: {
  83. show: true,
  84. lineStyle: {
  85. color: 'rgba(185, 193, 173, 0.63)',
  86. }
  87. },
  88. axisLabel: {
  89. margin: 10,
  90. textStyle: {
  91. fontSize: 11,
  92. color:'#fafafa'
  93. }
  94. },
  95. splitLine: {
  96. show: true,
  97. lineStyle: {
  98. color: 'rgba(185, 193, 173, 0.63)',
  99. }
  100. }
  101. }],
  102. series: [{
  103. type: 'line',
  104. zlevel: 10,
  105. lineStyle: {
  106. normal: {
  107. width: 2
  108. }
  109. },
  110. itemStyle: {
  111. normal: {
  112. color: '#48DBFC',
  113. },
  114. emphasis: {
  115. // color: 'rgb(0,196,132)',
  116. borderColor: 'rgba(0,196,132,0.2)',
  117. extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
  118. // borderWidth: 10
  119. }
  120. },
  121. data: arrTotal3
  122. },
  123. {
  124. name: '科技互动',
  125. type: 'bar',
  126. barWidth: 10,
  127. data: arrTotal1,
  128. itemStyle: {
  129. normal: { //渐变色
  130. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  131. offset: 0,
  132. color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
  133. },{
  134. offset: 1,
  135. color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
  136. }], false)
  137. }
  138. }
  139. },
  140. {
  141. name: '教法应用',
  142. type: 'bar',
  143. barWidth: 10,
  144. data: arrTotal2,
  145. itemStyle: {
  146. normal: { //渐变色
  147. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  148. offset: 0,
  149. color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
  150. },{
  151. offset: 1,
  152. color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
  153. }], false)
  154. }
  155. }
  156. },
  157. ]
  158. });
  159. }
  160. }
  161. }
  162. </script>
  163. <style>
  164. </style>