xAxis中type: 'time' 時間軸日期折線圖實現

最終效果圖:

實現步驟:

一般圖表的數據都是由后台返回的,所以這里寫了個getData函數,可以在這里獲取后台接口數據

type: time時需要的數據是二維數組格式,[[x, y],[x, y]] x為時間 y數值

需要注意的是: 如果某些日期沒有數值,也需要把這一項填充,y值為空,不然展示時空數據的地方會有問題

 

const lineChart = echarts.init(document.getElementById('lineChart'));
    const lineOption = {
      title: {
          text: '網站訪問渠道統計'
      },
      tooltip: {
          trigger: 'axis',
      },
      legend: {
          data: []
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'time', // type為time時,不要傳xAxis.data的值,x軸坐標的數據會根據傳入的時間自動展示
          boundaryGap: false, // false橫坐標兩邊不需要留白
      },
      yAxis: {
          type: 'value',
          name: '訪問人數'
      },
      series: []
    };
    // 獲取動態數據的函數
    getData()
    function getData() {
      const data = [
        {
          type: 'email',
          name: '郵件營銷',
          data: [
            ['2020-10-1', 450],
            ['2020-10-2', 350],
            ['2020-10-3', 290],
            ['2020-10-4', 380],
            ['2020-10-5', 540],
            ['2020-10-6', null],
            ['2020-10-7', null],
            ['2020-10-8', 430],
            ['2020-10-9', 330],
            ['2020-10-10', 280],
            ['2020-10-11', 340],
            ['2020-10-12', 455],
            ['2020-10-13', 330],
          ]
        },
        {
          type: 'ad',
          name: '聯盟廣告',
          data: [
            ['2020-10-1', 50],
            ['2020-10-2', 150],
            ['2020-10-3', 100],
            ['2020-10-4', 140],
            ['2020-10-5', 141],
            ['2020-10-6', 66],
            ['2020-10-7', 78],
            ['2020-10-8', 67],
            ['2020-10-9', 55],
            ['2020-10-10', 80],
            ['2020-10-11', 40],
            ['2020-10-12', 120],
            ['2020-10-13', 130],
          ]
        },
        {
          type: 'video',
          name: '視頻廣告',
          data: [
            ['2020-10-1', 234],
            ['2020-10-2', 254],
            ['2020-10-3', 260],
            ['2020-10-4', 270],
            ['2020-10-5', 250],
            ['2020-10-6', 277],
            ['2020-10-7', 289],
            ['2020-10-8', 240],
            ['2020-10-9', 230],
            ['2020-10-10', 222],
            ['2020-10-11', 244],
            ['2020-10-12', 254],
            ['2020-10-13', 279],
          ]
        },
        {
          type: 'offline',
          name: '直接訪問',
          data: [
            ['2020-10-1', null],
            ['2020-10-2', null],
            ['2020-10-3', null],
            ['2020-10-4', 40],
            ['2020-10-5', 80],
            ['2020-10-6', 87],
            ['2020-10-7', 98],
            ['2020-10-8', 33],
            ['2020-10-9', 35],
            ['2020-10-10', 78],
            ['2020-10-11', 48],
            ['2020-10-12', 67],
            ['2020-10-13', 30],
          ]
        }
      ]
      const series = []
      const legendData = []
      data.forEach(item => {
        const obj = {
          name: item.name,
          type: 'line',
          data: item.data
        }
        legendData.push(item.name)
        series.push(obj)
      })
      lineOption.legend.data = legendData
      lineOption.series = series
      // 第二個參數true表示清空之前的echarts設置,重新設置option,適用於legend等數據變化
      // 如果只是渲染數據變化可以不傳,lenged等不會重新渲染
      lineChart.setOption(lineOption, true)
    }

    這樣就實現了一個基本的日期折線圖,但是這些展示的樣式都是默認樣式,如果你的UI給你設計了漂亮的圖表,那么就需要修改配置了

    這里展示幾個常見的修改

 x軸展示日期格式改變,改成YYYY-MM-dd格式

    修改lineOption的xAxis配置,增加formatter函數處理

xAxis: {
          type: 'time', // type為time時,不要傳xAxis.data的值,x軸坐標的數據會根據傳入的時間自動展示
          boundaryGap: false, // false橫坐標兩邊不需要留白
          axisLabel: { // 坐標軸標簽樣式設置
            formatter: function(value, index) { // 坐標軸文字展示樣式處理
              const date = new Date(value)
              const texts = [date.getFullYear(), (date.getMonth() + 1), date.getDate()]
              return texts.join('-')
              // echarts自帶的日期格式化方法
              // return echarts.format.formatTime('yyyy-MM-dd', value)
            }
          }
      }

 

    這里我打印了formatter函數的value和 index,其實返回的就是data數據里的日期,界面有展示日期的地方就有index,沒展示出來的index為null

   這里提一下官網的一個小問題,官網這里獲取年份用的是getYear()方法,但是現在使用這個方法得不到正確的年份,需要改成getFullYear()方法

 

    

這樣處理后日期格式就改好了,接着發現鼠標移入圖表的提示框展示需要優化,日期格式修改,沒有數值的地方需要處理

 

