teachScienceBar.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div :id="id" style="height: 100%;width:100%;"></div>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. myChart: '',
  9. }
  10. },
  11. props:{
  12. id:{
  13. type: String
  14. },
  15. data:{
  16. type: Object,
  17. default: function(){
  18. return {'挑人': 9, '计时器': 11, '计分板': 16, 'I R S':14, '即问即答':9, '二次作答':5, '翻牌':3, '统计图':10,
  19. '抢权':11, '飞讯处理':3, '推送':6, 'L I V E':13, '微影片':7, '播放影片':10, '作品观摩':7, '作品点评':6}
  20. }
  21. },
  22. callBack: {
  23. type: String
  24. }
  25. },
  26. mounted(){
  27. this.drawLine();
  28. },
  29. methods:{
  30. drawLine(){
  31. let _this = this
  32. // 取得Y軸Label
  33. let yLabel = Object.keys(this.data);
  34. let todayDataArray = [];
  35. // 今日資料
  36. yLabel.map(function(key) {
  37. todayDataArray.push(_this.data[key]);
  38. });
  39. // 基于准备好的dom,初始化echarts实例
  40. this.myChart = this.$echarts.init(document.getElementById(this.id));
  41. this.myChart.setOption({
  42. backgroundColor: '#343a4073',
  43. tooltip: {
  44. trigger: 'axis',
  45. axisPointer: {
  46. type: 'shadow'
  47. },
  48. formatter: function(params){
  49. // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
  50. }
  51. },
  52. grid: {
  53. left: '5%',
  54. right: '0',
  55. bottom: '0',
  56. top:'0',
  57. containLabel: true
  58. },
  59. xAxis: {
  60. type: 'value',
  61. boundaryGap: false,
  62. axisLabel: {
  63. inside: true,
  64. textStyle: {
  65. color:'transparent'
  66. }
  67. },
  68. splitLine: {
  69. show: true,
  70. lineStyle: {
  71. color: 'rgba(185, 193, 173, 0.63)'
  72. }
  73. }
  74. },
  75. yAxis: {
  76. type: 'category',
  77. axisLabel: {
  78. textStyle: {
  79. fontSize: '13px',
  80. color:'#94998a'
  81. }
  82. },
  83. splitLine: {
  84. show: true,
  85. lineStyle: {
  86. color: 'rgba(185, 193, 173, 0.63)'
  87. }
  88. },
  89. data: yLabel,
  90. },
  91. series: [
  92. {
  93. // name: 'today',
  94. type: 'bar',
  95. data: todayDataArray,
  96. barWidth: 7, //柱子宽度
  97. barGap: 1, //柱子之间间距
  98. itemStyle: {
  99. normal: { //渐变色
  100. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  101. offset: 0,
  102. color: "rgba(228, 233, 220, 1)" // 0% 处的颜色
  103. },{
  104. offset: 1,
  105. color: "rgba(228, 233, 220, 0)" // 100% 处的颜色
  106. }], false)
  107. }
  108. }
  109. }
  110. ]
  111. })
  112. // //highlight觸發項
  113. // this.myChart.on('highlight', function (params) {
  114. // _this.$emit('highLightInfo', {'id': yLabel[params.batch[0].dataIndex], 'today': todayDataArray[params.batch[0].dataIndex], 'lastWeek': lastWeekDataArray[params.batch[1].dataIndex]});
  115. // });
  116. // this.myChart.on('downplay', function (params) {
  117. // _this.$emit('downplay', yLabel[params.batch[0].dataIndex])
  118. // });
  119. // //預設顯示第一個
  120. // this.myChart.dispatchAction({
  121. // type: 'showTip',
  122. // seriesIndex: 1,
  123. // dataIndex: 0,
  124. // });
  125. // // 預設先給值
  126. // this.$emit('highLightInfo', {'id': yLabel[0], 'today': todayDataArray[0], 'lastWeek': lastWeekDataArray[0]});
  127. }
  128. }
  129. }
  130. </script>
  131. <style>
  132. </style>