echarts 饼图中心添加图片

需求

在这里插入图片描述

问题 - 暂时无法解决(如果图标居中不存在该问题)

由于此处饼图位置不处于当前 echarts 图表容器的中心位置,而是偏左一点,我们需要设置:

  1. 中心图片所在靠左位置【见 - 主要代码1】官方手册 https://echarts.apache.org/zh/option.html#graphic.elements-image.left
  2. 饼图所在靠左位置【见 - 主要代码2】官方手册 https://echarts.apache.org/zh/option.html#series-pie.radius

【主要代码1】【主要代码2】需要同时修改 距左侧距离:

  1. 固定值 的话浏览器窗口过大 时饼图过大,会导致饼图左侧部分区域 超出
    在这里插入图片描述
  2. 百分比 的话中心图片的距左百分比和饼图距左百分比 对应不上 (中心图片百分比参照容器计算有问题),会导致错位。(也会超出,但此处错位是主要问题)
    在这里插入图片描述

代码

<template><div id="AnomalyStatisticsEcharts" />
</template><script>
export default {name: 'AnomalyStatisticsEcharts',components: {},props: {theme: {type: String,required: true},dataList: {type: Array,// required: truedefault: () => {return [{ value: 20, name: '测试1', pre: '10' },{ value: 20, name: '测试2', pre: '10' },{ value: 20, name: '测试3', pre: '10' },{ value: 20, name: '倒计时社保卡接收不到三部分但实际福克斯', pre: '10' },{ value: 20, name: '测试5', pre: '10' },{ value: 20, name: '测试6', pre: '10' },{ value: 20, name: '测试7', pre: '10' }]}}},data() {return {Echarts: null}},computed: {options() {return {graphic: {/*** 【主要代码】图形中心展示图片*/elements: [{type: 'image',style: {image: require('@/assets/images/home/home_pie_center.png'), // 图片地址width: 120,height: 120},// left: '18.5%',left: '60', // 【主要代码1】top: 'center'}]},title: {show: !this.dataList.length,text: '暂无数据',left: 'center',top: 'center',textStyle: {color: this.theme === 'light-theme' ? '#000' : '#fff'}},tooltip: {trigger: 'item'},grid: {left: 0},legend: {type: 'scroll',top: '5%',right: 0,orient: 'vertical',itemGap: 14,itemWidth: 14,formatter: (name) => {for (let i = 0; i < this.dataList.length; i++) {if (this.dataList[i].name === name) {const count = this.dataList[i].valueconst percent = `${this.dataList[i].pre}%`return `{name| ${name}} {count| ${count} |} {percent| ${percent}} `}}},textStyle: {// rich放在textStyle里面rich: {name: {fontSize: 14// width: 100},count: {fontSize: 14},percent: {fontSize: 14}}}},series: [{name: '异常点统计分析',type: 'pie',radius: ['70%', '90%'],// center: ['25%', '50%'],center: ['120', '50%'], // 【主要代码2】avoidLabelOverlap: false,itemStyle: {// borderRadius: 10,borderWidth: 2,borderColor: '#fff'},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 20,fontWeight: 'bold',renderMode: 'html',formatter: ['{b|{b}}', '{c|{c}}'].join('\n'),// formatter: (params) => {//   console.log('params----', params)//   return `<div>aaaaa</div>`// },rich: {b: {color: '#000',fontSize: 16,padding: [0, 0, 10, 0]},c: {fontSize: 32,color: '#222',fontWeight: 'bold'}}}},labelLine: {show: false},data: this.dataList || []}]}}},watch: {theme() {this.init()},dataList() {this.init()}},created() {},mounted() {window.addEventListener('resize', () => {if (document.getElementById('AnomalyStatisticsEcharts')) {this.Echarts = this.$echarts.init(document.getElementById('AnomalyStatisticsEcharts'))this.Echarts.resize()}})this.init()},methods: {init() {if (this.Echarts) {this.Echarts.dispose()}this.Echarts = this.$echarts.init(document.getElementById('AnomalyStatisticsEcharts'))this.Echarts.setOption(this.options)// 高亮let currentIndex = 0this.Echarts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: currentIndex})this.Echarts.on('mouseover', (params) => {// 取消之前高亮this.Echarts.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: currentIndex})// 获取当前高亮索引currentIndex = params.dataIndex// 设置当前高亮this.Echarts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex})})}}
}
</script><style lang='scss' scoped>
#AnomalyStatisticsEcharts {width: 100%;height: 100%;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/155716.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 优质的UI组件汇总

1、RuleView &#xff1a;Android自定义标尺控件(选择身高、体重等) 链接&#xff1a;https://github.com/cStor-cDeep/RuleView 2、DashboardView &#xff1a;Android自定义仪表盘View&#xff0c;仿新旧两版芝麻信用分、炫酷汽车速度仪表盘 链接&#xff1a;https://git…

VsCode 只有一个标签页 编辑区只能打开一个文件

产生如图所示的问题&#xff1a; 可能是不小心取消了勾选 勾选&#xff0c;Show Tabs

Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(下)

Flutter笔记 完全基于Flutter绘图技术绘制一个精美的Dart吉祥物Dash 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/arti…

木马免杀(篇三)静态免杀方法

紧接上一篇&#xff0c;是通过 cs 生成 shellcode 并直接用python 调用动态链接库执行 shellcode 。 生成后的exe文件未进行任何处理。 现在学习一些可以绕过静态免杀的方法。即将文件上传到目标不会被杀软查杀&#xff0c;但这只是静态方面。 动态免杀方面还涉及到很多东西&…

【王道代码】【3 栈和队列】

结构体定义&#xff1a; 队列操作&#xff1a;

一次cs上线服务器的练习

环境&#xff1a;利用vm搭建的环境 仅主机为65段 测试是否能与win10ping通 配置转发 配置好iis Kali访问测试 现在就用burp抓取winser的包 开启代理 使用默认的8080抓取成功 上线

【快报】正在把教学视频搬运到B站和油管

hello 大家好&#xff0c;我是老戴。 熟悉我的同学知道&#xff0c;我从14年开始录制GIS相关的教学视频&#xff0c;之前是放到优酷上给大家下载&#xff0c;后期发现很多人把视频弄下来淘宝上卖&#xff0c;然后我就把视频整体放到了我自己的网站上。 随着视频录制的数量越来…

【java学习—十】操作集合的工具类Collections(8)

文章目录 1. 操作集合的工具类&#xff1a; Collections2. 应用3. 查找、替换3.1. max 与 min3.2. 根据Comparator返回max(min) 3.3. frequency 与 replaceAll4. 同步控制 1. 操作集合的工具类&#xff1a; Collections Collections 是一个操作 Set 、List 和 Map 等集合的工具…

SpringCloud(四) Nacos注册中心

目录 一, Nacos 1.1 Nacos的安装 1.2 服务注册到Nacos 1, 引入依赖 2, 配置Nacos地址 3, 重启 4, 进行访问 二, 服务分级存储模型 2.1 分级模型 2.2 Nacos的集群配置 1, 给user-service配置集群 2, 同集群优先的负载均衡 2.3 权重配置 国内公司一般都推崇阿里巴巴…

vue3+jsx+antd的插槽写法之一

如果在jsx里面直接这样按照官方的写法是会报错的 正确写法是&#xff1a;

App测试基本流程以及注意事项

1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间&#xff0c;一般测试时间为两三周&#xff08;即15个工作日&#xff09;&#xff0c;根据项目情况以及版本质量可适当缩短或延长测试时间。 1.3测试资源 测试任务开始前&#xff0c;检查…

代购商城源码如何保障用户信息和交易数据的安全性?

多样支付方式的需求和背景 支付方式的重要性 随着电子商务的快速发展&#xff0c;支付是在线购物过程中至关重要的环节。不同用户有着不同的支付习惯和需求&#xff0c;因此一个代购商城源码需要支持多种支付方式&#xff0c;以满足用户的个性化需求。 便捷性和安全性的需求 支…