若依前后台分离vue版,前台使用echarts动态调用后台数据
一、前端vue代码在首页index.vue中添加
<el-row style="width: 100%; font-weight: bold; top: 10px;" :gutter="10" :sm="24" :lg="24" type="flex">
<el-col :xs="18" :sm="18">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
<el-col :xs="6" :sm="6"></el-col>
</el-row>
并调用BarChart.vue
import BarChart from './dashboard/BarChart'
components: {
BarChart,
},
然后BarChart.vue代码如下
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
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
}]
})
})
}
}
}
</script>
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<Map<String, Object>> listMaps = newsService.selectListCount(news);
return AjaxResult.success(listMaps);
}
service代码为
@Override
public List<Map<String, Object>> selectListCount(News news) {
return newsMapper.selectListCount(news);
}
newsMapper.xml
<select id="selectListCount" resultType="java.util.Map">
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;
</select>
