不同段的颜色是通过axisLine->lineStyle->color来设置的;
搜索了很多的资料都没有找到用来标识各颜色段的图例;
反复琢磨,可不可以使用有图例的图来强制加上这个图例呢?
这里熟悉echarts的童鞋可能想到解决方法了;
那我们就来使用一招“移花接木”大法;
主要思想:使用柱状图的legend图例,然后设置柱状图和仪表图的层级,然后再隐藏柱状图,禁用legend的点击事件;
注意点:
1.series中既有type为‘gauge’的配置项,也有type为‘bar’的配置项,而"bar'类型的配置项只要关注其legend的颜色即可;
2.对于柱状图要隐藏的项较多,必须全部设置成不显示,其中包括轴线和分割线等;
3.防止奇怪的体验最好将legend的点击事件禁用掉;
var option = { legend: { //配置legend,这里的data,要对应type为‘bar’的series数据项的‘name’名称,作为图例的说明 data:['预热期','导入期','成长期','成熟期','衰退期'], selectedMode:false, //图例禁止点击 top:20, itemWidth:23, itemHeight:6, textStyle: { color: '#707070', fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'sans-serif', fontSize: 11, }, }, grid: { z:1, //grid作为柱状图的坐标系,其层级要和仪表图层级不同,同时隐藏 show:false, left: '-30%', right: '4%', bottom: '3%', containLabel: true, splitLine:{ show: false //隐藏分割线 }, }, xAxis : [ //这里有很多的show,必须都设置成不显示 { type : 'category', data : [], axisLine: { show: false }, splitLine:{ show: false }, splitArea: { interval: 'auto', show: false } } ], yAxis : [ //这里有很多的show,必须都设置成不显示 { type : 'value', axisLine: { show: false }, splitLine:{ show: false }, } ], toolbox: { show: false, }, series : [ { name:'刻度盘', type: 'gauge', startAngle: 180, endAngle: 0, "center": ["50%", "80%"], //整体的位置设置 z: 3, min: min, max: max+min, splitNumber: max, radius: '110%', axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 width: 10, color:optionUsedColors } }, axisTick: { // 坐标轴小标记 length: 19, // 属性length控制线长 splitNumber: 2, lineStyle: { // 属性lineStyle控制线条样式 color: '#cdcdcd' } }, splitLine: { // 分隔线 length: 20, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: 'auto' } }, axisLabel: { textStyle: { color:'#454A57' } }, pointer: { show: true, length: '70%', width: 5, }, itemStyle:{ normal:{ color:'#454A57', borderWidth:0 } }, title: { //仪表盘标题 show: true, offsetCenter: ['0', '20'], textStyle: { color: '#444A56', fontSize: 12, fontFamily: 'Microsoft YaHei' } }, detail: { textStyle: { fontSize: 12, color: '#707070' }, offsetCenter: offsetConfig, formatter: function(){ return '上市时间\n'+time; } }, data:[{value: (status/100*max || 0), name: '当前阶段'}] }, { name: '灰色内圈', type: 'gauge', z:2, radius: '110%', startAngle: 180, endAngle: 0, "center": ["50%", "80%"], //整体的位置设置 splitNumber: 4, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [ [1, '#F2F4F8'] ], width: 24, opacity: 1, } }, splitLine: { //分隔线样式 show: false, }, axisLabel: { //刻度标签 show: false, }, axisTick: { //刻度样式 show: false, }, detail : { show:false, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: 'bolder', fontSize:12 } }, }, { name:'预热期', type:'bar', barWidth: '60%', //不显示,可以随便设置 data:[0], itemStyle: { normal: { color: '#41C468', //这里的图例要注意,颜色设置和仪表盘的颜色对应起来 } } }, { name:'导入期', type:'bar', barWidth: '60%', data:[0], itemStyle: { normal: { color: '#70C1B3', } } }, { name:'成长期', type:'bar', barWidth: '60%', data:[0], itemStyle: { normal: { color: '#00A1E9', } } }, { name:'成熟期', type:'bar', barWidth: '60%', data:[0], itemStyle: { normal: { color: '#EE4444', } } }, { name:'衰退期', type:'bar', barWidth: '60%', data:[0], itemStyle: { normal: { color: '#DCF2C4', } } } ] }最终的效果图如下,是不是很简单呢: