template部分:
<div
class="siggle-chart"
id="histogram"
></div>
script部分:
export default {
name: 'FunctionStatistics',
data () {
return {
echarts: require('echarts'),
pvUvInfo: [],
beidouTop10: [],
functionPvUv: []
}
},
// 通过监听来渲染
watch: {
pvUvInfo (newValue, oldValue) {
this.drawBar()
},
},
methods: {
drawBar () {
var histogramChart = this.echarts.init(document.getElementById('histogram'))
// 清除缓存
histogramChart.clear()
if (this.pvUvInfo.length !== 0) {
histogramChart.setOption({
title:
{
text: '访问统计-PV&UV',
x: '22%',
textAlign: 'center'
},
grid: {
top: '80',
width: '40%',
bottom: '5%',
left: 20,
right: 0,
containLabel: true
},
xAxis:
{
type: 'category',
// name: '用户ID',
axisTick: {
inside: true
},
splitLine: {
show: false
},
data: this.pvUvInfo.xKeyList
},
yAxis:
{
type: 'value',
// name: '访问次数',
// scale: true,
axisTick: {
inside: true
}
},
series:
{
type: 'bar',
barWidth: '10%',
data: this.pvUvInfo.valueList,
itemStyle: {
normal: {
label: {
show: true,
position: 'right'
}
}
}
}
})
}
}