前端深刻之Vue篇丨如何在項目中優雅的使用Echarts（下）

時間 2020-01-16

標籤前端深刻 vue 如何項目優雅使用 echarts 简体版

原文原文鏈接

寫在前面

最近因爲一些不可抗力因素，我跳槽去了一家作高校教育服務的公司，剛入職就正好遇上了PC端項目的重構，而我主要負責數據可視化這一模塊，其實作起來不算複雜，可是在使用Echarts的過程當中也踩到了一些坑。前端

這是vue項目實戰echarts的下篇，尚未看過上篇的同窗請點擊這裏進行查閱。通過了上一文章的學習，相信你必定對如何在vue中使用echarts有了初步認識，能夠在項目中熟練的繪製你想要的任何echart了。vue

上篇連接：前端深刻之Vue篇丨如何在項目中優雅的使用Echarts（上）數組

尚未看過的小夥伴必定要先學習上篇練習一下吶~數據結構

但願小夥伴閱讀完以後能夠在項目中掌握Echarts正確的使用方式，而且在個人基礎上可以少踩一些坑。echarts

在學習完上篇以後相信你必定會感受很簡單的，而真正作項目，咱們的數據都是接口請求返回來的，如何將返回的數據展現到Echarts中呢，帶着這個問題跟我一塊兒來學習吧。post

正文

爲了保證小夥伴們都可以順利進行，能夠複製如下代碼到data中，當作請求完以後的調用。學習

chartData = {
    attenceRate: 0.125,
    homewordRate: 0.125,
    topicRate: 0.125,
    starRate: 0.125,
    interactRate: 0.125,
    classAttenceRate: 0.125,
    classHomewordRate: 0.125,
    classTopicRate: 0.125,
    classStarRate: 0.125,
    classInteractRate: 0.125
};

因爲上一篇我找的雷達圖這個例子比較簡單，因此咱們依次把數據放進去就好，給出option>series的代碼，小夥伴複製過去就能夠了。this

series: [
    {
        type: "radar",
        data: [
            {
                value: [
                    this.userAnalycomplexEchart.attenceRate,
                    this.userAnalycomplexEchart.homewordRate,
                    this.userAnalycomplexEchart.topicRate,
                    this.userAnalycomplexEchart.starRate,
                    this.userAnalycomplexEchart.interactRate
                ],
                name: "學生我的"
            },
            {
                value: [
                    this.userAnalycomplexEchart.classAttenceRate,
                    this.userAnalycomplexEchart.classHomewordRate,
                    this.userAnalycomplexEchart.classTopicRate,
                    this.userAnalycomplexEchart.classStarRate,
                    this.userAnalycomplexEchart.classInteractRate
                ],
                name: "班級平均"
            }
        ]
    }
]

實際開發中只須要在接口請求完的 then中調用 Echarts繪製的方法就能夠了。

可是。。。

更多時候並非這樣直接填入就能夠，好比折線圖、柱狀圖等數據量不少的時候，接口返回給咱們的經常是一個數組，咱們須要準確取到數組的值push到對應的地方纔能夠。下面我以折線圖爲例進行展現。spa

knowledgeChartData = [
    { timeDay: "01-08", knowledgeCount: 24 },
    { timeDay: "01-09", knowledgeCount: 23 },
    { timeDay: "01-10", knowledgeCount: 32 },
    { timeDay: "01-11", knowledgeCount: 43 },
    { timeDay: "01-12", knowledgeCount: 12 },
    { timeDay: "01-13", knowledgeCount: 53 },
];

首先給出接口數據，請你自行把它複製到data中。在下面我也給出你我頁面中折線圖option配置，一樣你能夠複製個人或者複製官方示例到本身的項目裏。code

option = {
    tooltip: {
        trigger: "axis"
    },
    legend: {
        orient: "vertical",
        left: "5%",
        data: ["掌握狀況"]
    },
    color: ["#FF507C"],
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: []
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                type: "dotted"
            }
        },
        nameTextStyle: {
            color: "#b5b8ba"
        },
        type: "value"
    },
    series: [
        {
            name: "掌握狀況",
            smooth: true,
            type: "line",
            data: []
        }
    ]
};

OK，到這裏你已經有了一個空的折線圖了，經過閱讀代碼能夠看到在option中分別有xAxis和yAxis，對應的分別是X軸和Y軸，而其中的data就是X軸和Y軸所對應的數據項。如今咱們將knowledgeChartData的值拿出來，經過循環，將它們分別到對應的data中就能夠了。

this.knowledgeChartData.map(i => {
     option.xAxis.data.push(i.timeDay);
     option.series[0].data.push(i.knowledgeCount);
 });
myChart.setOption(option);

在調整完option以後執行setOption，全部數據就可以正確顯示到頁面上了~