鍍金池/ 問答/HTML/ eacharts柱狀圖X軸和當鼠標到柱狀圖會顯示白色

eacharts柱狀圖X軸和當鼠標到柱狀圖會顯示白色

1.柱狀圖上的X軸的線條在哪里改變顏色?
2.當鼠標移到第一個柱狀圖的時候其它的柱狀圖顏色變成白色, 在哪里回復成原來的藍色, 除了移到第一個柱狀圖會有這種情況, 移到其它的柱狀圖都不會改變顏色
clipboard.png

js代碼
/ 柱狀圖->左 /

var myChart = echarts.init(document.getElementById('main_left'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
  title: {
    text: '面積',
    textStyle: {
      fontWeight: 'normal',
      color: '#fff'   // 標題顏色
    },
  },
  tooltip: {
    // 鼠標移動柱狀圖是提示文字
    show: true
  },
  legend: {
    // data: ['面積'],
    textStyle: {
      fontSize: 12
    }
  },
  // 橫坐標
  xAxis: {
    data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#094060'
      }
    }
  },
  // 縱坐標
  yAxis: {
    // 設置坐標軸字體顏色
    axisLine: {
      lineStyle: {
        color: '#094060'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      }
    },
  },
  //配置樣式
  itemStyle: {
    //通常情況下:
    normal: {
      //每個柱子的顏色即為colorList數(shù)組里的每一項,如果柱子數(shù)目多于colorList的長度,則柱子顏色循環(huán)使用該數(shù)組
      color: function (params) {
        var colorList = ['#0166ff'];
        return colorList[params.dataIndex];
      }
    },
    //鼠標懸停時:
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  },
  series: [{
    name: '面積',
    type: 'bar',
    barWidth: 13,   // 設置柱的寬度
    data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
  }]
};

// 使用剛指定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(option);
回答
編輯回答
吢涼
return colorList[params.dataIndex];
替換成
return colorList[params.dataIndex % colorList.length];

網(wǎng)格線顏色

yAxis : {
            splitLine:{
                lineStyle:{
                    color: ['#123']
                }
           },
           ...你的配置
}
2017年4月1日 03:42