Skip to content

I
intel_promotion_manage
Commit 23799b48 authored by 杨硕's avatar 杨硕
Browse files
Options

对接首页统计图接口

parent ada4790c
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 84 deletions
src/api/dashboard.js
View file @ 23799b48
......@@ -8,3 +8,19 @@ export function statistics(query) {
params: query
})
}
// 代言人推广次数
export function barChar(query) {
return request({
url: '/sysunit/statisticsByTypeBarChart',
method: 'get',
params: query
})
}
// 文章视频推广次数
export function pieChart(query) {
return request({
url: '/sysunit/statisticsByTypePieChart',
method: 'get',
params: query
})
}
src/views/dashboard/index/index.vue
View file @ 23799b48
......@@ -139,7 +139,7 @@
<script>
import * as echarts from 'echarts'
import { listAllShop } from '@/api/sysUnit'
import { statistics } from '@/api/dashboard'
import { barChar, pieChart, statistics } from '@/api/dashboard'
import { mapGetters } from 'vuex'
export default {
name: 'Index',
......@@ -170,7 +170,10 @@ export default {
orderCount: 0,
userCount: 0
},
company: ''
company: '',
barNameList: [], // 柱状图姓名列表
barArticle: [], // 柱状图文章数量
barVideo: [] // 柱状图视频数量
}
},
computed: {
......@@ -185,10 +188,6 @@ export default {
// this.roleFunction()
},
mounted() {
this.handleGetTextVideoEcharts() // 文章视频echarts更新
this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
this.handleGetPeopleTextPie() // 代言人文章视频饼图
// 通过监听内容部分的宽度让图表resize
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
......@@ -231,6 +230,7 @@ export default {
/** 切换所属商家*/
changeCompany() {
this.getTableData() // 代言人，文章，视频数据
this.handleGetPeoplePromotionFrequency()
this.deptList.forEach(item => {
if (item.businessId === this.company) {
this.companyName = item.unitName
......@@ -246,6 +246,9 @@ export default {
this.company = this.deptList[0].businessId
this.companyName = this.deptList[0].unitName
this.getTableData() // 代言人，文章，视频数据
this.handleGetTextVideoEcharts() // 文章视频echarts更新
this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
this.handleGetPeopleTextPie() // 代言人文章视频饼图
}
})
})
......@@ -280,6 +283,7 @@ export default {
this.handleGetTextVideoEcharts()
},
/** 文章视频echarts更新*/
// 文章视频推广次数柱状图
handleGetTextVideoEcharts() {
if (this.isActive === '1') {
const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
......@@ -354,90 +358,108 @@ export default {
},
/** 代言人文章视频推广次数统计*/
handleGetPeoplePromotionFrequency() {
const myChartPeoplePromotionFrequency = echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency'))
const optionAverage = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
barChar({ businessId: this.company }).then(res => {
console.log('res', res)
if (res.code === 200) {
const barChar = res.data
this.barNameList = barChar.map(item => item.name)
this.barArticle = barChar.map(item => item.newsRate)
this.barVideo = barChar.map(item => item.videoRate)
console.log('this.barNameList', this.barNameList)
const myChartPeoplePromotionFrequency = echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency'))
const optionAverage = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10%', // 距离左侧的距离
right: '10%', // 距离右侧的距离
bottom: '3%', // 距离底部的距离
top: '3%', // 距离顶部的距离
containLabel: true // 包含坐标轴的标签
},
xAxis: {
type: 'category',
// data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
data: this.barNameList
},
yAxis: {
type: 'value'
},
series: [{
name: '文章',
type: 'bar',
itemStyle: {
// 设置柱状图的颜色
color: '#91CC75'
},
// data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
data: this.barArticle
},
{
name: '视频',
type: 'bar',
itemStyle: {
// 设置柱状图的颜色
color: '#5470C6'
},
// data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
data: this.barVideo
}]
}
},
grid: {
left: '10%', // 距离左侧的距离
right: '10%', // 距离右侧的距离
bottom: '3%', // 距离底部的距离
top: '3%', // 距离顶部的距离
containLabel: true // 包含坐标轴的标签
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
},
yAxis: {
type: 'value'
},
series: [{
name: '文章',
type: 'bar',
itemStyle: {
// 设置柱状图的颜色
color: '#91CC75'
},
data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
},
{
name: '视频',
type: 'bar',
itemStyle: {
// 设置柱状图的颜色
color: '#5470C6'
},
data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
}]
}
myChartPeoplePromotionFrequency.setOption(optionAverage)
myChartPeoplePromotionFrequency.setOption(optionAverage)
}
})
},
/** 代言人文章视频饼图*/
handleGetPeopleTextPie() {
const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
const optionAverage = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
show: false
},
series: [
{
name: '文章',
type: 'pie',
radius: '85%',
center: ['25%', '50%'], // 设置饼图的中心位置
data: [
{ value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
{ value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
{ value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
{ value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
]
},
{
name: '视频',
type: 'pie',
radius: '85%',
center: ['75%', '50%'], // 设置饼图的中心位置
data: [
{ value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
{ value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
{ value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
{ value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
pieChart({ businessId: this.company }).then(res => {
if (res.code === 200) {
console.log("饼状图",res.data)
const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
const optionAverage = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
show: false
},
series: [
{
name: '文章',
type: 'pie',
radius: '85%',
center: ['25%', '50%'], // 设置饼图的中心位置
data: [
{ value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
{ value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
{ value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
{ value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
]
},
{
name: '视频',
type: 'pie',
radius: '85%',
center: ['75%', '50%'], // 设置饼图的中心位置
data: [
{ value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
{ value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
{ value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
{ value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
]
}
]
}
]
}
myChartPeopleTextPie.setOption(optionAverage)
myChartPeopleTextPie.setOption(optionAverage)
}
})
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment