? ? ? ? 可視化題目與以往相同，做法類似，我這里展示得到語句后處理優化以后的代碼，以函數式來寫可視化，比以前400-500多行代碼簡潔到100多行。其他題目見本欄目，那里面的代碼都是沒有優化后的，這次主要以效率和精簡給大家提供更多的思路。

????????我們得到的接口數據類似這種?：

子任務一：用柱狀圖展示消費額最高的省份

????????編寫Vue工程代碼，根據接口，用柱狀圖展示2020年消費額最高的5個省份，同時將用于圖表展示的數據結構在瀏覽器的console中進行打印輸出，將圖表可視化結果和瀏覽器console打印結果分別截圖并粘貼

<template><div id="main" style="width: 1000px; height: 400px"></div>
</template><script>
import axios from "axios";
import * as echarts from "echarts";export default {mounted() {let url = "http://localhost:5000/first";axios.get(url).then((res) => {let datas = res.data.data;//取出所有省份的消費額度let xfe = function (array, name, value) {let a = [];let zhi = false;for (let i in array) {for (let j in a) {if (array[i][name] == a[j].name) {a[j].value += array[i][value];a[j].count += 1;zhi = true;break;} else {zhi = false;}}if (!zhi) {a.push({name: array[i][name],value: array[i][value],count: 1,// name:array[i][name],value:value});}}return a;};//分割let qwg = function (array, num) {let a = [];for (let i = 0; i < num; i++) {a.push(array[i]);}return a;};//取值let data = function (array, value, bool) {let a = [];if (bool) {for (let i in array) {a.push((array[i][value] / array[i].count).toFixed(2));}}else{for (let i in array) {a.push(array[i][value]);}}return a;};//定義第一個圖的數據let sf = xfe(datas,'provinceName','finalTotalAmount')//排序sf.sort((a,b)=>{return b.value - a.value})//取5個最高的省份sf = qwg(sf,5)console.log(sf);let options1 = {title:{text:'柱狀圖展示2020年消費額最高的5個省份'},xAxis:{name:'省份',data:data(sf,'name')},yAxis:{name:'消費額'},series:{type:'bar',data:data(sf,'value')}}let myChats = echarts.init(document.getElementById("main"));myChats.setOption(options1)},
};

子任務二：用餅狀圖展示各地區消費能力

????????編寫Vue工程代碼，根據接口，用餅狀圖展示2020年各地區的消費總額占比，同時將用于圖表展示的數據結構在瀏覽器的console中進行打印輸出，將圖表可視化結果和瀏覽器console打印結果分別截圖并粘貼

?

?

      //各地區let dq = xfe(datas,'regionName','finalTotalAmount')console.log(dq);let options2 = {title:{text:'餅狀圖展示2020年各地區的消費總額占比'},series:{type:'pie',data:dq,}}myChats.setOption(options2)

子任務三：用折線圖展示每年上架商品數量的變化

編寫Vue工程代碼，根據接口，用折線圖展示每年上架商品數量的變化情況，同時將用于圖表展示的數據結構在瀏覽器的console中進行打印輸出，將圖表可視化結果和瀏覽器console打印結果分別截圖并粘貼

?

?

      //每年上架商品數量的變化情況let spbhua = xfe(datas,'year',1)//這里用到的接口數據不一樣，所以我把value設置為1，在xfe里面有一個注釋的// name:array[i][name],value:value就是這里的用途。console.log(spbhua);let options3 = {title:{text:"折線圖展示每年上架商品數量的變化情況"},xAxis:{name:'年份',data:data(spbhua,'name')},yAxis:{},series:{type:'line',data:data(spbhua,'value')}}myChats.setOption(options3)

?

子任務四：用條形圖展示消費額最高的地區

編寫Vue工程代碼，根據接口，用條形圖展示2020年消費額最高的5個地區，同時將用于圖表展示的數據結構在瀏覽器的console中進行打印輸出，將圖表可視化結果和瀏覽器console打印結果分別截圖并粘貼?

?

      //條形圖展示2020年消費額最高的5個地區let zgdq = xfe(datas,'regionName','finalTotalAmount')zgdq.sort((a,b)=>{return b.value - a.value})zgdq = qwg(zgdq,5)console.log(zgdq);let options4 = {title:{text:'條形圖展示2020年消費額最高的5個地區'},xAxis:{name:'消費額'},yAxis:{name:'地區',data:data(zgdq,'name')},series:{type:'bar',data:data(zgdq,'value')}}myChats.setOption(options4)

子任務五：用散點圖展示省份平均消費額

編寫Vue工程代碼，根據接口，用基礎散點圖展示2020年最高10個省份平均消費額（四舍五入保留兩位小數），同時將用于圖表展示的數據結構在瀏覽器的console中進行打印輸出，將圖表可視化結果和瀏覽器console打印結果分別截圖并粘貼?

?

//散點圖展示2020年最高10個省份平均消費額let sdt = xfe(datas, "provinceName", "finalTotalAmount");sdt.sort((a, b) => {return b.value - a.value;});sdt = qwg(sdt, 10);console.log(data(sdt, "name", false));console.log(data(sdt, "value", true));let options5 = {title: {text: "散點圖展示2020年最高10個省份平均消費額",},xAxis: {name: "省份",data: data(sdt, "name", false),},yAxis: {name: "平均消費額",},series: {type: "scatter",data: data(sdt, "value", true),},};myChats.setOption(options5)

?

?

?

?