可视化题目与以往相同,做法类似,我这里展示得到语句后处理优化以后的代码,以函数式来写可视化,比以前400-500多行代码简洁到100多行。其他题目见本栏目,那里面的代码都是没有优化后的,这次主要以效率和精简给大家提供更多的思路。
我们得到的接口数据类似这种 :
编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴
- <div id="main" style="width: 1000px; height: 400px">div>
-
- 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)