Vue 中 Echarts绘图 在一个圆环图或多个圆环图中间插入图片 插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑，没有跳出来，导致自己在这个问题上搞了很久，今天把这个坑写出来，避免大家都去踩这个坑啊~
在Vue项目结构中，如果引入图片的url不成功，记住，请一定要试一试在路径外加上 require() ！！！
也就是： require(../../images/test.png)
恩~~~现在开始讲一下具体的实现：
（1）首先看一下我们要实现第一种只有一个圆环图中间插入图片，插入文字的效果（文字和图片都要居中）：
话不多说，接下来是代码：
在Echarts绘图中插入graphic：
graphic: {elements: [{type: 'image',style: {image: require('../../images/test.png'),width: 25,height: 30},left: 'center',top: '70'},{type: 'text',left: 'center', // 相对父元素居中top: '110', // 相对父元素上下的位置style: {fill: '#333333',text: ['总人数'],font: '12px Arial Normal',}}]},搞定！！！现在看起来还挺简单的，当时还是弄了老久咯~毕竟初出茅庐嘛嘻嘻~~~
（2）第二种是同时画了两个图，中间插入图片和文字的效果：
最开始以为也可以采用graphic的方法，但是后面试了一下不行呀，我要实现的是每个圆环对应不同的图片，唉呀妈呀脑瓜疼呀脑瓜疼，然后反复的在百度上搜索，在echarts官网上看实例看官网（顺便插播一下很好用的Echarts Gallery，上面有很多的Echarts图都可以参考总有一款适合你滴，而且可以直接修改看效果，果然还是挺强大的呀，佩服之心油然而生：）链接http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all），终于功夫不负有心人呀，在不断的摸爬滚打中总算是守得云开见月明啦！！！！！
先来看一看我们实现的效果图：
在这里插播说明一下如何在一个图中绘制两个或者更多个圆环图，就是series写成数组的形式，每一个图相当于是一个对象，分别绘制，在调一下位置就可以。
重点来了！！！
那就是如何每一个圆环图的中间插入对应的不同的图片呢，我找到的一种解决办法，就是在series data里面追加一个专门放图片和文字的对象，代码放出来：
series: [{name: '消费情况',type: 'pie',radius: ['24%', '35%'],center: ['25%', '45%'],avoidLabelOverlap: false,hoverAnimation: true,label: {normal: {formatter: function(value){var arr = [value.data.name,'￥' + '{b| }' +value.data.value].join('\n')return arr},rich: {b: {fontSize: 14,lineHeight: 33},}},},labelLine: {normal: {show: true}},data: [{value: self.one_data1,name: '1啊'},{value: self.one_data2,name: '2啊'},{value: self.one_data3,name: '3啊'},{value: self.one_data4,name: '4啊'},{tooltip: {show:false, //取消鼠标放上去时会显示信息的样式trigger: 'item',},label: {normal: {formatter: ['{c| }','{b|总消费}',].join('\n'),position: 'center', //让文字居中show: true,rich: {b:{fontSize: '14px',fontWeight: 'bold',color: '#333333',lineHeight:'26'},c: {backgroundColor: {image: require('../../images/总消费额.png'),},height: 34,width:35,left:'center' //让图片居中},}} }},]},{name: '消费情况',type: 'pie',radius: ['24%', '35%'],center: ['75%', '45%'],avoidLabelOverlap: false,hoverAnimation: true,label: {normal: {formatter: function(value){var arr = [value.data.name,'￥' + '{b| }' + value.data.value].join('\n')return arr},rich: {b: {lineHeight: 33},}},},labelLine: {normal: {show: true}},data: [{value: self.two_data1, name: '1啊'},{value: self.two_data2, name: '2啊'},{value: self.two_data3, name: '3啊'},{value: self.two_data4, name: '4啊'},{name:'总消费',tooltip: { show:false, //取消鼠标放上去时会显示信息的样式trigger: 'item',},label: {normal: {formatter: ['{c| }','{b|当月消费}',].join('\n'),position: 'center', //让文字居中show: true,rich: {b: {fontSize: '14px',fontWeight: 'bold',color: '#333333',lineHeight:'26'},c: {backgroundColor: {image: require('../../images/消费.png'),},height: 30,width:30,left:'center', //让图片居中},}}}},]}]这样写图片和文字就可以定位到各自的圆环中，但是有一个问题就是，这样的图片和文字会附带上鼠标放上去就有文字提示的效果，所以这个的解决办法就是将tooltip:设置显示show为false就可以啦~（代码中有标注！！）
这是一个程序媛在最近用echarts绘图中用到的问题，因为不仅要简单的考虑绘图，还要同时考虑浏览器大小的兼容问题，百度了很多，不断的修改尝试写出来的，这个过程是十分的掉头发的，但是结果让人觉得掉的头发都是有价值的！啊哈哈哈！有什么不对的地方也请各位大佬多多指教哦~~
Vue 中 Echarts绘图 在一个圆环图或多个圆环图中间插入图片 插入文字（考虑到浏览器大小兼容问题）相关推荐
- vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
- vue 中 echarts 中国地图
我们先来看一下效果 说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面 没有 map ...
- 深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
- vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行 项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
- Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示 效果图 代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
- 向pdf文件中插入图片及文字 java实现
向pdf文件中插入图片及文字 引入itextpdf相关依赖 <!-- https://mvnrepository.com/artifact/com.itextpdf/itextpdf --> ...
- vue中echarts使用记录
1. echarts的使用 安装 npm i -S echarts@4.9.0 引入 main.js中引入(版本4.9.0) import Echarts from 'echarts' Vue.pro ...
- vue中echarts饼图实现循环高亮效果
1.首先echarts绘图需要有个盒子来盛它 这就是那个盒子 <div class="echarts" ref='topPie'></div> 在data中 ...
- vue中echarts使用案例：饼图（可直接使用）
目录 功能.效果图: 代码实现 1.下载echarts包:终端运行 2.代码 3.运行项目:终端运行 4.可能遇到的错误 具体代码详解: 功能.效果图: 1.点击对应模块,放大并显示数据 2.点击下方 ...
最新文章
- redis zse如何取值_你真的懂redis的數據結構了嗎？redis內部數據結構和外部數據結構揭秘...
- 传统公司部署OpenStack（t版）简易介绍（二）——Keystone组件部署
- 软件文档 服务器上,服务器上需要什么软件
- 求1到100的数字累加和（python）
- C++优先队列priority_queue详解
- 南阳oj a+b问题
- unity ui小技巧
- 如何修复 Ubuntu 上“...script returned error exit status 1”的错误
- JAVA程序设计（学堂在线-清华大学） 课后练习题（更新）
- FPGA——1位全加器的实现
- JAVA长连接与短连接
- PHP格式化 插件 vs code
- org.apache.kafka.clients.consumer.OffsetOutOfRangeException: Offsets out of range with no configured
- WannaCry感染文件恢复方法_企业再也不用愁了！
- zabbix_sender安装和使用
- python九九乘法口诀_Python3 九九乘法口诀(99乘法口诀)
- 龟背驼腰下一句更精彩
- 无线网络渗透测试（一）基础知识
- linux mount u盘 exfat,CentOS 挂载 exfat 和 FAT32格式的U盘
- 计算机局域网打不开怎么办,192.168.0.1打不开怎么办 192.168.0.1打不开解决方法【介绍】...