【v-charts】折线图

template:

 <ve-line :data="chartData" :settings="chartSettings1" :extend="chartExtend" width="500px" height="550px">
 </ve-line> 

data:

        //折线图数据
        chartSettings1 = {
              labelMap: {
                dataTime: '日期',
                cou: '实时值',
              }
            }
       //折线数据--从后台获取，如下
        chartData: {
          columns: [],
          rows: []
        },
        chartExtend: {
          //上下间距
          grid: {
            top: 60,
            y: 10,
            left: 30,
            right: 60,
            containLabel: true
          },
          legend: {
            data: [[
              '最大值', '最小值, '平均值,'累计值', '实时值'
]],
            textStyle: {
              color: '#000000',
              fontSize: 18
            },
            top: 10
          },
          // dataZoom: [{
          //   type: 'inside',
          //   xAxisIndex: 0,
          //   minSpan: 5,
          // }, {
          //   type: 'slider',
          //   xAxisIndex: 0,
          //   minSpan: 5,
          //   height: 20,
          //   bottom: 10,
          //   handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          //   handleSize: '120%'
          // }],
          xAxis: {
            axisLabel: {
              // splitNumber:6,  //x轴固定间隔
              showMaxLabel: true, //x轴固定显示最后一个
              textStyle: {
                color: '#000000',
                fontSize: 18
              },
              //字倾斜45度
              // rotate: 45
              formatter: function (value) {
                return value.replace(' ', '\n')
              }
            },
          },
          yAxis: {
            name: '浓度',
            //y轴标题样式
            nameTextStyle: {
              color: '#000000',
              fontSize: 18,
            },
            //y轴字样式
            axisLabel: {
              textStyle: {
                color: '#000000',
                fontSize: 18
              }
            },
            position: 'left',
          },
          series(v) {
            v.forEach(i => {
              i.barWidth = 10
            })
            return v
          },
        },

接口请求返回：

this.chartData.rows = response.data.data.list;
this.chartData.columns = ['dataTime', 'max', 'min', 'avg', 'cou']