在Echarts扇形图中添加点击事件
在Echarts扇形图中添加点击事件在vue中使用echartsscript 部分有这样一个需求,在echarts中点击某一块弹出列表展示数据,这个时候需要用到echarts的点击事件在vue中使用echarts<template><div class="pie" style="width:100%"><div id="pie1" style="width:100%"
·
在Echarts扇形图中添加点击事件
有这样一个需求,在echarts中点击某一块弹出列表展示数据,这个时候需要用到echarts的点击事件
在vue中使用echarts
<template>
<div class="pie" style="width:100%">
<div id="pie1" style="width:100%">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="sed1" ref="charts" style="width:100%;height: 325px"></div>
</div>
</div>
</template>
script 部分
<script>
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
import { fileCount } from "@/request/api";
export default {
name: "echarts",
data() {
return {
opinionData1: [],
title: [],
myChart: null,
};
},
methods: {
//初始化数据
initData() {
// 基于准备好的dom,初始化echarts实例
this.myChart = echarts.init(document.getElementById("sed1"));
// 绘制图表
this.myChart.setOption(
{
title: {
text: "部门统计", //主标题
x: "center", //x轴方向对齐方式
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
right: "right",
data: this.title,
},
series: [
{
name: this.title,
type: "pie",
radius: ["40%", "70%"],
center: ["50%", "60%"],
data: this.opinionData1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
},
true
);
this.myChart.off("click");
this.myChart.on("click", function(params) {
// var a = params.dataIndex
console.log(params,"我被点击了");
});
},
},
mounted() {
fileCount().then((res) => {
if (res.code == 200) {
let data = res.data;
var array = [];
data.forEach((element) => {
array.push({
name: element.pkBranchName,
value: element.fileUploadCount,
});
this.title.push(element.pkBranchName);
});
this.opinionData1 = array;
this.initData();
}
});
},
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)