双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —

用echarts设置仪表盘的富文本样式失效,麻烦大神看看

Ckuangf Ckuangf 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

这是使用echarts实例自己写的,代码如下:这一段是可以实现富文本效果,显示值的字体大小和%的大小是不一样的
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {
formatter: '{a|{value}}{b|%}',
rich: {
a: {
fontSize:30
},
b:{
fontSize:10
}
}
},
data: [{value: 50, name: '完成率'}]
}
]
};

setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);

这一个是我自己写在js中的,结果是失效的,代码如下:
var option = {
series : [
{
name: title,
type: 'gauge',
radius: '100%',
min:"",
max:"",
endAngle:-45,
splitNumber:5,
axisLine: {
lineStyle: {
width: 0,
color: [[0.33, '#A3E06B'],[0.66, '#F9B530'],[1, '#ff8f83']],
}
},
axisTick: {
length:6,
lineStyle: {
color: 'auto'
}
},
axisLabel:{
formatter :function(params){
var temp = params.toFixed(1);
return temp;
},
textStyle: {
fontSize:_fontSize-4
}
},
splitLine: {
length:6,
lineStyle: {
color: 'auto'
}
},
pointer: {
width:3
},
detail: {
formatter: '{a|{value}}{b|%}',
rich: {
a: {
color: 'blue',
fontSize:30
},
b:{
fontSize:10
}
},
fontWeight: 'bolder',
textStyle:{
fontSize:_fontSize
},

offsetCenter :[0,'80%']

},
data:[{value:data}]
}
]
};
...全文

相关推荐

html5 echarts汽车仪表盘图表动画特效

html5 echarts汽车仪表盘图表动画特效

Ai部落_智能工具大全

echarts 实例 地图 仪表盘

echarts实例,其中包含经典的地图实例可以下钻,也包含了仪表盘实例

涼水泡茶

利用Echarts制作不规则刻度的仪表盘图表实例

Echarts的仪表盘组件是一个比较炫酷的图表,能瞬间提升页面B格。但是默认的仪表盘组件的刻度都是按照设置的最大值均匀分布的。而实际应用中很多场景需要将部分数值区间放大显示到仪表盘上,比如仪表盘前面 50% 显示 0-10 的数值范围后面 50% 就显示 10-50 的范围。这种不规则的刻度不能直接调用 Echarts 提供的方法。需要将数据根据需求进行转换。本资源代码解决了不规则刻度的需求,提供了通用的数据转换方法,及可运行的实例。 实现效果请参考:https://blog.csdn.net/evanyanglibo/article/details/114010213

_老杨_

ECharts 样式设置

ECharts 样式设置 ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。 颜色主题 ECharts4 开始,除了默认主题外,内置了两套主题,分别为 light 和 dark。 使用方式如下: 实例 var chart = echarts.init(dom, 'light'); 或者 var chart = echarts.init(dom, 'dark'); 另外,我们也可以在官方的 如果主题保存为 JSON 文件,那么可以自行加载和注册。 比如上图中我们选中了提个主题,将 JSON 代码保存为 wonderland.json。 实例 //主题名称是 w

weixin_38693084

Vue中使用Echarts仪表盘展示实时数据的实现

在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下。 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。 第一步: 基于准备好的dom,初始化echarts仪表盘实例。 第二步: 我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中 父组件中 子组件中

weixin_38745891
评论
收藏 已收藏
分享
返回顶部
Ckuangf
HTML5 43,737 成员 5,573 内容