echarts儀表盤設(shè)置圖文實例

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:20:22

echarts儀表盤設(shè)置圖文實例

echarts儀表盤設(shè)置圖文實例:echarts 圖表中經(jīng)常需要對不同的顏色設(shè)置圖例標識不同的意義，而儀表盤的指針只存在一個值，如何表示不同顏色的意義，官網(wǎng)配置項并未給出該功能；不同段的顏色是通過axisLine->lineStyle->color來設(shè)置的；搜索了很多的資料都沒有找到用來標識各顏色段的

推薦度：

點擊下載本文 文檔為doc格式

導讀echarts儀表盤設(shè)置圖文實例:echarts 圖表中經(jīng)常需要對不同的顏色設(shè)置圖例標識不同的意義，而儀表盤的指針只存在一個值，如何表示不同顏色的意義，官網(wǎng)配置項并未給出該功能；不同段的顏色是通過axisLine->lineStyle->color來設(shè)置的；搜索了很多的資料都沒有找到用來標識各顏色段的

echarts 圖表中經(jīng)常需要對不同的顏色設(shè)置圖例標識不同的意義，而儀表盤的指針只存在一個值，如何表示不同顏色的意義，官網(wǎng)配置項并未給出該功能；

不同段的顏色是通過axisLine->lineStyle->color來設(shè)置的；

搜索了很多的資料都沒有找到用來標識各顏色段的圖例；

反復琢磨，可不可以使用有圖例的圖來強制加上這個圖例呢？

這里熟悉echarts的童鞋可能想到解決方法了；

那我們就來使用一招“移花接木”大法；

主要思想：使用柱狀圖的legend圖例，然后設(shè)置柱狀圖和儀表圖的層級，然后再隱藏柱狀圖，禁用legend的點擊事件；

注意點：

　　1.series中既有type為‘gauge’的配置項，也有type為‘bar’的配置項，而'bar'類型的配置項只要關(guān)注其legend的顏色即可；

　　2.對于柱狀圖要隱藏的項較多，必須全部設(shè)置成不顯示，其中包括軸線和分割線等；

　　3.防止奇怪的體驗最好將legend的點擊事件禁用掉；

 var option = {
 legend: { //配置legend，這里的data，要對應(yīng)type為‘bar’的series數(shù)據(jù)項的‘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，必須都設(shè)置成不顯示 {
 type : 'category',
 data : [],
 axisLine: {
 show: false },
 splitLine:{
 show: false },
 splitArea: {
 interval: 'auto',
 show: false }
 }
 ],
 yAxis : [ //這里有很多的show，必須都設(shè)置成不顯示 {
 type : 'value',
 axisLine: {
 show: false },
 splitLine:{
 show: false },
 }
 ],
 toolbox: { 
 show: false,
 },
 series : [ 
 {
 name:'刻度盤',
 type: 'gauge',
 startAngle: 180,
 endAngle: 0,"center": ["50%", "80%"], //整體的位置設(shè)置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: '灰色內(nèi)圈',
 type: 'gauge',
 z:2,
 radius: '110%',
 startAngle: 180,
 endAngle: 0,"center": ["50%", "80%"], //整體的位置設(shè)置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%', //不顯示，可以隨便設(shè)置 data:[0],
 itemStyle: {
 normal: {
 color: '#41C468', //這里的圖例要注意，顏色設(shè)置和儀表盤的顏色對應(yīng)起來 }
 }
 },
 {
 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',
 }
 }
 }
 ]
 }

最終的效果圖如下，是不是很簡單呢。