使用echarts怎么設(shè)置圖例顏色-創(chuàng)新互聯(lián)

這篇文章給大家介紹使用echarts怎么設(shè)置圖例顏色，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),虛擬空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺(tái)以及歐美等多個(gè)國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

1、圖例的顏色代碼

refresh: function (newOption) {
  if (newOption) {
  this.option = newOption || this.option;
  this.option.legend = this.reformOption(this.option.legend);
  this.legendOption = this.option.legend;
  var data = this.legendOption.data || [];
  var itemName;
  var something;
  var color;
  var queryTarget;
  if (this.legendOption.selected) {
   for (var k in this.legendOption.selected) {
   this._selectedMap[k] = typeof this._selectedMap[k] != 'undefined' ? this._selectedMap[k] : this.legendOption.selected[k];
   }
  }
  for (var i = 0, dataLength = data.length; i < dataLength; i++) {
   itemName = this._getName(data[i]);
   if (itemName === '') {
   continue;
   }
   something = this._getSomethingByName(itemName);
   if (!something.series) {
   this._hasDataMap[itemName] = false;
   } else {
   this._hasDataMap[itemName] = true;
   if (something.data && (something.type === ecConfig.CHART_TYPE_PIE || something.type === ecConfig.CHART_TYPE_FORCE || something.type === ecConfig.CHART_TYPE_FUNNEL)) {
    queryTarget = [
    something.data,
    something.series
    ];
   } else {
    queryTarget = [something.series];
   }//可以看到下面這一句commend by danielinbiti，圖例顏色先查找series是否設(shè)置了itemStyle.normal.color這個(gè)屬性進(jìn)行判斷，如果沒有，則會(huì)按照默認(rèn)的顏色設(shè)置取值。如果設(shè)置了，就按照設(shè)置的顏色取值。現(xiàn)在想設(shè)置，肯定需要在series中對(duì)應(yīng)的坐標(biāo)系中設(shè)置顏色。
 
color = this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), something.seriesIndex, something.dataIndex, something.data); if (color && something.type != ecConfig.CHART_TYPE_K) { this.setColor(itemName, color); } this._selectedMap[itemName] = this._selectedMap[itemName] != null ? this._selectedMap[itemName] : true; } } } this.clear(); this._buildShape(); },

2、于是可能產(chǎn)生了如下一個(gè)坐標(biāo)系設(shè)置代碼

{
    name: 'iphone3',
    type: 'map',
    mapType: 'china',
    selectedMode:'single',
    roam: true,
    showLegendSymbol:true,
    itemStyle:{
     normal:{
     label:{show:true}
     ,areaStyle:{color:'green'} //設(shè)置地圖背景色的顏色設(shè)置
     ,color:'rgba(255,0,255,0.8)' //剛才說的圖例顏色設(shè)置
     },
     emphasis:{label:{show:true}}
    },
    data:[
     {name: '北京',value: Math.round(Math.random()*1000)},
     {name: '天津',value: Math.round(Math.random()*1000)},
     {name: '上海',value: Math.round(Math.random()*1000)}     
    ]
    }

3、這么設(shè)置有問題嗎？我設(shè)置了一下發(fā)現(xiàn)有問題。圖例顏色是對(duì)了，但是地圖背景色不對(duì)，變成和第一個(gè)設(shè)置color的坐標(biāo)系顏色一致了

于是查看地圖源碼(map.js)發(fā)現(xiàn)有這么一行代碼

color = dataRange && !isNaN(value) ? dataRange.getColor(value) : null;
style.color = style.color || color || this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), data.seriesIndex, -1, data)|| this.deepQuery(queryTarget, 'itemStyle.normal.areaStyle.color');

如果按照地圖是china的話，這里的style可以理解成地圖省份，style.color沒值,color如果區(qū)間拉到最下面也是沒值(可以看到getColor方法返回的是null)，然后接著找itemStyle.normal.color，所以兩個(gè)都設(shè)置了，是找不到areaStyle的設(shè)置。背景色就是第一個(gè)坐標(biāo)系的顏色。

4、然后再想怎么解決。

看圖例的顏色設(shè)置機(jī)制，實(shí)際上和坐標(biāo)系的什么圖形，什么類型都沒關(guān)系，只要是坐標(biāo)系的格式就行。那是不是可以欺騙一下。

在series中，設(shè)置成這樣

{
 name: 'iphone3',//add by danielinbiti，注意這里名稱必須和坐標(biāo)系的名稱要一致
 type:'', //設(shè)置為'',所有圖形都不會(huì)讀取
 itemStyle:{
  normal:{
  color:'rgba(255,0,255,0.8)'
  }
 },
 mapType:'none',
 data:[]
},
{
 name: 'iphone3',
 type: 'map',
 mapType: 'china',
 selectedMode:'single',
 roam: true,
 showLegendSymbol:true,
 itemStyle:{
 normal:{
  label:{show:true}
  ,areaStyle:{color:'green'}
 },
 emphasis:{label:{show:true}}
 },
 data:[
 {name: '北京',value: Math.round(Math.random()*1000)},
 {name: '天津',value: Math.round(Math.random()*1000)},
 {name: '上海',value: Math.round(Math.random()*1000)}
 ]
}

關(guān)于使用echarts怎么設(shè)置圖例顏色就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：使用echarts怎么設(shè)置圖例顏色-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article42/dpieec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、軟件開發(fā)、云服務(wù)器、搜索引擎優(yōu)化、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)