classline.vue 6.2 KB

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