echart事件总结
echart常用属性和事件总结
给X轴添加点击事件：
https://blog.****.net/sophia_xiaoma/article/details/78055947?utm_source=blogxgwz9
设置方法：
在渲染echart图时给绑定添加事件，如：
drawLine (optType) {
// 基于准备好的dom，初始化echarts实例
let that = this
const initDom = document.getElementById('barGraph')
if (!initDom) {
return false
}
let fpChange = echarts.init(initDom)
fpChange.clear()
fpChange.setOption(optType)
fpChange.on('click', function (params) {
if (params.componentType === 'xAxis' && that.oldVal !== params.value) {
that.oldVal = params.value
that.cityId = that.baseCityData[0].id
const getFilterId = that.baseCityData.filter((item, index) => {
if (params.value.includes(item.name)) {
let opt = fpChange.getOption()
let dz = opt.dataZoom[0]
that.endValIndex = dz.endValue
that.activeIndex = index
that.activeName = item.name
that.scrollName = item.name
// params.event.target.style.textFill = 'red'
return item.id
}
})
that.cityId = getFilterId[0].id
that.getDetail()
}
})
fpChange.on('datazoom', function (params) {
// 滚动时获取滚动条第一个start值
// let opt = fpChange.getOption()
// let dz = opt.dataZoom[0]
// let s = opt.xAxis[0].data[dz.startValue]
// const reg = /[\u4e00-\u9fa5]/g
// const names = s.match(reg)
// if (that.endValIndex > dz.endValue) {
// if (indexLen < that.endValIndex - dz.endValue) {
// that.scrollName = ''
// } else {
// that.scrollName = that.activeName
// }
// }
})
window.addEventListener('resize', () => {
fpChange.resize()
})
}
x轴的数据也可以通过formatter: function 的形式设置返回需要格式的数据
实现多种echart图形叠加图
- 两种方式：
- 方法1：
设置gridIndex的层级来限定
图例：
- 方法1：
opt () {
let obj = {
tooltip: this.tooltipPer1,
dataZoom: [{
type: 'slider',
start: 0,
end: 20,
zoomLock: true,
height: 20, // 组件高度
bottom: 8,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
xAxisIndex: [0, 1, 2],
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
xAxis: [
{
type: 'category',
gridIndex: 0,
data: this.barData.cityList,
axisLine: false,
axisTick: false,
axisLabel: {
interval: 0
},
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 1,
data: this.barData.cityList,
axisLine: false,
axisTick: false,
axisLabel: {
interval: 0
},
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 2,
triggerEvent: true,
data: this.barData.cityList,
nameTextStyle: {
backgroundColor: 'red',
label: {
rich: {
backgroundColor: 'red',
width: '100%',
height: '100%'
}
}
},
axisLabel: {
interval: 0,
margin: 15,
textStyle: {
color: ''
}
},
axisLine: {
show: false
},
axisTick: false,
splitLine: {
show: true
}
}
],
yAxis: [
{
gridIndex: 0,
splitNumber: 5,
min: 0,
max: 100,
axisLabel: {
formatter: '{value} %'
},
axisLine: {show: false},
axisTick: false,
splitLine: {
show: true
}
},
{
gridIndex: 1,
splitNumber: 5,
min: 0,
max: 100,
axisLabel: {
formatter: '{value} %'
},
axisLine: {show: false},
axisTick: false,
splitLine: {
show: true
}
},
{
gridIndex: 2,
splitNumber: 5,
min: 0,
max: 100,
axisLabel: {
formatter: '{value} %'
},
axisLine: {show: false},
axisTick: false,
splitLine: {
show: true
}
}
],
grid: [
{top: '10px', height: '95px', right: '0', left: '10%'},
{top: '125px', height: '95px', right: '0', left: '10%'},
{top: '240px', height: '95px', right: '0', left: '10%'}
],
series: [
{type: 'bar', seriesLayoutBy: 'row', barWidth: 15, data: this.barData.groupList1, itemStyle: {normal: {color: '#ffe699'}}},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, data: this.barData.groupList2, itemStyle: {normal: {color: '#8ededa'}}},
{type: 'bar', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, data: this.barData.groupList3, itemStyle: {normal: {color: '#81d4fa'}}}
],
legend: {}
}
return obj
}
opt1 () {
let obj = {
tooltip: this.tooltipPer2,
dataZoom: [{
type: 'slider',
start: 0,
end: 20,
zoomLock: true,
height: 20, // 组件高度
bottom: 8,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
xAxisIndex: [0, 1, 2],
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
xAxis: [
{
type: 'category',
gridIndex: 0,
data: this.barData2.cityList,
axisLine: false,
axisTick: false,
axisLabel: {
interval: 0
},
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 1,
data: this.barData2.cityList,
axisLine: false,
axisTick: false,
axisLabel: {
interval: 0
},
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 2,
triggerEvent: true,
data: this.barData2.cityList,
axisLabel: {
interval: 0,
margin: 15
},
axisLine: {
show: false
},
axisTick: false,
splitLine: {
show: true
}
}
],
yAxis: [
{
gridIndex: 0,
splitNumber: 5,
axisLine: {show: false},
min: 0,
max: 6,
axisTick: false,
splitLine: {
show: true
}
},
{
gridIndex: 1,
splitNumber: 5,
min: 0,
max: 6,
axisLine: {show: false},
axisTick: false,
splitLine: {
show: true
}
},
{
gridIndex: 2,
splitNumber: 5,
min: 0,
max: 6,
axisLine: {show: false},
axisTick: false,
splitLine: {
show: true
}
}
],
grid: [
{top: '10px', height: '95px', right: '0', left: '10%'},
{top: '125px', height: '95px', right: '0', left: '10%'},
{top: '240px', height: '95px', right: '0', left: '10%'}
],
series: [
{type: 'bar', name: '绑定', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'row', barWidth: 15, stack: '3', data: this.barData2.groupMap1.bond, itemStyle: {normal: {color: '#81d4fa'}}},
{type: 'bar', name: '未绑定', xAxisIndex: 0, yAxisIndex: 0, seriesLayoutBy: 'row', barWidth: 15, stack: '3', data: this.barData2.groupMap1.unBond, itemStyle: {normal: {color: '#ffe699'}}},
{type: 'bar', name: '绑定', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, stack: '1', data: this.barData2.groupMap2.bond, itemStyle: {normal: {color: '#81d4fa'}}},
{type: 'bar', name: '未绑定', xAxisIndex: 1, yAxisIndex: 1, barWidth: 15, stack: '1', data: this.barData2.groupMap2.unBond, itemStyle: {normal: {color: '#ffe699'}}},
{type: 'bar', name: '绑定', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, stack: '2', data: this.barData2.groupMap3.bond, itemStyle: {normal: {color: '#81d4fa'}}},
{type: 'bar', name: '未绑定', xAxisIndex: 2, yAxisIndex: 2, barWidth: 15, stack: '2', data: this.barData2.groupMap3.unBond, itemStyle: {normal: {color: '#ffe699'}}}
]
}
return obj
}
- 方法2：
设置datazoom数据集来限定
option = {
tooltip: { // 提示框
trigger: 'axis'
},
legend: {},
dataZoom: [{type: 'slider', xAxisIndex: [0, 1, 2]}],
xAxis: [
{
type: 'category',
gridIndex: 0,
data: ['2012', '2013', '2014', '2015'],
axisLine: false,
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 1,
data: ['2012', '2013', '2014', '2015'],
axisLine: false,
splitLine: {
show: true
}
},
{
type: 'category',
gridIndex: 2,
data: ['2012', '2013', '2014', '2015'],
splitLine: {
show: true
},
axisLabel: {
interval: 0,
margin: 20,
backgroundColor: 'green',
// formatter: this.scroll
},
}
],
yAxis: [
{
gridIndex: 0,
splitNumber: 5,
axisLine: {show: false},
axisTick: false,
data: [0, 25, 50, 75, 100],
splitLine: {
show: true
}
},
{
gridIndex: 1,
splitNumber: 5,
splitLine: {
show: true
}
},
{
gridIndex: 2,
splitNumber: 5,
splitLine: {
show: true
}
}
],
grid: [
{top: '1%', height: '150px'},
{top: '35%', height: '150px'},
{top: '65%', height: '150px'}
],
series: [
{type: 'bar', seriesLayoutBy: 'row', data: [65.5, 56, 85.7, 34.1]},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [86.5, 92.1, 85.7, 83.1]},
{type: 'bar', xAxisIndex: 2, yAxisIndex: 2, data: [86.5, 92.1, 85.7, 83.1]}
]
};
过滤汉字方法：
filterName (val) { // 获取X轴name
const reg = /[\u4e00-\u9fa5]/g
const names = val.match(reg)
return names.join('')
},
echart中echart图 tooltip提示，特殊设置方法：
tooltipPer1 (orgType) {
let that = this
return {
trigger: 'axis',
formatter: function (params, ticket, callback) {
let res = ''
let gradName = ''
if (params[0].color === '#ffe699') gradName = '小学'
if (params[0].color === '#8ededa') gradName = '初中'
if (params[0].color === '#81d4fa') gradName = '高中'
res = that.filterName(params[0].name) + '<br/>'
const circle = '<span style="margin-right: 3px; display: inline-block; width: 10px; height: 10px; background-color:' + params[0].color + '; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;"></span>'
res += circle
res += gradName + ' : ' + params[0].value + '%' + '<br/>'
return res
}
}
}