echarts——饼图

需求：三级分类的饼图

1、一级分类通过左右箭头切换的方式展现
2、二级分类通过饼图的形式展现(默认不显示每块区域name，高亮时候显示name)
3、三级分类通过鼠标放在饼图某一区域上时以文字的形式呈现(自定义提示文字)

<template><div class="w100 h100"><!-- 左右切换箭头及一级分类名字 --><div><div class="title">{{ pieData[index].name }}</div><div v-if="index > 0" @click="onLeft" class="left">《</div><div v-if="index < pieData.length - 1" @click="onRight" class="right">》</div></div><div ref="pie" class="w100 h100"></div></div>
</template><script>
import { ququ } from "../../public/static/theme/ququ";
export default {data() {return {size: null, //基准字体大小——控制标题和图例的大小pieChart: null,pieData: [{name: "服装",children: [{name: "上衣",value: 100,children: [{name: "男士",value: 10,},{name: "女士",value: 30,},],},{name: "裤子",value: 210,children: [{name: "男士",value: 10,},{name: "女士",value: 30,},],},{name: "裙子",value: 400,children: [{name: "男士",value: 10,},{name: "女士",value: 30,},],},{name: "棒球服",value: 233,children: [{name: "男士",value: 10,},{name: "女士",value: 30,},],},{name: "羽绒服",value: 280,children: [{name: "男士",value: 10,},{name: "女士",value: 30,},],},],},{name: "手机",children: [{name: "apple",value: 220,children: [{name: "大屏",value: 110,},{name: "小屏",value: 30,},],},{name: "华为",value: 410,children: [{name: "大屏",value: 150,},{name: "小屏",value: 230,},],},],},],index: 0, // 当前一级分类的索引};},mounted() {/*** 需求：三级分类的饼图* 1、一级分类通过左右箭头切换的方式展现* 2、二级分类通过饼图的形式展现(默认不显示每块区域name，高亮时候显示name)* 3、三级分类通过鼠标放在饼图某一区域上时以文字的形式呈现(自定义提示文字)*/this.init();this.getData();// 监听屏幕大小变化window.addEventListener("resize", this.screenResize);// 一进来主动调取屏幕适配this.screenResize();},beforeDestroy() {window.removeEventListener("resize", this.screenResize);},methods: {// 初始化图表init() {this.$echarts.registerTheme("ququ", ququ);this.pieChart = this.$echarts.init(this.$refs.pie, "ququ");let initOption = {// 标题title: {text: "▍三级饼图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全left: 40,top: 40,textStyle: {color: "#fff",},},// 提示框设置tooltip: {trigger: "item",show: true,//  自定义提示文字formatter: (arg) => {let str = "";arg.data.children.forEach((item) => {str += `${item.name}：${item.value}<br/>`;});return str;},},// 图例legend: {show: true,top: 130,icon: "circle",textStyle: {color: "#fff",},},series: [{type: "pie",radius: "50%", // 饼图的大小center: ["50%", "50%"], // 饼图的位置——正中心label: {show: false, // 隐藏饼图每块区域的名称},// 每块区域高亮时候的样式emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},label: {show: true, //高亮时候显示每块区域的name},labelLine: {show: false, // 隐藏名字和图之间默认的一条线},},},],};this.pieChart.setOption(initOption);},// 切换一级分类onLeft() {this.index--;this.getData();},onRight() {this.index++;this.getData();},// 获取并处理数据，然后渲染图表getData() {let dataOption = {series: [{name: this.pieData[this.index].name,data: this.pieData[this.index].children,},],};// 生成图表this.pieChart.setOption(dataOption);},// 监听屏幕变化screenResize() {this.$nextTick(() => {// 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸let width = this.$refs.pie.offsetWidth;this.size = (width / 100) * 3.6; // 定义一个基准尺寸// 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候setlet screenOption = {title: {textStyle: {fontSize: this.size,},},legend: {itemWidth: this.size / 2,itemHeight: this.size / 2,},};this.pieChart.setOption(screenOption);// 更新图表this.pieChart.resize();});},},
};
</script><style scoped lang="less">
.left,
.right,
.title {color: #fff;position: absolute;z-index: 999;
}
.left {left: 60px;top: 50%;transform: translateY(-50%);
}
.right {right: 60px;top: 50%;transform: translateY(-50%);
}
.title {right: 60px;bottom: 60px;font-size: 30px;
}
</style>

echarts——饼图相关推荐

echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
ECharts 饼图切换数据源bug 开始没数据显示切换或刷新后显示
1.出现问题原因一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
Echarts饼图实现颜色渐变
linear 实现伪弧形渐变 https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ Echarts饼图实现颜色渐变 ...
ECharts饼图实例
ECharts饼图实例 1.引入jQuery的js文件 2.引入echarts的js文件 test.html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
echarts 饼图悬浮频繁闪动
日常改bug时,发现echarts饼图鼠标悬浮上去频繁闪动,把我整的以为是后端的祸害,吓的我查来查去,最后也没找到答案,只能自己来整了,给秀儿上座,看图.看代码! 1.我之前在写代码时可能是在官网复制 ...
echarts 饼图逆时针降序排序
需求 echarts饼图,按照其每块的大小,逆时针从大到小排序,这样很清晰的看到大小关系. 实现因为饼图数据是 [{ name, value }] 这样的 JSONArray,而我们查echarts ...

echarts——饼图

需求：三级分类的饼图

echarts——饼图相关推荐

最新文章

热门文章