创新实训博客（20）——Vue中使用ECharts进行数据可视化（基本图表部分）

准备工作

引入echarts、引入echarts-wordcloud

[code]import echarts from 'echarts'

require('echarts-wordcloud')
require('echarts/theme/roma')

html中设置echarts组件

[code]      <el-col :span="15">
<el-card style="margin: 8px">
<div id="trend_dashboard" style="width: 100%; height: 350px" />
</el-card>
</el-col>

js设置echarts组件绑定

[code]    var that = this
that.trend_dashboard = echarts.init(document.getElementById('trend_dashboard'), 'roma')
that.top_like_article = echarts.init(document.getElementById('top_like_article'), 'roma')
that.top_read_article = echarts.init(document.getElementById('top_read_article'), 'roma')
that.top_tag_cloud = echarts.init(document.getElementById('top_tag_cloud'), 'roma')
that.top_read_user = echarts.init(document.getElementById('top_read_user'), 'roma')
that.top_like_user = echarts.init(document.getElementById('top_like_user'), 'roma')
that.top_read_blog = echarts.init(document.getElementById('top_read_blog'), 'roma')

发起请求

[code]// 获取最近的文章点赞量排名
export function getArticleLikingCountRecently() {
return request({
url: '/admin/record/getArticleLikingCountRecently',
method: 'get',
params: { day: 7, page: 1, size: 5 }
})
}

返回参数的处理分析

[code]const { data } = response
var list = []
for (var i in data) {
list.push({ 'name': data[i].name, 'value': data[i].count })
}

设置图表

1. 纵向柱状图和折线图混合

[code]var option = {
title: {
text: '最近趋势总览'
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisLabel: {
rotate: 50
}
},
yAxis: {
type: 'value'
},
legend: {
data: ['累计博客', '新增博客']
},
series: [{
name: '累计博客',
data: total,
type: 'line',
smooth: false,
color: '#800000',
label: {
show: true,
position: 'top'
}
}, {
name: '新增博客',
data: count,
type: 'bar',
areaStyle: {},
smooth: false,
color: '#008088',
label: {
show: true,
position: 'top'
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
}]
}

2. 横向柱状图

[code]var option = {
title: {
text: '最热文章'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: title.reverse()
},
series: [
{
name: '浏览量',
type: 'bar',
barWidth: 10,
data: count.reverse(),
color: '#27299a',
label: {
show: true,
position: [0, '-16px'],
formatter: function(a) {
let num = ''
let str = ''
num = '0' + (5 - a.dataIndex)
str = `${num}-${a.name}`
return str
}
},
showBackground: true,
backgroundStyle: {
color: '#eeeeee'
}
}
]
}

3. 折线图

[code]var option = {
title: {
text: '最热个人博客'
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: user,
axisLabel: {
rotate: 50
}
},
yAxis: {
type: 'value'
},
series: [{
name: '浏览量',
data: count,
type: 'line',
areaStyle: {},
smooth: false,
color: '#845316',
label: {
show: true,
position: 'top'
}
}]
}

4. 散点图

[code]var option = {
title: {
text: '用户点赞数据'
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: user,
axisLabel: {
rotate: 50
}
},
yAxis: {
type: 'value'
},
series: [{
name: '点赞量',
data: count,
type: 'effectScatter',
color: '#16846e',
label: {
show: true,
position: 'top'
}
}]
}

效果展示