若依前后台分离vue版,前台使用echarts动态调用后台数据

您所在的位置：网站首页 › echarts介绍 › 若依前后台分离vue版,前台使用echarts动态调用后台数据

若依前后台分离vue版,前台使用echarts动态调用后台数据

2022-12-16 15:46| 来源: 网络整理| 查看: 265

d一、前台vue代码

在首页index.vue中添加

并调用BarChart.vue

import BarChart from './dashboard/BarChart' components: { BarChart, },

然后BarChart.vue代码如下

import echarts from 'echarts' require('echarts/theme/macarons') // echarts theme import {newsCount } from "@/api/news/news"; import resize from './mixins/resize' const animationDuration = 6000 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' } }, data() { return { chart: null, item:[], value:[], } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'infographic') //this.chart.showLoading(); newsCount(this.queryParams).then(response => { console.log(response); this.listData = response.data; for (let i = 0; i < this.listData.length; i++) { this.item.push(this.listData[i].item); this.value.push(this.listData[i].value) } console.log(this.item); this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: this.item, axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value', axisTick: { show: false } }], series: [{ name: '信息数量', type: 'bar', stack: 'vistors', barWidth: '60%', data: this.value, animationDuration }] }) }) } } }

new.js中新增

export function newsCount(query) { return request({ url: '/news/news/dateCount', method: 'get', params: query }) }

二、后台

Controller代码为 @ApiOperation("dateCount") @GetMapping("/dateCount") public AjaxResult dateCount(News news) { List listMaps = newsService.selectListCount(news); return AjaxResult.success(listMaps); }

service代码为

@Override public List selectListCount(News news) { return newsMapper.selectListCount(news); }

newsMapper.xml

SELECT a.item,IFNULL(b.value,0) AS value FROM ( SELECT CURDATE() AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 1 DAY) AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 2 DAY) AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 3 DAY) AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 4 DAY) AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 5 DAY) AS item UNION ALL SELECT DATE_SUB(CURDATE(), INTERVAL 6 DAY) AS item ) a LEFT JOIN ( SELECT DATE(create_time) AS date, count(date_format(create_time,'%Y-%m-%d')) AS value FROM news_tbl GROUP BY DATE(create_time) ) b ON a.item = b.date;

【本文地址】

若依前后台分离vue版,前台使用echarts动态调用后台数据

若依前后台分离vue版,前台使用echarts动态调用后台数据

今日新闻

推荐新闻