echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示

项目中遇到这种需求,有两种解决方法,
一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字

graphic: [{ //环形图中间添加文字type: 'text', //通过不同top值可以设置上下显示left: 'center',top: '55%',style: {text: join,textAlign: 'center',fill: '#1eb4ff', //文字的颜色width: 30,height: 30,fontSize: 14,fontFamily: "Microsoft YaHei",}}]

ps:不过这样写有个弊端,就是必须写4个环图并配置属性,非常麻烦.于是提供下面一种做法.
二.搜索echarts中的series属性,可以配置多个饼图或者环图,不过此时它们会重叠在一起,然后搜索series.center属性,可以在配置series时,改变每个图的位置.结合下面代码的第一个series配置看.

let dom = this.$refs.classDataPic
let myChart = this.$echarts.init(dom)
myChart.setOption({tooltip: {  //此处配置鼠标移动对应区域时的黑色弹框trigger: 'item',formatter: '{b}: {c} ({d}%)'},series: [{name: '发布课堂',     //配置formatter时候会用到(就是{a})type: 'pie',radius: ['45%', '55%'],    // 配置饼图和环图的内圆和外圆的大小center: ['13%', '50%'],   //配置图形的位置,前面一个是x轴,后面一个是y轴,'50%'代表是水平居中avoidLabelOverlap: false,label: {normal: {show: false,    //默认显示关闭,如果此处是true,则数据重叠position: 'center',    //显示的位置,center是饼环图中间显示,formatter: `{a}\n${7}`     //此处的7为假数据,其实就是下面data数组中的value相加,都可以取到的,但是此处都是模拟数据},emphasis: {show: true,}},data: [{ value: 5, name: '公开课', label: { show: true } },  { value: 2, name: '私有课', label: { show: false } },//此处label: { show: false }就是不让饼环图中间的数据改变,因为黑色消息窗可以改变,此处固定文本就行了.]},{name: '总用户数',type: 'pie',radius: ['45%', '55%'],center: ['38%', '50%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',formatter: `{a}\n${50}`},emphasis: {show: true,}},data: [{ value: 18, name: '男', label: { show: true } },{ value: 30, name: '女', label: { show: false } },{ value: 2, name: '未知', label: { show: false } }]},{name: '实验数',type: 'pie',radius: ['45%', '55%'],center: ['63%', '50%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center',formatter: `{a}\n${18}`},emphasis: {show: true,}},data: [{ value: 12, name: '在线实验', label: { show: true } },{ value: 6, name: '非在线实验', label: { show: false } }]},{name: '作业情况',type: 'pie',radius: ['45%', '55%'],center: ['88%', '50%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center',formatter: `{a}\n${12}`},emphasis: {show: true,}},data: [{ value: 4, name: '准时提交', label: { show: true } },{ value: 8, name: '超时提交', label: { show: false } }]}]})

echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示相关推荐

3d 饼环图 echarts实现
使用echarts 实现3d 饼环图 <template><div class="water-eval-container"><div id=&quo ...
数据可视化 d3操作汇总（二）：圆弧、饼图、环图、玫瑰图绘制
一.圆环绘制圆环绘制必须要先有一个弧生成器,必须提供的参数有起始角度和中止角度,例如: var dataset = { startAngle: 0 , endAngle: Math.PI * 0.7 ...
有向无环图DAG 拓扑排序代码解释
目录: DAG定义举例描述实际运用算法描述算法实战算法可视化定义在图论中,由一个有向无环图的顶点组成的序列,当且仅当满足下列条件时,称为该图的一个拓扑排序(英语:Topological ...
echarts图例板块默认高亮与鼠标移入高亮实现
主要先设置 emphasis.scale= true 开启鼠标移入高亮动画,利用dispatchAction方法设置默认高亮组块, 再检测鼠标的mouseover时间,当检测到鼠标悬停事件,取消默认 ...
html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和 ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
使用Echart绘制3D饼环图、仪表盘、电池图
3D饼环图参考博客 https://blog.csdn.net/m0_67266787/article/details/123155878 插件引入 echarts.js echarts-gl.mi ...
DAGNN：有向无环图神经网络
1.综述: DagNN是用来代替SimpleNN的CNN wrapper.它是面向对象的,并且允许采用有向无环图构建神经网络.与SimpleNN相比,DagNN速度有点慢但是更加灵活. 一个DAG对象 ...

echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示

echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示相关推荐

最新文章

热门文章