前端js： echarts图例legend数据过多的时候分页显示&鼠标滚动显示图例
echarts图例legend数据过多的时候分页显示&鼠标滚动显示
1.echarts图例设置分页滚动 type: 'scroll' 示例如下：
legend: [{
data:[],
tooltip: {
show: true,
textStyle: {
color: "#cecece",
fontSize:14 // 设置图例文字大小
},
position: 'right' ,
backgroundColor: 'rgba(100, 100, 100, 0.8)', // 设置背景颜色为白色，透明度为0.8
borderColor: 'gray', // 设置边框颜色为灰色
},
formatter: function (name) {
return name.length > 12 ? name.substring(0, 12) + '...' : name;
},
orient: 'vertical',
type: 'scroll', // 设置图例类型为滚动类型 :分页滚动
pageIconColor: '#cecece', // 滚动图标颜色
pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
pageTextStyle: { // 图例页信息的文字样式
color: '#cbcbcb'
},
pageIconSize: 14, // 滚动图标大小
right: '3%',
top: 'center',
height: '75%',
itemWidth: 9,
itemHeight: 9,
itemGap: 6,
borderRadius: 15,
icon: 'circle',
textStyle: {
color: '#cecece',
fontSize: 14 // 设置图例文字大小
}
}],
2. echarts图例设置分页滚动的基础上，设置鼠标滚轮滚动：
<template> <div :id="id" class="ecahrtStyle" @wheel='wheelDIV'></div> </template>
methods :
wheelDIV: debounce(function (e) {
// 绑定鼠标滚轮事件 ,前提需要设置 legend: [{ data:[]]值
if ( this.chart && this.chart.getOption().legend[0].data.length && this.isWheelLegendData) {
e.preventDefault();
const delta = e.deltaY > 0 ? 1 : -1; // 滚动方向
var legend0 = this.chart.getOption().legend[0]
const currentIndex = legend0.scrollDataIndex || 0;
let newIndex = currentIndex + delta * 6// 步长设为 6
let newIndex = newIndex <0 ? newIndex+ legend0.data.length: newIndex
newIndex = newIndex >= legend0.data.length ?0: newIndex
this.chart.setOption({
legend: { scrollDataIndex: newIndex }
});
},
备注其他：改为在父组件设置
## （echarts ） - 功能：legend图标多，在ECHARTS容器的父组件设置鼠标滚轮事件 ``` <div class="industry-pie" @wheel='wheelDIV'> <Echart :options="options" ref='chart' :isWheelLegendData='true'></Echart> </div> ```
methods: ``` wheelDIV: debounce(function (e) { const $dom = this.$refs.chart // 绑定鼠标滚轮事件 ,前提需要设置 legend: [{ data:[]]值 if ($dom ) { e.preventDefault(); const delta = e.deltaY > 0 ? 1 : -1; // 滚动方向 var legendArr = this.$refs.chart.getOption().legend const currentIndex = legendArr[0].scrollDataIndex || 0; console .log(delta , currentIndex ,legendArr) let newIndex = currentIndex + delta * 6 <0 ? legendArr[0].data.length: currentIndex + delta * 6 // 步长设为 6 newIndex = newIndex >= legendArr[0].data.length ?0: newIndex this .options .legend [0] .scrollDataIndex =newIndex } } , 0.5 *1000), ```
data() {
return {
options: {
tooltip: {
show: true,
textStyle: {
align: "left",
},
backgroundColor: "transparent",
borderWidth: 0,
confine: true,
extraCssText: "box-shadow: 0 0 0 rgba(0, 0, 0, 0);",
formatter: function (params) {
let str = `
<div style = "background :transparent;height:100px;position: relative">
<div style="background :rgba(100, 100, 100, 0.8) ;border:1px solid gray;position: absolute;left: 0px; padding:10px;top: 15px;width: background;height:66px;line-height:22px;font-size: 14px;color:#cecece;">
<span>${params.name}</span>
<br/> 数量：${params.value}<br/> 占比：${params.percent
}%</div>
</div>
`;
return str;
},
},
legend: [{
data:[],
tooltip: {
show: false,
textStyle: {
color: "#cecece",
fontSize:14 // 设置图例文字大小
},
position: 'right' ,
backgroundColor: 'rgba(100, 100, 100, 0.8)', // 设置背景颜色为白色，透明度为0.8
borderColor: 'gray', // 设置边框颜色为灰色
},
formatter: function (name) {
return name.length > 12 ? name.substring(0, 12) + '...' : name;
},
orient: 'vertical',
type: 'scroll', // 设置图例类型为滚动类型 :分页滚动
pageIconColor: '#cecece', // 滚动图标颜色
pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
pageTextStyle: { // 图例页信息的文字样式
color: '#cbcbcb'
},
pageIconSize: 14, // 滚动图标大小
right: '3%',
top: 'center',
height: '75%',
itemWidth: 9,
itemHeight: 9,
itemGap: 6,
borderRadius: 15,
icon: 'circle',
textStyle: {
color: '#cecece',
fontSize: 14 // 设置图例文字大小
}
}],
series: [],
},
colorOption: [
["#1F68FF", "#ABD5FF"],
["#03376F", "#00B188"],
["#002DE2", "#506BF3"],
["#c3ddf7", "#c4ddfc"],
["#06C687", "#4AFFC9"],
["#6A2EFF", "#A688EE"],
["#12cae7", "#846fb9"],
["#2eff31", "#3f7c63"],
["#cb2eff", "#9745c4"],
["#ff6d2e", "#e74121"],
["#d7a793", "#e74121"],
["#295f69", "#da9e92"],
],
value1: 0,
};
},
mounted() {
this.initData();
},
computed: {
dataValue() {
return this.dataList.reduce((pre, cur, index) => {
if (index % 6 == 0) {
console.log({ pre });
pre.push([]);
}
pre[pre.length - 1].push(cur);
return pre;
}, []);
}
},
watch: {
dataList() {
this.initData();
}
},
methods: {
// 图表数据值放入options
initData() {
let dataSOption = [];
this.options.legend[0].data = [];
if (this.dataList) {
this.options.series = [];
this.dataList.forEach((item, index) => {
let lenColor= this.colorOption .length ||1
let color = this.colorOption[index % lenColor];
let dataOption = {
value: 0,
name: "",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red", // 0% 处的颜色
},
{
offset: 1,
color: "blue", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
};
dataOption.value = item.value;
dataOption.name = item.name;
// 根据自定义的颜色进行配置
dataOption.itemStyle.color.colorStops = [
{
offset: 0,
color: color[0], // 0% 处的颜色
},
{
offset: 1,
color: color[1], // 100% 处的颜色
},
];
dataSOption.push(dataOption);
this.options.legend[0].data .push( item.name)
});
}
this.options.series.push({
type: "pie",
radius: ["0", "50%"],
emphasis: {
scale: true,
scaleSize: 20,
},
avoidLabelOverlap: true,
label: {
show: false,
textStyle: {
fontSize:14
},
},
left: "-190px",
data: dataSOption,
});
},
},
props: ['dataList']
浙公网安备 33010602011771号