echarts常用方法,饼图切换圆环中文字(三)

在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件。误区是,鼠标移动到环上重新渲染option,以切换内部的文字。重新渲染option的做法,不能保存你原有的legend状态。

找到一个办法就是,只渲染环内部文字的label。

主要代码如下:

option = {
    series : [
        {
          ...
          type:‘pie‘,
          ...
          label: {
                    show: true,
                    position: ‘outside‘,
                    formatter:function(params){
                        let nm = params.name,per = Number(params.percent).toFixed(2) ;
                        return [`{a|${nm}}\n`,`{b|${per}%}`]
                    },
                    rich: {
                        a: {
                            color:‘#fff‘,
                            fontSize:14,
                            lineHeight: 20
                        },
                        b: {
                            color:‘yellow‘,
                            fontSize:14,
                            foneWeight:‘bold‘
                        },
                    }
            },
    ...
}]
myChart.on(‘mouseover‘, (params) => {
    currName = params.name;

    let op = myChart.getOption();
    if(params.seriesIndex === 0){
        let _label = {
            normal:{
                show: true,
                position: ‘center‘,
                formatter: [
                    `{a|${params.name}}`,
                    `{b|${params.percent + "%"}}`
                ].join(‘\n‘),
                rich: {
                    a: {
                        color:‘#fff‘,
                        fontSize: 18,
                        lineHeight: 30
                    },
                    b: {
                        color:‘yellow‘,
                        fontSize: 20,
                        foneWeight:‘bold‘,
                        textShadowBlur: 20,
                        textShadowColor: ‘yellow‘
                    },

                }
            }
        }

        op.series[2].label = _label;
        myChart.setOption(op,true)

    }

})

提供一个自己写的demo链接:https://gallery.echartsjs.com/editor.html?c=xdysA_7PCd,如果对你有帮助,点个赞给点鼓励吧~

原文地址:https://www.cnblogs.com/lmxHome/p/10768906.html

时间: 2024-10-29 17:22:25

echarts常用方法,饼图切换圆环中文字(三)的相关文章

select中文字垂直居中解决办法

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对select的height.padding.line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0.height.no.padding.100.no.height.no.padding,结果如  链接图片各浏览器DEMO外观 我们可以得

进程切换switch_to宏第三个参数分析

进程切换一般都涉及三个进程,如进程a切换成进程b,b开始执行,但是当a恢复执行的时候往往是通过一个进程c,而不是进程b. 注意switch_to的调用: switch_to(prev,next,prev), 可以看到last就是prev 调用方法如下:进程A->进程B switch_to(A,B,A)主要有三个参数:输入参数两个:prev:切换前的进程 next:切换后的进程 输出参数一个:last:切换前进程  注意这三个变量都是局部变量,在系统栈中,所以切换到另一进程后变量的值不会改变.进程

VC改变CListCtrl 表格中文字颜色,和背景颜色。

(1)首先需要自定义一个类,派生自CListCtrl.如下图: (2)然后在派生类的头文件中声明一个成员函数,如下图: (3)在源文件中实现该成员方法,如图: (4)在源文件中做消息映射,如图: 这时候,当CListCtrl控件在绘制的时候,就会有NM_CUSTOMDRAW消息被我们的函数截获. 我们就在实现函数中筛选出CListCtrl控件应该设置内容(文字颜色,文字背景颜色)的时机,对绘制的内容做相应的修改即可. // ColorListCtrl.cpp : implementation f

ECharts 环形饼图 动态获取json数据

ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100%; height:400px;"></div> 二.js部分 <script type="text/javascript"> function loadOneColumn() {     var myChart = echarts.init(doc

如何通过迅捷OCR文字识别软件识别提取图中文字

工作中识别提取图中文字的问题,也是时常会发生的,就比如说你的领导给了你一些图片文件让你将上面的文字录入到文档里面,这时候你该不会傻傻的手动录入吧,这种方法工作效率太低了,下面小编将教大家一种通过使用文字识别工具就可以识别提取图中文字的方法,一起来学习下. 辅助工具:迅捷OCR文字识别软件 步骤一.首先我们需要在电脑中保存一张需要识别的图片,因为使用到的是一款PC端的软件,所以整个步骤都是在电脑中进行的. 步骤二.打开文字识别工具,会出现一个添加文件的选项,点击退出按钮将其关闭,因为这个窗口跳转的

如何使用迅捷OCR文字识别软件识别提取图中文字

识别提取文字的问题相信是很多小伙伴都经历过的,一般遇到这种问题,很多人都选择了用电脑打字进行转换,这种方法比较的耽误时间,其实除了这种方法我们还有其它的选择,就是通过借助文字识别软件识别提取图片中的文字,具体怎样去操作呢?一起来学习下. 使用工具:电脑 迅捷OCR文字识别软件 实用系数:☆☆☆☆☆ 推荐理由:软件采用先进的OCR识别技术,识别精度高,能够轻松实现文档数字化,操作起来简单易上手. 操作步骤: 步骤一.准备好一张带有文字的图片在电脑中,然后打开文字识别软件,鼠标点击上方图片局部识别板

怎样识别图中文字,实现图片转文字的方法

如何识别图中文字呢?相信工作中有很多小伙伴都有遇到过图片转文字的问题,那么除了用电脑打字的方式进行解决,还有什么简单的方法可以实现这一操作呢?下面小编就来教大家一种使用OCR文字识别软件将图片转文字的方法. 操作步骤: 第一步.因为使用到的是PC端的工具,所以接下来的步骤都是在电脑中完成的,首先将OCR文字识别软件打开. 第二步.点击软件上方导航栏图片局部识别板块. 第三步.进入图片局部识别板块后,将所需转换的图片拖曳到界面中心添加图片的位置. 第四步.完成图片的添加后,可以通过下方一排小工具来

JavaScript中的三种弹出对话框

JavaScript中的三种弹出对话框 *****本文来自互联网****** 学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框.avascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom

js oop中的三种继承方法

JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法.(继承的两方,发生在两个类之间)> 一.通过object实现继承 1:定义父类 function Parent(){} 2:定义子类 funtion Son(){} 3:通过原型给Object对象添加一个扩展方法. Object.prototype.customExtend = function(p