dataEchart.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div>
  3. <div>
  4. <h2>监测任务统计</h2>
  5. <div id="monitor" style="width:100%;height:400px;">
  6. </div>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data(){
  13. return {
  14. monitorData:'',
  15. task_class:'例行监测'
  16. }
  17. },
  18. created(){
  19. },
  20. mounted() {
  21. this.stasticalTasks();
  22. },
  23. methods:{
  24. async stasticalTasks(){
  25. const result = await this.$http.post("stasticalTasks",{task_class});
  26. this.monitorData = this.result.data.data
  27. },
  28. stasticalTasks () {
  29. //第一步:实例化对象
  30. const monitorChart = this.$echarts.init(document.getElementById('monitor'))
  31. //第二步:指定配置项和数据
  32. const monitorData = {
  33. //工具提示
  34. tooltip: {
  35. trigger: 'axis',//触发:轴
  36. axisPointer: { // 坐标轴指示器,坐标轴触发有效(鼠标悬停时候的样式)
  37. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  38. }
  39. },
  40. //网格样式
  41. grid: {
  42. left: '15%',//左边距
  43. right: '15%',//右边距
  44. bottom: '3%',//底边距
  45. containLabel: true//是否包含标签
  46. },
  47. //x轴
  48. xAxis: [
  49. {
  50. type: 'category',
  51. data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
  52. axisTick: {
  53. alignWithLabel: true //轴刻度 --与标签对齐
  54. },
  55. axisLabel:{
  56. fontSize:15
  57. },
  58. //不显示x坐标轴线
  59. axisLine:{
  60. show: false,
  61. }
  62. }
  63. ],
  64. //y轴
  65. yAxis: [
  66. {
  67. type: 'value',
  68. }
  69. ],
  70. //
  71. series: [
  72. {
  73. type: 'bar', // type值设置图表类型,bar为柱状图
  74. barWidth: '30%', // 柱形的宽度
  75. data: [10, 52, 200, 334, 390 ],
  76. showBackground: true,//是否显示背景色
  77. backgroundStyle: {
  78. color: 'rgba(180, 180, 180, 0.2)'
  79. }
  80. }
  81. ]
  82. }
  83. //第三步:把配置项给实例对象
  84. monitorChart.setOption(monitorData)
  85. }
  86. }
  87. }
  88. </script>
  89. <style>
  90. h2{
  91. /* margin: 0 auto; */
  92. display: flex;
  93. justify-content: center;;
  94. }
  95. </style>