<template>
<div id="Dataplay">
<div style="height: 100%; margin: 10px 15px 10px 10px">
<div id="main" style="width: 90%;height:750px;position:absolute;"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
var charts
// var Yword=[]
// var Ywordnum=[] //11111
export default {
data () {
return {
queryParams: {
pageNum: 1,
pageSize: 10
},
charts: null,
}
},
components: {
},
mounted () {
this.beforeDestroy()
this.getcountList()
},
// getcountList() { //11111111
// this.loading = true;
// listWordCount(this.ananlyseParams).then(response => {
// console.log(response)
// for(var i in response){
// var word=response[i].words
// var wordnum=response[i].count
// Yword.push(word)
// Ywordnum.push(wordnum)
// }
// // console.log(Yword)
// this.wordList = response;
// // this.total = response;
// this.loading = false;
// });
// }, //
methods: {
beforeDestroy () {
if (this.charts) {
this.charts.clear()
this.charts.dispose()
this.charts = null
window.removeEventListener('resize', () => { this.charts.resize() })
window.addEventListener('touchmove', {passive: false})
}
},
getcountList () {
if (charts !== null && charts !== '' && charts !== undefined) {
charts.dispose()
}
charts = echarts.init(document.getElementById('main')) //初始化
var option = {
title: [{
text: '关键词数据统计柱状图'
}],
tooltip: {//提示框组件
trigger: 'axis',//触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据0
axisPointer: { // 坐标轴指示器,坐标轴触发有效
animation: false
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
// formatter: function (params) {
// var relval = params[0].name
// return relval
// }
},
color: ['#32CD32'], //柱状图绿色
// legend: { //图例组件
// data: [],
// selected: {
// },
// x: 'left',
// y: 'top',
// padding: [5, 10, 10, 10], //echarts改变图例旁边位置
// show: true,
// icon: 'circle' //分页按钮图标
// },
axisPointer: {//坐标轴指示器,坐标轴触发有效
link: {xAxisIndex: 'all'
//link 属性,不同轴的 axisPointer 可以进行联动,在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
}
},
grid: {
containLabel: true, //grid 区域是否包含坐标轴的刻度标签
top: '20%', // 距上边距
left: '4%', // 距离左边距
right: '0%', // 距离右边距
bottom: '9%' // 距离下边距
},
xAxis: [
{
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: ["导航","播放","的","打开","音乐","我"], //需要动态赋值
name: ' 关键词词条 ',
nameGap: 20,
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
margin:15,
textStyle: {
color: 'black',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
axisTick:{//坐标轴刻度相关设置。
show: false,
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'#fff',
opacity:0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [{
type: 'value'
}],
// dataZoom: [
// {
// type: 'slider', //slider表示有滑动块的(pc)
// show: true, // 是否显示滑动
// start: 0,
// end: 30,
// handleSize: 8 //拉伸滑块标志大小
// }
// ],
//系列列表,具体设置图标项的样式,图形展示类型等。
series: [
{
data: [52501,36245,26223,24564,24567,20963], //需要动态赋值
type: 'bar',
showBackground: true,
backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
}
}
]
}
charts.setOption(option)
// var selectArr = option.legend.data
// charts.on('legendselectchanged', function (str) {
// // eslint-disable-next-line no-unused-vars
// var selected = str.selected
// var name = str.name
// if (name === '全选') {
// var flag = $(this).attr('flag')
// if (flag === 1) {
// var val = false
// $(this).attr('flag', 0)
// $(this).val('全选中')
// } else {
// val = true
// $(this).attr('flag', 1)
// $(this).val('全不选')
// }
// var obj = {}
// for (var key in selectArr) {
// obj[selectArr[key]] = val
// }
// option.legend.selected = obj
// charts.setOption(option)
// }
// })
}
},
destoryed () {
clearInterval(this.actiontime)
clearInterval(this.timer)
}
}
</script>
<style scoped>
</style>
图示: