Echarts版本:4.8.0,鼠标移入饼图时突出高亮,主要在series里配置
需求:
鼠标移入:
实现:
<template>
<div
id="pie-highlight"
style="width: 700px; height: 300px; background: #020f2b"
></div>
</template>
<script>
export default {
data() {
return {};
},
created() {},
mounted() {
this.initChart();
},
methods: {
initChart() {
let option = {
tooltip: {
show: true,
textStyle: {
color: "#fff",
},
},
legend: {
textStyle: {
color: "#fff",
},
icon: "rect",
itemHeight: 10,
itemWidth: 10,
top: 10,
},
series: [
{
type: "pie",
// radius: "70%", //圆形 往外突出高亮
radius: ["45%", "70%"], // 圆环 radius: [a, b] (a为内圆,b为外圆) a > b高亮时向内收缩,b>a高亮时往外突出
center: ["50%", "50%"],
// hoverAnimation: false,//鼠标移入高亮,默认移入高亮
// legendHoverLink:false,//鼠标移入图例时对应高亮,默认移入高亮
itemStyle: {
normal: {
//边框
borderWidth: 5,
borderColor: "#003359",
},
},
label: {
show: false,
},
data: [
{ value: 1048, name: "搜索引擎" },
{ value: 735, name: "直接访问" },
{ value: 580, name: "邮件营销" },
{ value: 484, name: "联盟广告" },
{ value: 300, name: "视频广告" },
],
labelLine: {
show: false,
},
},
],
};
let myChart = this.$echarts.init(
document.getElementById("pie-highlight")
);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
以上