echarts饼图 mouseover中间部分文字样式设置，默认显示总和

需求描述

需求要求利用echarts的饼图对企业数量进行统计，要求默认饼图中间显示全部企业数量，鼠标移动上去，则显示对应部分的企业数量，并且设置样式。

效果图

具体代码

let TrendCharts = this.$echarts.init(document.getElementById("trendChart1"));var options = {//设置主副标题title: {show: true,text: "企业数量", //主标题subtext: this.totalNum, //副标题：企业数量值，此处用标题方式来显示left: "center",top: "40%", z: 0,zlevel: 100,textStyle: { //设置主标题的 样式textAlign: "center",color: "rgba(145,213,255,0.85)",fontSize: 14},subtextStyle: { //设置副标题的样式textAlign: "center",color: "#fff",fontSize: 30,fontWeight: 600}},tooltip: {show: false, //需要关闭默认的鼠标悬浮显示样式},//图例legend: {show: false},//设置图表撑满整个画布grid: {left: "0%",right: "0%",bottom: "0%",containLabel: true},series: [{name: "企业数量",type: "pie",//自定义颜色color: this.pieColor,radius: ["60%", "90%"], //饼图大小avoidLabelOverlap: false,legendHoverLink: false, //移入leged不显示在中间textAlign: "center",label: {normal: {show: true,position: "center", //文字显示在中间align: "center", verticalAlign: "middle",textStyle: {//设置文字样式fontSize: "0"}},emphasis: {show: true, //文字至于中间时，这里需为truetextStyle: {//设置文字样式fontSize: "14",color: "rgba(145,213,255,0.85)"},formatter: function({ data }) {//此处重点，其中定义的 b,c,d 是用于下面的 rich来单独设置样式，因为这里不支持 HTML标签let html = `{b| ${data.name}} \n {c|${data.value}}  {d|${data.percent}}`;return html;},//样式设置rich: {b: {//name 文字样式lineHeight: 20,fontSize: 14,textAlign: "center",color: "rgba(145,213,255,0.85)"},c: {//value 文字样式lineHeight: 36,color: "#fff",fontSize: 30,fontWeight: 600},d: {//百分比样式fontSize: 12,color: "rgba(145,213,255,0.85)"}}}},itemStyle: {borderWidth: 2,borderColor: "#2E3E62"},labelLine: {show: false},data: this.pieData}]};TrendCharts.showLoading({text: "加载中",color: "rgba(145,213,255,0.85)", //设置转圈圈字体颜色textColor: "rgba(145,213,255,0.85)", //设置文字字体颜色maskColor: "rgba(36, 102, 175, 0.05)",zlevel: 0});TrendCharts.setOption(options);TrendCharts.hideLoading();// 自动渲染echartswindow.addEventListener("resize", () => {TrendCharts.resize();});//自定义事件，当鼠标移动上是，则设置 title 不显示TrendCharts.on("mouseover", params => {TrendCharts.setOption({title: {show: false //当鼠标移动上是，则设置 title 不显示},series: {label: {emphasis: {rich: {c: {//获取 该区域的颜色值，为对应的企业数字体设置颜色color: params.color}}}}}});});//自定义事件TrendCharts.on("mouseout", params => {TrendCharts.setOption({title: {show: true  //当鼠标移出 饼图区域时，则打开 title显示}});});

echarts饼图 mouseover中间部分文字样式设置，默认显示总和相关推荐

ubuntu设置始终亮屏_如何设置默认显示亮度？
问题描述是否可以设置默认显示亮度,以便每次重启时都不必使用re-adjust?我的笔记本电脑显示屏已经在登录屏幕上消失了,因为它每次都以100%的亮度启动. 最佳解决思路审查解决方案并提供(希望) ...
CLion设置默认显示汇编指令的格式
CLion进行调试时可以查看反编译的汇编指令. 常见汇编指令格式有 Intel 和 ATT 下图是att的显示格式下图intel显示 CLion在断点调试是默认是att,即使在当前debug环境下设 ...
wdatepicker设置默认显示时间
wdatepicker设置默认显示时间第一步,首先在html页面设置使用了wdatepicker的框,并写出框的id和name 第二步,根据id为时间框设置点击事件第三步,根据点击事件设置为时间框 ...
安卓版Edge设置默认显示为电脑版布局
前言安卓版Edge可以临时显示电脑版布局,同时可以设置默认显示为电脑版布局,该功能适用于安卓平板,设置方法如下. 临时显示电脑版布局打开安卓版Edge,选择更多,选择查看桌面网站,即可临时显示电脑 ...
echarts 文本标签配置 label文字样式
字体基本样式设置:fontStyle.fontWeight.fontSize.fontFamily. 文字颜色:color. 文字描边:textBorderColor.textBorderWidth. ...
CSDN-markdown 文字样式设置（字体, 大小, 颜色, 高亮底色）与数学表达式设置
文字样式1(内嵌HTML) Size:规定文本的尺寸大小,取值从 1 到 7 ,浏览器默认值是 3. <font face="黑体">我是黑体字</font> ...
android高德地图设置默认显示位置
开始最近在搞高德地图开发,发现每次在定位到当前位置之前,总会先默认显示北京,这样给人感觉不是很好,因为我们的项目主要是在哈尔滨市用,所以希望,在使用地图时显示当前位置之前默认先显示哈尔滨市代码 a ...
Echarts饼图中间添加文字
第一种方式 getAlarmStatus() {var myChart = echarts.init(document.getElementById('alarmStatus'));var optio ...
word 2013 修订模式下修订的文字样式设置
如下图所示: 转载于:https://blog.51cto.com/keilantra/1768712

echarts饼图 mouseover中间部分文字样式设置，默认显示总和

需求描述

echarts饼图 mouseover中间部分文字样式设置，默认显示总和相关推荐

最新文章

热门文章