当前位置:   article > 正文

若依前后台分离vue版,前台使用echarts动态调用后台数据_ruoyi -vue 引入echart

ruoyi -vue 引入echart

d一、前台vue代码

在首页index.vue中添加

  1. <el-row style="width: 100%; font-weight: bold; top: 10px;" :gutter="10" :sm="24" :lg="24" type="flex">
  2. <el-col :xs="18" :sm="18">
  3. <div class="chart-wrapper">
  4. <bar-chart />
  5. </div>
  6. </el-col>
  7. <el-col :xs="6" :sm="6"></el-col>
  8. </el-row>

 并调用BarChart.vue

  1. import BarChart from './dashboard/BarChart'
  2. components: {
  3. BarChart,
  4. },

然后BarChart.vue代码如下

  1. <template>
  2. <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. require('echarts/theme/macarons') // echarts theme
  7. import {newsCount } from "@/api/news/news";
  8. import resize from './mixins/resize'
  9. const animationDuration = 6000
  10. export default {
  11. mixins: [resize],
  12. props: {
  13. className: {
  14. type: String,
  15. default: 'chart'
  16. },
  17. width: {
  18. type: String,
  19. default: '100%'
  20. },
  21. height: {
  22. type: String,
  23. default: '300px'
  24. }
  25. },
  26. data() {
  27. return {
  28. chart: null,
  29. item:[],
  30. value:[],
  31. }
  32. },
  33. mounted() {
  34. this.$nextTick(() => {
  35. this.initChart()
  36. })
  37. },
  38. beforeDestroy() {
  39. if (!this.chart) {
  40. return
  41. }
  42. this.chart.dispose()
  43. this.chart = null
  44. },
  45. methods: {
  46. initChart() {
  47. this.chart = echarts.init(this.$el, 'infographic')
  48. //this.chart.showLoading();
  49. newsCount(this.queryParams).then(response => {
  50. console.log(response);
  51. this.listData = response.data;
  52. for (let i = 0; i < this.listData.length; i++) {
  53. this.item.push(this.listData[i].item);
  54. this.value.push(this.listData[i].value)
  55. }
  56. console.log(this.item);
  57. this.chart.setOption({
  58. tooltip: {
  59. trigger: 'axis',
  60. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  61. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  62. }
  63. },
  64. grid: {
  65. top: 10,
  66. left: '2%',
  67. right: '2%',
  68. bottom: '3%',
  69. containLabel: true
  70. },
  71. xAxis: [{
  72. type: 'category',
  73. data: this.item,
  74. axisTick: {
  75. alignWithLabel: true
  76. }
  77. }],
  78. yAxis: [{
  79. type: 'value',
  80. axisTick: {
  81. show: false
  82. }
  83. }],
  84. series: [{
  85. name: '信息数量',
  86. type: 'bar',
  87. stack: 'vistors',
  88. barWidth: '60%',
  89. data: this.value,
  90. animationDuration
  91. }]
  92. })
  93. })
  94. }
  95. }
  96. }
  97. </script>

new.js中新增

  1. export function newsCount(query) {
  2. return request({
  3. url: '/news/news/dateCount',
  4. method: 'get',
  5. params: query
  6. })
  7. }

二、后台

Controller代码为
  1. @ApiOperation("dateCount")
  2. @GetMapping("/dateCount")
  3. public AjaxResult dateCount(News news)
  4. {
  5. List<Map<String, Object>> listMaps = newsService.selectListCount(news);
  6. return AjaxResult.success(listMaps);
  7. }

service代码为

  1. @Override
  2. public List<Map<String, Object>> selectListCount(News news) {
  3. return newsMapper.selectListCount(news);
  4. }

newsMapper.xml

  1. <select id="selectListCount" resultType="java.util.Map">
  2. SELECT a.item,IFNULL(b.value,0) AS value
  3. FROM (
  4. SELECT CURDATE() AS item
  5. UNION ALL
  6. SELECT DATE_SUB(CURDATE(), INTERVAL 1 DAY) AS item
  7. UNION ALL
  8. SELECT DATE_SUB(CURDATE(), INTERVAL 2 DAY) AS item
  9. UNION ALL
  10. SELECT DATE_SUB(CURDATE(), INTERVAL 3 DAY) AS item
  11. UNION ALL
  12. SELECT DATE_SUB(CURDATE(), INTERVAL 4 DAY) AS item
  13. UNION ALL
  14. SELECT DATE_SUB(CURDATE(), INTERVAL 5 DAY) AS item
  15. UNION ALL
  16. SELECT DATE_SUB(CURDATE(), INTERVAL 6 DAY) AS item
  17. ) a LEFT JOIN (
  18. SELECT DATE(create_time) AS date, count(date_format(create_time,'%Y-%m-%d')) AS value
  19. FROM news_tbl
  20. GROUP BY DATE(create_time)
  21. ) b ON a.item = b.date;
  22. </select>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/769389
推荐阅读
相关标签