Echars折線配置詳解

Echars折線配置詳解

比如做成如下效果圖：

所有的配置如下：

var option = {
  tooltip: {  // 提示框
    trigger: 'axis',  // 觸發型別(座標軸觸發)
    alwaysShowContent: false, // 是否永遠顯示提示框的內容
    backgroundColor: 'rgba(32, 174, 252, 0.7)', // 提示框的背景顏色
    textStyle: {  // 提示框浮層的文字樣式

    }
  },
  calculable: true,
  // x軸設定
  xAxis: [
    {
      type: 'category',
      name: '(月)',   // x軸名稱單位
      nameLocation: 'end', // 名稱的位置
      nameTextStyle: {  // 名稱的樣式
        color: '#999',
        fontSize: '12px'
      },
      nameGap: 0, // 名稱與X軸的距離
      boundaryGap: true, // 座標的刻度是否在中間
      min: '3',  // 座標軸刻度的最小值
      max: '12',  // 座標軸刻度的最大值
      axisLine: {   // 座標軸線條相關設定(顏色等)
        lineStyle: {
          color: '#ccc'
        }
      },
      axisTick: {  // 座標軸刻度相關設定
        length: '0'  // 長度設定為0
      },
      axisLabel: {  // 座標軸刻度標籤
        margin: 7,  // 刻度標籤與軸線之間的距離
        textStyle: {
          color: '#999',  // 座標軸刻度文字的顏色
          fontSize: '12px'  // 座標軸刻度文字的大小
        },
        // rotate: 30 // 旋轉30度
      },
      data: ['3', '4', '5', '7', '8', '12'],
      // show: false
    }
  ], 
  // y軸設定
  yAxis: [    
    {
      type: 'value',  // 型別數值軸
      name: '(人)',   // Y軸名稱單位
      nameTextStyle: {  // 名稱的樣式
        color: '#999',
        fontSize: '12px'
      },
      nameGap: 13, // 名稱與Y軸的距離
      axisTick: {  // 座標軸相關設定
        length: '0'
      },
      axisLine: {  // 座標軸線條相關設定(顏色等)
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLabel: {  // 座標軸標籤相關設定，距離顏色等
        margin: 7,  // 刻度標籤與軸線之間的距離
        // formatter: '{value} C',  // 標籤內容內建的格式轉化器在後面加一個單位值
        textStyle: {
          color: '#999',  // 座標軸刻度文字的顏色
          fontSize: '12px'  // 座標軸刻度文字的大小
        }
      },
      splitLine: {  // 座標軸分割線。預設數值軸顯示，類目軸不顯示
        show: false
      }
    }
  ],
  grid: { // 直角座標系內繪圖網格
    left: 36  
  },
  series: [  // 系列列表
    {
      name: '人',  // 系列名稱，用於tooltip的顯示
      type: 'line',
      data: [2, 2, 2, 2, 2, 7, 2],
      itemStyle: {  // 折線拐點的樣式
        normal: {
          color: '#20aefc'  // 拐線拐點的顏色
        }
      },
      lineStyle: {  // 線條的樣式
        normal: {
          color: '#20aefc',  // 折線的顏色
        }
      },
      smooth: 0.3, // 是否平滑處理，如果是Number型別(取值範圍為0到1)，表示平滑程度，越小越接近折線段，反之
      areaStyle: {  // 區域填充的樣式
        normal: {
          // 線性漸變
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: '#b1e3fe'  // 0% 處的顏色
          }, {
            offset: 1, color: '#fff' // 100% 處的顏色
          }], false)
        }
      },
      markPoint: {  // 圖示標註
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },
    {
      name: '人',  // 系列名稱，用於tooltip的顯示
      type: 'line',
      data: [6, 6, 6, 6, 6, 6, 6],
      itemStyle: {  // 折線拐點的樣式
        normal: {
          color: '#20aefc'  // 拐線拐點的顏色
        }
      },
      // smooth: 0.3, // 是否平滑處理，如果是Number型別(取值範圍為0到1)，表示平滑程度，越小越接近折線段，反之
      lineStyle: {  // 線條的樣式
        normal: {
          color: '#20aefc',  // 折線的顏色
        }
      },
      areaStyle: {  // 區域填充的樣式
        normal: {
          // 線性漸變
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: '#b1e3fe'  // 0% 處的顏色
          }, {
            offset: 1, color: '#fff' // 100% 處的顏色
          }], false)
        }
      },
      markPoint: {  // 圖示標註
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },
    {
      name: '人',  // 系列名稱，用於tooltip的顯示
      type: 'line',
      data: [10, 10, 10, 10, 10, 10, 10],
      itemStyle: {  // 折線拐點的樣式
        normal: {
          color: '#20aefc'  // 拐線拐點的顏色
        }
      },
      lineStyle: {  // 線條的樣式
        normal: {
          color: '#20aefc',  // 折線的顏色
        }
      },
      areaStyle: {  // 區域填充的樣式
        normal: {
          // 線性漸變
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: '#b1e3fe'  // 0% 處的顏色
          }, {
            offset: 1, color: '#fff' // 100% 處的顏色
          }], false)
        }
      },
      markPoint: {  // 圖示標註
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    }
  ]
};

html程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts4.x.js"></script>
    <script type="text/javascript" src="./zhexian.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 400px;height:400px;margin: 0 auto"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>