echarts大屏项目开发中，需要实现一个功能，饼状图点击扇形区域后对应的自定义lengend高亮，点击自定义lengend后，对应的扇形区域高亮。
动态效果
echarts相关代码
<template>
<div class="echartsBody">
<div class="echartsBody1" ref="echarts1"></div>
<div class="echartsBody2" v-if="num">
<div class="echartsTitle">
<gsapNum :number="num"></gsapNum>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts"
import gsapNum from "@/components/gsapNum/index.vue";
export default {
name: 'echarts1',
components: {gsapNum},
data() {
return {
num: 0,
name: ''
}
},
props: {
list: {
type: Array,
default() {
return [];
}
},
shadowColor: {
type: String,
default() {
return 'rgba(254, 175, 87, 0.5)';
}
},
title: {
type: String,
default() {
return '总数';
}
},
total: {
type: String,
default() {
return 0;
}
},
},
mounted() {
var that = this;
const viewElem = document.body;
// 监听窗口变化,重绘echarts
const resizeObserver = new ResizeObserver(() => {
setTimeout(() => {
that.drawEcharts();
}, 300)
});
resizeObserver.observe(viewElem);
},
computed: {
colorList: function () {
var that = this;
var colorList = []
that.list.forEach((type) => {
var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: type.color1
}, {
offset: 1,
color: type.color2
}])
colorList.push(color)
});
return colorList
}
},
watch: {
list() {
this.drawEcharts()
},
name(newName, oldName) {
let index = this.list.findIndex(item => item.name === newName);
if (index !== -1) {
let myChart = echarts.init(this.$refs.echarts1);
// 取消之前高亮的扇形区域
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
// 高亮当前点击的扇形区域
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index
});
}
},
},
methods: {
getName(e) {
this.name = e
this.list.forEach((type, index) => {
if (type.name == e) {
this.num = type.value
}
})
},
drawEcharts() {
var that = this
let myChart = echarts.init(this.$refs.echarts1)
window.addEventListener('resize', function () {
that.drawEcharts()
})
var colors = this.colorList
var data = []
var maxIndex = 0
var maxValue = 0
that.list.forEach((type, index) => {
if (type.checked) {
var datas = {
...type,
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: type.color1
}, {
offset: 1,
color: type.color2
}]),
}
}
}
data.push(datas)
if (type.value > maxValue) {
maxValue = type.value
maxIndex = index
that.name = type.name
that.num = type.value
that.$emit('getName', that.name);
}
}
});
var option = {
color: colors,
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置 tooltip 背景色为透明
borderColor: 'rgba(0, 0, 0, 0)',
opacity: 1,
shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
shadowBlur: 0, // 设置阴影模糊度为0，即无阴影
confine: true,
// 使用自定义的 formatter 函数
formatter: function (params) {
// params 是一个包含了当前鼠标悬浮点的所有数据的对象
return `
<div class="tooltipWin">
<h4 class="tooltipTitle">${params.name}</h4>
<p>件数： <span>${params.value}</span></p>
<p>百分比： <span>${params.percent}%</span></p>
</div>
`;
}
},
series: [
{
name: '案件类别',
type: 'pie',
roundCap: true,
radius: ['50%', '80%'],
center: ['50%', '50%'],
borderCap: 'round',
label: {
show: false,
position: 'center',
formatter: function (data) {
return data.value;
},
textStyle: {
fontSize: 36,
fontFamily: 'D-DIN, D-DIN',
fontWeight: 'bold',
color: '#FDBA51'
}
},
labelLine: {
show: false,
length: 1,
length2: 10
},
data: data
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: maxIndex
});
myChart.on('click', function (param) {
// 取消之前高亮的扇形区域
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
// 高亮当前点击的扇形区域
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: param.dataIndex
});
console.log(param)
that.num = param.value
that.name = param.name
that.$emit('getName', param.name);
});
},
}
}
</script>
<style lang="scss" scoped>
.echartsBody {
position: relative;
width: 50%;
height: calc(100% - 0px);
.echartsBody1 {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
.echartsBody2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 0px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
pointer-events: none;
.echartsTitle {
font-size: 36px;
font-family: DIN-Bold;
font-weight: bold;
font-style: normal;
color: #FDBA51;
}
}
}
</style>
<style lang="scss">
.tooltipWin {
background: rgba(0, 0, 0, 0.8);
padding: 10px;
.tooltipTitle {
font-size: 16px;
font-family: MicrosoftYaHeiSemibold;
color: #FFFFFF;
padding: 0;
margin: 0;
}
p {
font-size: 16px;
font-family: MicrosoftYaHeiSemibold;
color: #FFFFFF;
padding: 0;
margin: 0;
span {
font-size: 16px;
font-family: MicrosoftYaHeiSemibold;
color: #02E9F1;
}
}
}
</style>
自定义lengend相关代码
<template>
<div class="echartsBodys">
<echarts1 @getName="getName" title="总数" :total="total" :list="list" ref="echarts"></echarts1>
<div class="list">
<div class="listItem cur" @click="getChecked(item.name)" :class="{active:item.name==name}"
v-for="(item,index) in list" :key="index">
<div class="listIteml">
<div class="dot"
:style="'background: linear-gradient(80deg,'+item.color1+' 0%, '+item.color2+' 100%);'"></div>
<span>{{ item.name }}</span>
</div>
<div class="listItemr">
<em class="num">{{
item.value
}}</em>
</div>
</div>
</div>
</div>
</template>
<script>
import echarts1 from "./components/echarts.vue";
export default {
name: "title",
data() {
return {
name: '',
list: [
{
name: '货币',
value: 168,
color1: 'rgba(0, 168, 255, 1)',
color2: 'rgba(0, 168, 255, 1)',
checked: true
},
{
name: '调产',
value: 589,
color1: 'rgba(0, 238, 255, 1)',
color2: 'rgba(0, 238, 255, 1)',
checked: true
},
{
name: '组合',
value: 128,
color1: 'rgba(255, 219, 113, 1)',
color2: 'rgba(255, 219, 113, 1)',
checked: true
},
{
name: '迁建',
value: 158,
color1: 'rgba(255, 158, 116, 1)',
color2: 'rgba(255, 158, 116, 1)',
checked: true
}]
}
},
computed: {
total: function () {
var total = 0
this.list.forEach((type) => {
total += type.value
});
return total
}
},
components: {echarts1},
methods: {
getChecked(name) {
this.name = name
this.$refs.echarts.getName(name)
},
getName(e) {
this.name = e
this.$emit('getName', e)
}
},
}
</script>
<style lang="scss" scoped>
.list {
position: relative;
width: calc(50% - 0px);
margin-left: 0px;
height: calc(100% - 0px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
.listItem {
font-size: 14px;
display: flex;
height: 30px;
margin-left: 0px;
width: calc(100% - 0px);
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
cursor: pointer;
.listIteml {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
padding-left: 10px;
}
.listItemr {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-right: 10px;
span {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
p {
font-size: 14px;
font-family: MicrosoftYaHeiSemibold;
color: #FFFFFF;
margin-left: 4px;
}
}
.dot {
width: 8px;
height: 8px;
margin-right: 10px;
flex-shrink: 0;
border-radius: 50%;
}
.dot.disabled {
background: rgba(#999, 0.8) !important;
}
span.disabled {
color: rgba(#999, 0.8) !important;
}
.num {
font-size: 20px;
font-family: DIN-Bold;
font-weight: bold;
color: #00F1F7;
font-style: normal;
}
}
.listItem.active {
background: url("./components/assets/bgAnimate.png") no-repeat;
background-size: 100% 100%;
}
}
.echartsBodys {
width: 100%;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
</style>
