accountLine.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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 = ["3/15", "3/16", "3/17", "3/18", "3/19", "3/20", "3/21", "3/22", "3/23", "3/24", "TODAY"];
  23. let arrTotal1 = ["22", "17", "0", "26", "22", "24", "18", "30", "15", "10", "30"];
  24. let arrTotal2 = ["26", "20", "2", "18", "27", "22", "26", "33", "9", "0", "40"];
  25. myChart.setOption({
  26. backgroundColor: 'rgba(17, 17, 17, 0.14)',
  27. tooltip: {
  28. trigger: 'axis',
  29. borderRadius: 0,
  30. // backgroundColor:'#7AD1A8',
  31. // formatter: function(pm) {
  32. // var param = pm[0];
  33. // var pht = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:rgba(166,154,228);"></span>';
  34. // console.log(param.marker);
  35. // var prm = "星期" + "日一二三四五六 ".charAt(new Date(param.name).getDay());
  36. // return param.name + ":&nbsp;&nbsp;" + prm + "<br>" +
  37. // pht + param.seriesName + ":&nbsp;&nbsp;" + param.value + "&nbsp;&nbsp;|&nbsp;&nbsp;80.33ttt%";
  38. // },
  39. // axisPointer: { // 坐标轴指示器,坐标轴触发有效
  40. // type: 'none' // 默认为直线,可选为:'line' | 'shadow'
  41. // },
  42. },
  43. grid: {
  44. left: '0',
  45. right: '0',
  46. bottom: '0',
  47. top: '0',
  48. containLabel: true,
  49. },
  50. xAxis: [{
  51. axisTick: {
  52. show: false,
  53. },
  54. type: 'category',
  55. axisLabel: {
  56. margin: 10,
  57. textStyle: {
  58. fontSize: 11,
  59. color: '#94998a'
  60. },
  61. interval:0,
  62. formatter:function(val){
  63. let firstOne = arrlabel[0];
  64. let labellength = arrlabel.length
  65. let lastOne = arrlabel[labellength-1];
  66. if(firstOne != val && lastOne != val){
  67. return val
  68. }
  69. }
  70. },
  71. boundaryGap: false,
  72. splitLine: {
  73. lineStyle: {
  74. color: 'rgba(185, 193, 173, 0.63)',
  75. },
  76. show: true
  77. },
  78. axisLine: {
  79. lineStyle: {
  80. color: 'rgba(185, 193, 173, 0.63)',
  81. width: 1,
  82. }
  83. },
  84. data: arrlabel
  85. }],
  86. yAxis: [{
  87. position: 'right',
  88. type: 'value',
  89. // name: '单 位(%)',
  90. axisTick: {
  91. show: false
  92. },
  93. axisLine: {
  94. show: true,
  95. lineStyle: {
  96. color: 'rgba(185, 193, 173, 0.63)',
  97. }
  98. },
  99. axisLabel: {
  100. margin: 10,
  101. inside: true,
  102. textStyle: {
  103. fontSize: 14,
  104. color:'transparent'
  105. }
  106. },
  107. splitLine: {
  108. show: true,
  109. lineStyle: {
  110. color: 'rgba(185, 193, 173, 0.63)',
  111. }
  112. }
  113. }],
  114. series: [{
  115. // name: '实名率',
  116. type: 'line',
  117. // symbol: 'circle',
  118. //symbolSize: 5,
  119. // showSymbol: false,
  120. // markPoint: { // markLine 也是同理
  121. // data: [{
  122. // coord: [0,1,2,3,4], // 其中 5 表示 xAxis.data[5],即 '33' 这个元素。
  123. // // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
  124. // // 注意,使用这种方式时,xAxis.data 不能写成 [number, number, ...]
  125. // // 而只能写成 [string, string, ...]
  126. // }]
  127. // },
  128. lineStyle: {
  129. normal: {
  130. width: 2
  131. }
  132. },
  133. areaStyle: {
  134. normal: {
  135. // 渐变色
  136. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  137. offset: 0,
  138. color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
  139. },{
  140. offset: 1,
  141. color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
  142. }], false)
  143. },
  144. },
  145. itemStyle: {
  146. normal: {
  147. areaStyle: {
  148. type: 'default'
  149. },
  150. color: '#1CD0A1',
  151. },
  152. emphasis: {
  153. // color: 'rgb(0,196,132)',
  154. borderColor: 'rgba(0,196,132,0.2)',
  155. extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
  156. // borderWidth: 10
  157. }
  158. },
  159. data: arrTotal1
  160. },
  161. {
  162. type: 'line',
  163. lineStyle: {
  164. normal: {
  165. width: 2
  166. }
  167. },
  168. areaStyle: {
  169. normal: {
  170. // 渐变色
  171. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  172. offset: 0,
  173. color: "rgba(72, 219, 252, 1)" // 0% 处的颜色
  174. },{
  175. offset: 1,
  176. color: "rgba(72, 219, 252, 0.5)" // 100% 处的颜色
  177. }], false)
  178. },
  179. },
  180. itemStyle: {
  181. normal: {
  182. areaStyle: {
  183. type: 'default'
  184. },
  185. color: '#48DBFC',
  186. },
  187. emphasis: {
  188. // color: 'rgb(0,196,132)',
  189. borderColor: 'rgba(0,196,132,0.2)',
  190. extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
  191. // borderWidth: 10
  192. }
  193. },
  194. data: arrTotal2
  195. }
  196. ]
  197. });
  198. }
  199. }
  200. }
  201. </script>
  202. <style>
  203. </style>