avue-data數據大屏通用組件自定義折線圖調用接口動態數據

  avue-data數據大屏通用組件自定義折線圖柱狀圖

我的例子是折線圖帶有放大縮小功能：如下圖

 

1.選擇通用組件，點擊右側配置列表的編輯按鈕（echarts的所有樣式都在這里可以配置）如下圖

 

 

 縮放折線圖的配置列表代碼如下： 

(data)=>{
console.log(data);
return {
    color: ['#80FFA5', '#00DDFF'],
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
   data:[
      {
name:data.series[0].name,
textStyle: {
color: '#80FFA5'
}
},
{
name:data.series[1].name,
textStyle: {
color: '#00DDFF'
}
}, 
   ],
        left:'right',
      
    },
     grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
   
    xAxis: [
        {
            type: 'category',
            axisLine:{
                        lineStyle:{
                            color:'#eee',
                        }
                    } ,
            boundaryGap: false,
            data: data.categories
        }
    ],
    yAxis: [
        {
            name: "噸折標煤",
             splitLine: { //網格線
                show: false
            },
            type: 'value',
             axisLine:{
                        lineStyle:{
                            color:'#eee',
                        }
                    } 
        }
    ],
           dataZoom: [
               {
                     type: 'inside',
               }],
    series: [
        {
            name: data.series[0].name,
            color:'#01B7C6',
            type: 'line',
            stack: '總量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(128, 255, 165)'
                }, {
                    offset: 1,
                    color: 'rgba(1, 191, 236)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: data.series[0].data
        },
        {
            name: data.series[1].name,
            color:'#192552',
            type: 'line',
            stack: '總量',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 221, 255)'
                }, {
                    offset: 1,
                    color: 'rgba(77, 119, 255)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: data.series[1].data
        }
    ]
};
}

3.動態數據調用

 

 

 4.點擊按鈕數據處理，處理成大屏需要的接口格式（如果你接口返回的格式和大屏一直這一步就不需要）

(res)=>{
     let obj = {
        categories: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
        series: [],
      }
      let series1 = {
        name: '',
        data: [],
      }
      let series2 = {
        name: '',
        data: [],
      }
       series1.name = `${res.data.list[0].yearMinute} 年`
      series1.data.push(
        res.data.list[0].januaryQuarter,
        res.data.list[0].februaryQuarter,
        res.data.list[0].marchQuarter,
        res.data.list[0].aprilQuarter,
        res.data.list[0].mayQuarter,
        res.data.list[0].juneQuarter,
        res.data.list[0].julyQuarter,
        res.data.list[0].augustQuarter,
        res.data.list[0].septemberQuarter,
        res.data.list[0].octoberQuarter,
        res.data.list[0].novemberQuarter,
        res.data.list[0].decemberQuarter
      )
      series2.name = `${res.data.list[1].yearMinute} 年`
      series2.data.push(
        res.data.list[1].januaryQuarter,
        res.data.list[1].februaryQuarter,
        res.data.list[1].marchQuarter,
        res.data.list[1].aprilQuarter,
        res.data.list[1].mayQuarter,
        res.data.list[1].juneQuarter,
        res.data.list[1].julyQuarter,
        res.data.list[1].augustQuarter,
        res.data.list[1].septemberQuarter,
        res.data.list[1].octoberQuarter,
        res.data.list[1].novemberQuarter,
        res.data.list[1].decemberQuarter
      )
      obj.series.push(series1, series2)
      return obj
}

好了，完成了，組件就變成你需要的樣子