Echarts添加全选图例
一般Echarts的引入渲染,有两种方式,一种是组件的方式引入,添加:options对象给渲染,另一种是获取元素节点,利用echarts.init初始化,使用setOption插入值渲染
组件引入
获取元素节点渲染
效果图
此处案例是第一种方式引入并渲染的,直接上代码
在页面的组建中引入
<div>
<vabChart
id="main"
style="width: 100%; height: 600px"
:options="schoolAllContr" //数据渲染对象
@legendselectchanged="legendselect" //自定义全选事件
/>
</div>
<script>
import vabChart from '@/plugins/echarts' //引入组件
export default {
components: {
vabChart,
}, //注册组件
data(){
return{
schoolAllContrXlegend:[ ] , //legend数据数组
schoolAllContrValue:[ ] , //y轴series数据
}
},
//计算属性
computed:{
//和options对应起来
schoolAllContr() {
return {
color: ['#B2CC6E', '#D3DC80', '#EFCD77', '#FB857A', '#E25858'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: this.schoolAllContrXlegend, // legend数组
selected: {
全选: false, //添加全选,默认没有选中
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'value',
},
],
yAxis: [
{
type: 'category',
data: this.schoolAllContrX, //x轴数据
},
],
series: this.schoolAllContrValue,
}
},
},
methond(){
//全选点击事件,处理
legendselect(params) {
var echarts = require('echarts') //因为是组件引入的方式,此处需要获取Echarts实例 此处是重点
var originChart = document.getElementById('main') //通过ID获取组件实例
if (params.name == '全选') { //判断首次为true还是false
var selectMark = this.schoolAllContr.legend.selected['全选'] //获取整个legend数组中的全选状态作为一个变量
var namelist22 = []
namelist22 = this.schoolAllContrXlegend //声明一个空的新数组存放legend的
var selected_item22 = {} //声明一个空对象用来存放修改后的legend的每一项的值
if (selectMark) { //如果全选默认true进入此循环
for (let i = 0; i < namelist22.length; i++) {
let key_name22 = namelist22[i]
selected_item22[key_name22] = false
this.schoolAllContr.legend.selected = selected_item22 //如果全选为true,则legend图例中的每一项都为true 否则相反
}
} else {
for (let i = 0; i < namelist22.length; i++) {
let key_name33 = namelist22[i]
selected_item22[key_name33] = true
this.schoolAllContr.legend.selected = selected_item22
}
}
let myChart = echarts.init(originChart) //重点:上面修改值以后一定要初始化Echarts的数据渲染组件,否则视图不会更新
myChart.setOption(this.schoolAllContr,true) //重点:使用setOption相当于重新赋值,不使用此项不生效
}
},
}
}
</script>
控制legend图例选中的个数
上代码
schoolAllContrXlegend = [ ]
schoolAllContrXlegend 是放在data中声明的一个用来存放legend图例变量的数组
//次数是请求接口以后给schoolAllContrXlegend 数组赋值的地方。因此做legend前多少项选中在此处处理
this.schoolAllContrXlegend.push('全选')
//此处是X轴值的数组,必须添加全选,type.和data字段。否则上面legend就算添加了也不会显示
this.schoolAllContrValue.push({
name: '全选',
type: 'bar',
data: [],
})
this.schoolAllContrValue.unshift() //此处一般用push。本案例因为对数据显示顺序有要求因此用了unshift
var namelist = []
namelist = this.schoolAllContrXlegend //声明一个新的数组用来存放图例数据
var selected_item = {} //空对象存放处理后的数据
for (var i = 0; i < namelist.length; i++) {
var key_name = namelist[i]
if (i > 6) { //默认前6项选中,
selected_item[key_name] = false //大于6个其余全部为false不选中
} else {
selected_item[key_name] = true
}
}
this.schoolAllContr.legend.selected = selected_item //将处理后的数据赋值给legend的selected为是否要选中
第二种方式,渲染Echarts的方式,添加全选图例和全选事件
//在template中的节点div
<template>
<div id="yFenxi" style="width: 100%; height: 600px"></div>
</template>
//导入Echarts
import Echarts from 'echarts'
//data中声明数据
data(){
return{
legendName:[ ], //图例名称数组
xAxisNames:[ ] , //x轴名称数组
}
}
this.legendName.push('全选')
setTimeout(() => {
this.myChart = Echarts.init(document.getElementById('yFenxi'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: {
data: this.legendName,
top: '5%',
selected: {
全选: false,
},
},
grid: {
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisNames,
axisLabel: {
// interval: 20, // 坐标轴刻度标签的显示间隔
// rotate: 40, // 标签倾斜的角度
textStyle: {
color: '#000',
fontSize: 12,
itemSize: '',
},
},
},
yAxis: {
type: 'value',
// max: 2,
// min: -2
},
series: [
{
name: '浙江',
type: 'line',
data: this.zhejiangData,
},
{
name: '江苏',
type: 'line',
data: this.jiangsuData,
},
{
name: '总计',
type: 'line',
data: this.sumData,
},
{
name: '全选',
type: 'line',
data: [],
},
],
}
this.myChart.setOption(option) //上面数据绑定以后必须通过获取节点再用setOption方法初始化渲染
//给当前 this.myChart节点绑定Echarts自带的legendselectchanged点击图例事件
//params为点击以后的每一项参数,为一个对象
this.myChart.on('legendselectchanged', function (params) {
if (params.name == '全选') {
var selectMark = option.legend.selected['全选'] //获取图例中的全选状态,作为一个标记变量
//option为上面的Echarts对象
var data = option.legend.data
if (selectMark) { //判断
for (var i = 0; i < data.length; i++) {
option.legend.selected[data[i]] = false
}
} else {
for (var i = 0; i < data.length; i++) {
option.legend.selected[data[i]] = true
}
}
this.setOption(option)
}
})
let _this = this
//点击以后初始化重置大小
window.onresize = function () {
_this.myChart.resize()
}
}, 1000)