echart常用曲線圖和折線圖配置

// 點播統計趨勢圖
let DemandStatisticsBar = Echart.init(document.getElementsByClassName('demand-statistics-bar')[0]);
DemandStatisticsBar.setOption({
  title: {
    text: '點播統計趨勢圖',
    ...setEchartTitle, //在常用的echart標題博文中出現過
  },
  //是否啓用鼠標移動到數據上時的提示框工具
  tooltip: {
    show: true,
  },
  //條形圖，曲線圖，折線圖通過這個配置繪圖位置
  grid: {
    x: 60,
    y: 60,
  },
  
  yAxis: {
    max: 1500, //y軸最大值
    interval: 300, //一軸間隔值
    ...setAxis, //在常用軸線配置博文中出現過
    // y軸軸線配置
    axisLine: {
      lineStyle: {
        width: 1, //軸線寬度
        color: '#305682', //軸線顏色
      },
    },
    //y軸軸線的刻度顯示，默認爲true，不需要時，讓show爲false
    axisTick: {
      show: true,
      lineStyle: {
        color: '#305682', //刻度的顏色
      },
    },
    // scale: true //y軸脫離0刻度值，但不能設置max和min，否則無效
  },
  xAxis: {
    data: ['02-24', '02-24', '02-24', '02-24', '02-24', '02-24', '02-24', '02-24'],
    ...setAxis,
    axisLine: {
      lineStyle: {
        width: 1,
        color: '#305682',
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: {
        boundaryGap: true, //x座標軸分隔線和字體是否對齊,默認是不對齊的
      },
    },
    boundaryGap: false, //x座標軸開始位置從0處開始
    // gridIndex: 0,
  },
  series: {
    type: 'line',
    //symbol: 'none', //取消折線上的圓點
    smooth: true, //true就是曲線，false就是折線，默認false
    data: [300, 400, 562, 213, 678, 900, 561, 477],
    itemStyle: {
      normal: {
        lineStyle: {
        	// 曲線的顏色，用了一個線性漸變色
        	// 0,0, 1, 0 分別表示x y x2 y2 用來控制線性漸變的方向
        	// 表示漸變方向爲從左向右
          color: new Echart.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0, //百分之0處的顏色，必須存在，不得大於1
              color: '#17fda6',
            },
            {
              offset: 0.2,
              color: '#0984bf',
            },
            {
              offset: 1,
              color: '#6c6dd8',
            },
          ]), //折線的顏色
        },
        //曲線圖或者折線圖下方填充區樣式配置
        areaStyle: {
        	// 採用線性漸變顏色 從左向右，從上到下
          color: new Echart.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: 'rgba(23,253,166,0.5)',
            },
            {
              offset: 0.5,
              color: 'rgba(9,132,191,0.6)',
            },
            {
              offset: 1,
              color: 'rgba(108,109,216,0.7)',
            },
          ]),
        },
      },
    },
  },
});