echarts 图表中经常需要对不同的颜色设置图例标识不同的意义，而仪表盘的指针只存在一个值，如何表示不同颜色的意义，官网配置项并未给出该功能；
不同段的颜色是通过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: { // 其余属性默认使用全局文本样式，详见textstylefontweight: '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',
}
}
}
]
}
最终的效果图如下，是不是很简单呢。
以上就是echarts仪表盘设置图文实例的详细内容。