echart自定義樣式

經常使用echart繪制雷達圖、折線圖、柱狀圖等時，需要根據UI重新定義橫縱坐標顏色，背景色等。
option ={
  backgroundColor: 'rgba(0,0,0,0)',//設置背景顏色
  title: {
    show:false,
    text: '折線圖',
    subtext: '模擬數據',
    x: 'center'
  },
  legend: {
    // orient 設置布局方式，默認水平布局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
    orient: 'horizontal',
    // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
    x: 'left',
    // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
    y: 'top',
    data: ['預期','實際','假設']
  },

  //  圖表距邊框的距離,可選值：'百分比'¦ {number}（單位px）
  grid: {
    top: '16%',   // 等價於 y: '16%'
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },

  // 提示框
  tooltip: {
    trigger: 'axis'
  },

  //工具框，可以選擇
  toolbox: {
    show:false,//控制工具欄的顯示
    feature : {
      mark : {show: true},//控制輔助線
      dataView : {show: true, readOnly: false},//數據還原
      restore : {show: true},//還原
      saveAsImage : {show: true} //下載圖片
    }
  },

  xAxis: {
    name: '',//設置x軸文字
    type: 'category',
    splitLine: {
      show: true,
      //  改變軸線顏色
      lineStyle: {
        // 使用深淺的間隔色
        color: ['rgba(255,255,255,0.2)']
      }
    },
    axisLine: {
      lineStyle: {
        // 設置x軸顏色
        color: 'rgba(225,232,238,0.4)'
      }
    },
    // 設置X軸數據旋轉傾斜
    axisLabel: {
      rotate: 0, // 旋轉角度
      interval: 0  //設置X軸數據間隔幾個顯示一個，為0表示都顯示
    },
    // boundaryGap值為false的時候，折線第一個點在y軸上
    boundaryGap: false,
    data: ['3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7']
  },

  yAxis: {
    show:false,//控制y軸的隱藏和顯示
    name: '數值',
    type: 'value',
    min:0, // 設置y軸刻度的最小值
    max:1800,  // 設置y軸刻度的最大值
    splitNumber:29,  // 設置y軸刻度間隔個數
    splitLine: {
      show: false,
      //  改變軸線顏色
      lineStyle: {
        // 使用深淺的間隔色
        color: ['rgba(255,255,0,1)']
      }
    },
    axisLine: {
      lineStyle: {
        show:false,
        // 設置y軸顏色
        color: 'red'
      }
    },
  },
  series: [
    {
      name: '實際',//右上角標注，線條多時，說明
      data: [620, 732, 941, 834, 1690, 1030, 920, 732, 941, 834, 1690, 1030, 920],
      type: 'line',
      color:'#FFAE00',
      // 設置折線上圓點大小
      symbolSize:8,
      itemStyle:{
        normal:{
          // 拐點上顯示數值
          label : {
            show: true
          },
          borderColor:'#FFAE00',  // 拐點邊框顏色
          lineStyle:{
            width:2,  // 設置線寬
            type:'solid'  //'dotted'虛線 'solid'實線
          }
        }
      }
    },
  ],
  //color: ['#00EE00', '#FF9F7F','#FFD700'] //多條數據時設置標注顏色
};