<template>
<div class="">
<div id="myCharts" ref="myCharts" :style="{ height: '600px' }"></div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
};
},
methods: {},
mounted() {
const myCharts = this.$echarts.init(this.$refs.myCharts);
let options = {
title: {
text: "某站点用户访问来源",
subtext: "纯属虚构",
left: "center",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myCharts.setOption(options);
myCharts.on('click', function (params) {
// 控制台打印数据的名称
console.log(params);
});
},
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
echarts饼图点击区块事件
最新推荐文章于 2024-08-03 20:32:29 发布