- getX轴添加触发条件
getEcharts () {
const chart2 = this.$echarts.init(document.querySelector('.box1'))
const option = {
xAxis: {
type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: ['活动huodnejjejeje1', '活动B', '活动C', '活动yeeeeeeeeeeeD', '活动E', '活动F', '活动G'],
// 触发条件，show，显示为true
triggerEvent: {
show: true
},
axisLabel: {
textStyle: {
color: '#333',
fontSize: 12
},
formatter: function (array) {
const newStr = array.length > 4 ? array.substr(0, 4) + '...' : array
return newStr
}
}
},
yAxis: {
type: 'value'
// data:
},
grid: {
left: '3%',
right: '2%',
top: '15%',
containLabel: true
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
}
chart2.clear()
chart2.setOption(option)
this.extension(chart2, '.box1')
},
- 定义悬浮函数
extension (chart2, className) {
// 判断是否创建过div框,如果创建过就不再创建了
// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
var id = document.getElementById('extension')
if (!id) {
// var div = "<div id = 'extension' sytle=\"display:block\"></div>"
// $('html').append(div)
const html = document.documentElement
const div = document.createElement('div')
div.id = 'extension'
div.display = 'block'
html.appendChild(div)
}
chart2.on('mouseover', (params) => {
if (params.componentType === 'xAxis') {
// 设置悬浮文本的位置以及样式
const div = document.getElementById('extension')
div.style.position = 'absolute'
div.style.color = '#333'
div.style['font-size'] = '12px'
div.style.padding = '5px'
div.style.display = 'inline'
div.style['border-radius'] = '4px'
div.style['background-color'] = 'rgba(255, 255, 255, 0.5)'
div.style['box-shadow'] = 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
div.innerText = params.value
const html = document.documentElement
html.onmousemove = function (e) {
var xx = e.pageX - 10
var yy = e.pageY + 15
document.getElementById('extension').style.top = yy + 'px'
document.getElementById('extension').style.left = xx + 'px'
}
}
})
chart2.on('mouseout', function (params) {
if (params.componentType === 'xAxis') {
document.getElementById('extension').style.display = 'none'
document.getElementById('extension').style.innerText = ''
}
})
}
- 展示echarts
this.getEcharts()
// 可以在data中定义个数据，在echarts init 的时候复制给data 添加resize 事件
// this.data = this.$echarts.init(....)
window.addEventListener('resize', () => {
this.data.resize()
})