修改tooltip提示框組件的展示

tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var text = '--'
            if (params && params.length) {
              text = params[0].data[0] // 提示框頂部的日期標題
              params.forEach(item => {
                const dotHtml = item.marker // 提示框示例的小圓圈,可以在這里修改
                text += `</br>${dotHtml}${item.seriesName} : ${item.data[1] ? item.data[1] : '-'}`
              })
            }
            return text
          }
      },

這里的params也打印了,看一下這個結構,我們可以根據這些值自己定制樣式

 

　　OK,經過這一波處理,提示框的展示也解決了,完美

      其他的樣式修改大致也是這樣,echart還提供了許多其他的樣式修改,如顏色,字體等,可以多看看文檔,還是很完整的

      放一下完整代碼,直接新建HTML文件打開就行,前提是你自己下載echarts.js哈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echart/echarts.js"></script>
</head>
<body>
  <div id='lineChart' style='width:900px;height:400px;margin:50px auto'></div>
  <script>

    const lineChart = echarts.init(document.getElementById('lineChart'));
    const lineOption = {
      title: {
          text: '網站訪問渠道統計'
      },
      tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var text = '--'
            if (params && params.length) {
              text = params[0].data[0] // 提示框頂部的日期標題
              params.forEach(item => {
                const dotHtml = item.marker // 提示框示例的小圓圈,可以在這里修改
                text += `</br>${dotHtml}${item.seriesName} : ${item.data[1] ? item.data[1] : '-'}`
              })
            }
            return text
          }
      },
      legend: {
          data: []
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'time', // type為time時,不要傳xAxis.data的值,x軸坐標的數據會根據傳入的時間自動展示
          boundaryGap: false, // false橫坐標兩邊不需要留白
          axisLabel: { // 坐標軸標簽樣式設置
            formatter: function(value, index) { // 坐標軸文字展示樣式處理
              const date = new Date(value)
              const texts = [date.getFullYear(), (date.getMonth() + 1), date.getDate()]
              return texts.join('-')
              // echarts自帶的日期格式化方法
              // return echarts.format.formatTime('yyyy-MM-dd', value)
            }
          }
      },
      yAxis: {
          type: 'value',
          name: '訪問人數'
      },
      series: []
    };
    // 獲取動態數據的函數
    getData()
    function getData() {
      const data = [
        {
          type: 'email',
          name: '郵件營銷',
          data: [
            ['2020-10-1', 450],
            ['2020-10-2', 350],
            ['2020-10-3', 290],
            ['2020-10-4', 380],
            ['2020-10-5', 540],
            ['2020-10-6', null],
            ['2020-10-7', null],
            ['2020-10-8', 430],
            ['2020-10-9', 330],
            ['2020-10-10', 280],
            ['2020-10-11', 340],
            ['2020-10-12', 455],
            ['2020-10-13', 330],
          ]
        },
        {
          type: 'ad',
          name: '聯盟廣告',
          data: [
            ['2020-10-1', 50],
            ['2020-10-2', 150],
            ['2020-10-3', 100],
            ['2020-10-4', 140],
            ['2020-10-5', 141],
            ['2020-10-6', 66],
            ['2020-10-7', 78],
            ['2020-10-8', 67],
            ['2020-10-9', 55],
            ['2020-10-10', 80],
            ['2020-10-11', 40],
            ['2020-10-12', 120],
            ['2020-10-13', 130],
          ]
        },
        {
          type: 'video',
          name: '視頻廣告',
          data: [
            ['2020-10-1', 234],
            ['2020-10-2', 254],
            ['2020-10-3', 260],
            ['2020-10-4', 270],
            ['2020-10-5', 250],
            ['2020-10-6', 277],
            ['2020-10-7', 289],
            ['2020-10-8', 240],
            ['2020-10-9', 230],
            ['2020-10-10', 222],
            ['2020-10-11', 244],
            ['2020-10-12', 254],
            ['2020-10-13', 279],
          ]
        },
        {
          type: 'offline',
          name: '直接訪問',
          data: [
            ['2020-10-1', null],
            ['2020-10-2', null],
            ['2020-10-3', null],
            ['2020-10-4', 40],
            ['2020-10-5', 80],
            ['2020-10-6', 87],
            ['2020-10-7', 98],
            ['2020-10-8', 33],
            ['2020-10-9', 35],
            ['2020-10-10', 78],
            ['2020-10-11', 48],
            ['2020-10-12', 67],
            ['2020-10-13', 30],
          ]
        }
      ]
      const series = []
      const legendData = []
      data.forEach(item => {
        const obj = {
          name: item.name,
          type: 'line',
          data: item.data
        }
        legendData.push(item.name)
        series.push(obj)
      })
      lineOption.legend.data = legendData
      lineOption.series = series
      // 第二個參數true表示清空之前的echarts設置,重新設置option,適用於legend等數據變化
      // 如果只是渲染數據變化可以不傳,lenged等不會重新渲染
      lineChart.setOption(lineOption, true)
    }
  </script>
</body>
</html>