最近項(xiàng)目要用到折線圖，直觀的反應(yīng)各種數(shù)據(jù)的變化，之前沒有接觸過，百度后發(fā)現(xiàn)很多人都使用echarts繪畫圖表，網(wǎng)上教程多，學(xué)起來應(yīng)該相對(duì)簡(jiǎn)單。

一：處理點(diǎn)及其效果圖

vue + echarts效果圖

二、獲取引入echarts

獲取方法：npm install echarts --save
引入方法：import echarts from 'echarts'
注：獲取和引入的方式不止一種，大家可以參考echarts官網(wǎng)：http://echarts.baidu.com/

三、繪前準(zhǔn)備

繪圖準(zhǔn)備：

欄目準(zhǔn)備：

四、開始繪圖

繪圖主要分三步：
1、基于準(zhǔn)備好的dom，初始化echarts實(shí)例
let myChart=document.getElementById('myChart')
let mainChart = echarts.init(myChart)
2、配置折線圖（折線圖長(zhǎng)什么樣靠這步）
我將繪圖配置單獨(dú)領(lǐng)出來，放進(jìn)data()，用option字段表示
3、顯示折線圖
mainChart.setOption(this.option)
第一、三步都是照葫蘆畫瓢，基本固定了，現(xiàn)在顏值部分重點(diǎn)在第二步

option: {
          tooltip: {
            trigger: 'axis'   //顯示提示框
          },
          grid: {
            x: '40px',    //組件離容器左側(cè)的距離
            y: '10px',   //組件離容器上邊的距離
            x2: '550px',   //組件離容器右側(cè)的距離
            y2: '50px',   //組件離容器下邊的距離
          },
          xAxis: {
            type: 'category',   //類目軸
            boundaryGap: false,   //標(biāo)簽和數(shù)據(jù)顯示在刻度下面
            minInterval: 1,   //坐標(biāo)最小間隔是1
            maxInterval: 3,   //坐標(biāo)最大間隔是3
            data: [],    //存放數(shù)據(jù)
          },
          yAxis: {
            type: 'value',   //數(shù)值軸
            axisLine: {
              show: true,   //顯示刻度線
              lineStyle: {
                type: 'solid',   //實(shí)線
              }
            }
          },
          series: [
            {
              name: '銷售總金額',
              type: 'line',    //繪圖類型是折線圖
              showSymbol: true,   //顯示symbol
              symbol: 'circle',   //標(biāo)記圖形是圓形
              symbolSize: 8,   //標(biāo)記圖形的大小
              itemStyle : {
                normal : {
                  color:'#57D064',   //折點(diǎn)的顏色
                  lineStyle:{
                    color:'#57D064'   //折線的顏色
                  },
                }
              },
              data: [],
            },
            {
              name: '銷售總筆數(shù)',
              type: 'line',
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 8,
              itemStyle : {
                normal : {
                  color:'#57D064',
                  lineStyle:{
                    color:'#57D064'
                  }
                }
              },
              data: [],
            },
            {
              name: '現(xiàn)金支付金額',
              type: 'line',
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 8,
              itemStyle : {
                normal : {
                  color:'#57D064',
                  lineStyle:{
                    color:'#57D064'
                  }
                }
              },
              data: [],
            },
            {
              name: '電子支付金額',
              type: 'line',
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 8,
              itemStyle : {
                normal : {
                  color:'#57D064',
                  lineStyle:{
                    color:'#57D064'
                  }
                }
              },
              data: [],
            },
          ],
        },

在繪圖配置過程中，已經(jīng)把圖形大致描繪出來，折線圖的各個(gè)處理點(diǎn)如下：
1、日期在刻度的正下方：boundaryGap: false
echarts默認(rèn)是true，如此一來，日期就在兩個(gè)刻度之間顯示
2、折線圖的顏色：itemStyle : { normal : { color:'#57D064', lineStyle:{ color:'#57D064' }, } },
如上面的代碼可知，關(guān)于折線的部分都在serise字段中，其中itemStyle存放的是折線的樣式。
3、折點(diǎn)實(shí)心點(diǎn) ： showSymbol: true, symbol: 'circle', symbolSize: 8,這三個(gè)一套帶走
4、縱坐標(biāo)顯示刻度線：axisLine: { show: true, lineStyle: { type: 'solid', } }
這個(gè)在默認(rèn)情況下是會(huì)顯示的，可以不寫，如何不想讓刻度線顯示，就要寫著屬性了，并且設(shè)置為false

五、問題

1、實(shí)現(xiàn)四個(gè)欄目的切換
在dom中可以看出，切換使用的是方法options(),傳參即可實(shí)現(xiàn)切換。

options(val) {
    if(val === '1' ) {
        this.showchose = 1  
    }else if (val = '2') {
        this.showchose = 2
    }else if (val = '3') {
        this.showchose = 3
    }else if (val = '4') {
        this.showchose = 4
    }
},

2、繪制折線圖時(shí)清除上一條折線圖
一般情況下，當(dāng)欄目在切換過程中，并不會(huì)清除上一次的數(shù)據(jù)，所以這里必須做清除。開始百度，清除的方法有兩種:
1'mainChart.clear(),在數(shù)據(jù)切換過程中，使用clear()函數(shù)重新加載新的畫板.
2'mainChart.setOption(this.option, true),在繪制折線圖時(shí)，使用true，如果不寫的話默認(rèn)是false，即合并，在切換的時(shí)，幾次的數(shù)據(jù)會(huì)合并在一起。
但是這好像并沒有用。。。
數(shù)據(jù)來自后臺(tái)，每次請(qǐng)求的時(shí)候都要將后臺(tái)的數(shù)據(jù)寫進(jìn)data[]中，橫坐標(biāo)日期獲取是如此，series的值也是這樣，所以可以在寫入數(shù)據(jù)時(shí)，清空data[],醬可行。
3'data[]是個(gè)數(shù)組，用清空數(shù)組的方法就可以。
3、后臺(tái)獲取數(shù)據(jù)

let data = {
startTime:formatTime(this.beginGmtCreate,false),
endTime: formatTime(this.endGmtCreate,true)
}
let url = *****   //這里是調(diào)用的接口

this.$http.post(url, data).then(res=> {
  if(res.data.ret === 0) {
    let xdata = this.option.xAxis.data
    let sdata = this.option.series
    xdata.splice(0, xdata.length)   //清空橫坐標(biāo)
    for (var i = 0; i < sdata.length; i ++) { //清空數(shù)據(jù)
      sdata[i].data.splice(0, sdata.length)
      sdata[i].data.length = 0
    }
    this.tableData.forEach((item) => {
      let gmtcreatetime = item.gmtCreatetime.substring(0, 11)  //橫坐標(biāo)加載
      xdata.push(gmtcreatetime)
          //值的加載
      if (this.showchose === 1) {
        sdata[0].data.push(item.totalAmount / 100)
      } else if(this.showchose === 2) {
        sdata[1].data.push(item.totalCount)
      } else if(this.showchose === 3) {
            sdata[2].data.push(item.cashTotalAmount / 100)
      }else if(this.showchose === 4) {
            sdata[3].data.push(item.epaymentTotalAmount / 100)
      }
    })
  }
}else{
    this.$message.error(res.data.message)
  }

數(shù)據(jù)的加載分兩步，第一步是清空data[]數(shù)據(jù)，第二步是用foreach()函數(shù)遍歷每一項(xiàng)，再用push()將數(shù)據(jù)寫進(jìn)data[]。
醬折線圖就可以出爐了~
那四個(gè)欄目的樣式部分可以自由發(fā)揮了。