echarts柱形圖的相關設置

option中data的值要根據業務場景修改

option = {
	  //設置鼠標靠近顯示label
      tooltip: {},
      textStyle: {
        color: '#1BB3E3'
      },
      xAxis: {
        type: 'category',
        // x座標軸
        axisLine: {
          show: true,
          // 設置座標軸顏色
          lineStyle: {
            color: '#3C7DB9'
          }
        },
        // 座標軸刻度相關設置。
        axisTick: {
          show: false
        },
        boundaryGap: true,
        // 刻度標籤與軸線之間的距離。
        axisLabel: {
          margin: 20
        },
        data: yearDataList.xaxis,
      },
      yAxis: {
        type: 'value',
        // 座標軸軸線相關設置。
        axisLine: {
          show: false
        },
        // 座標軸刻度相關設置。
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            // 使用深淺的間隔色
            color: ['#193F69']
          }
        }
      },
      series: [{
      //data值要根據業務場景修改
        data: yearDataList.yaxis,
        type: 'bar',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#15D1EE' // 0% 處的顏色
          }, {
            offset: 1, color: '#0E85F6' // 100% 處的顏色#0E85F6
          }],
          global: false // 缺省爲 false
        },
        // 設置柱子寬度
        barWidth: '20%',
        itemStyle: {
          // (順時針左上,右上,右下,左下)柱子樣式
          barBorderRadius: [50, 50, 0, 0]
        },
        showSymbol: true
      }]
    };

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章