需要通过 detail 的配置项来自定义样式。 适用场景: 适用于对数据详情展示有较高视觉美观要求的场景。 在复杂的图表或者需要与整体页面风格保持一致的环境中使用。 示例代码(以仪表盘为例): javascript var option = { series: [ { name: '业务指标', type: 'gauge', detail: { formatter: '{value} ml',...
Echarts仪表盘样式设置,美化 效果如下图: image.png option={series:[{name:"业务指标",type:"gauge",center:["50%","45%"],radius:"70%",//仪表大小// startAngle: 200, //开始角度// endAngle: -20, //结束角度min:0,max:1000,data:[{value:950,name:"业务指标"}],axisLine:{show:false,li...
fontSize: 12, // 文字的字体大小,默认 5。 formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return v...
1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成‘gauge’,然后在detail中设置仪表盘详情,用于显示数据。最常用的是formatter(格式化函数或者字符串),然后可以设置data属性用来表示指针的指向。下面我们可以设置value的值为每隔2秒就随机生成一个数,然后就可以模拟显示指针的动态显示。 2. 代码展示:...
trigger:"axis",//formatter: "{b0}"+that.defaultName+":{c0}"+ this.legendName + ":{c1}",formatter:function(params, ticket, callback) {//console.log(params);that.btnList[0].num = params[0].value; that.btnList[1].num = params[0].value; that.btnList[...
目标样式: 关键词:仪表盘 难点:样式 // 仪表盘functiongetGauOption(datalist){varseries=[]series=[{name:'推荐度',type:'gauge',detail:{formatter:'{value}',textStyle:{color:'#fff',fontSize:12,}},data:datalist,axisLine:{//坐标轴线lineStyle:{// 属性lineStyle控制线条样式color:[[datalist[0]...
detail: { formatter:'{value}%', fontSize:10, offsetCenter: [0,'-15%'],//设置仪表盘下方显示内容位置 color:'#ff6700'//设置仪表盘下方显示内容文字颜色 }, axisLabel:{ show:false }, pointer: {//指针样式 show:false }, axisLine: {仪表盘轴线(轮廓线),默认true。
formatter: "{a}{b} : {c}" }, series : [ { name:'业务指标', type:'gauge', detail : {formatter:'{value}'}, //仪表盘显示数据 axisLine: { //仪表盘轴线样式 lineStyle: { width: 20, color: [[0.6, '#32CD32'], [0.8, '#FFA500'], [1, '#FF0000']], opacity:...
formatter是回调事件，比getZr().on()绑定的点击事件先执行，但每次点击formatter执行两次。由此可以通过在...
detail: { show: true,offsetCenter: [0, '60%'],formatter: '{value}%',textStyle: { fontSize: 30,color: '#169FFE',} },data: [{ value: 0,name: 'OEE'}]}]};// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(“div的id”));var color = [...