模块E代码

数据抽取步骤

需要将可视化所需数据先抽取出来，才能使用图表展示。

启动 bigdata3 上的 app4.js api模拟运行环境

1
2
3

cd /usr/local/src/express
node app4.js
node app5.js

出现 listening on 8990 的提示则启动成功。（注：比赛期间比赛环境会准备好后端API请求，无需自行开启，此步骤适用于自行练习时启动相关模拟环境）

启动 postman ，按图例操作，抽取数据为json格式保存到本地：

启动 postman

将获取模式更改为 POST

获取地址为 http://192.168.152.122:8990/api/selectData，设置请求body的用户名和密码：

将获取内容更改为 Raw 格式，并保存文件

将保存 json 数据放到项目包里

删除首尾 "data" 字样，保留中括号内内容

新建Scala工程，编写 Scala 代码，处理相关数据：

import org.apache.log4j.{Level, Logger}  
import org.apache.spark.sql.SparkSession  
  
object EchartRead {  
  def main(args: Array[String]): Unit = {  
    // 关闭日志  
    Logger.getLogger("org").setLevel(Level.OFF)  
    Logger.getLogger("akka").setLevel(Level.OFF)  
    // 创建SparkSession  
    val spark = SparkSession.builder()  
      .appName("GGG")  
      .master("local")  
      .getOrCreate()  
  
    // 读取json文件 需要根据你的文件实际存放位置进行更改
    val df1 = spark.read.json("C:\\Users\\xs\\IdeaProjects\\myspark01\\response.json")  
    // 将DataFrame注册为临时视图  
    df1.createOrReplaceTempView("test1")  
    // 打印DataFrame的schema  
    df1.printSchema()  
    // 查询前五大省份的订单总额  查询sql语句根据题目要求更改
    val df2 = spark.sql("select provinceName, sum(finalTotalAmount) as sp from test1 group by provinceName order by sp desc limit 5")  
    df2.show()  
    // 查询后五大省份的订单总额  查询sql语句根据题目要求更改
    val df3 = spark.sql("select provinceName, sum(finalTotalAmount) as sp from test1 group by provinceName order by sp asc limit 5")  
    df3.show()  
  }  
  
}

运行相关代码，将对应数据填入可视化前端代码数据区域中：

可视化示例代码

参考文档

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/js/echarts.min.js"></script>
</head>
<body>
<!-- 
<div>   
<script>        (柱状/条形)="bar",折线="line",饼="pie",漏斗="funnel",         </script>  
</div> -->
    <div id="main" style="width: 500px;height:400px;"></div>
    <div id="main2" style="width: 500px;height: 400px;"></div>
    <div id="main3" style="width: 500px;height:400px;"></div>
    <div id="main4" style="width:500px;height:400px;"></div>
    <div id="main5" style="width: 500px;height:400px"></div>
    <div id="main6" style="width: 500px;height:400px;"></div>
    <div id="main7" style="width:500px;height: 400px;"></div>
    <script>
        var myChart=echarts.init(document.getElementById('main'))
        var option={
            title:{text:"雷达",x:"center"},
            legend:{y:"bottom"},
            tooltip:{},
            radar:{indicator:[{name:"A",max:50},{name:"B",max:50},{name:"C",max:50},{name:"D",max:50},{name:"E",max:50}],shape:"circle"},
           series:[{
            type:"radar",areaStyle:{},
            data:[{name:"one",value:[35,15,42,28,25]}]
           }]
        }
      myChart.setOption(option)
    </script>
    <script>
        var myChart2=echarts.init(document.getElementById('main2'))
        var option2={
            title:{text:"柱百分比",x:"center"},
            legend:{y:"bottom"},
            tooltip:{},
            xAxis:{data:["A","B","C","D","E"]},
            yAxis:{},
            series:[{
                name:"two",type:"bar",label:{ show:true,position:"top",formatter:"{b}\n{c}"},
                data:[40,36,15,58,56]
            }]
        }
        myChart2.setOption(option2)
    </script>
    <script>
        var myChart3=echarts.init(document.getElementById('main3'))
        var option3={
            title:{text:"饼t图",x:"center"},
            legend:{y:"bottom"},
            tooltip:{},
            series:[{
                name:"饼",type:"pie",
                label:{  formatter:"{b}{d}%"},
                data:[{name:"A",value:45},{name:"B",value:56},{name:"C",value:34},{name:"D",value:42},{name:"E",value:35}]
            }]
        }
       myChart3.setOption(option3) 
    </script>

<script>
    var myChart4=echarts.init(document.getElementById('main4'))
    var  option4={
        title:{text:"条形",x:"center"},
        legend:{y:"bottom"},
        tooltip:{},
        yAxis:{data:["A","B","C","D","E"]},
        xAxis:{},
        series:[{
            name:"four",type:"bar",data:[15,6,20,15,17]
        }]
    }
    myChart4.setOption(option4)
</script>

<!-- -----------------------------------------------散点-------------------------------------------- -->
 <script>
var myChart5=echarts.init(document.getElementById('main5'))
var option5={
    title:{text:"散点图",x:"center"},
    legend:{y:"bottom"},
    tooltip:{},
    xAxis:{type:"value",name:"x轴"},
    yAxis:{type:"value",name:"y轴"},
    series:[{
        type:"scatter",
        data:[[10,8],[8,12],[16,6],[12,10],[8,15]]
    }]
}
myChart5.setOption(option5)
</script> 
<!-- <script>
    var myChart5=echarts.init(document.getElementById('main5'))
    var data=[[10,20],[20,30],[30,40],[40,50],[50,60]]
    var option5={
        title:{text:"散点图",x:"center"},
        xAxis:{name:"x轴"},
        yAxis:{name:"y轴"},
        series:[{
            type:"scatter",
            data:data,
            symbolSize:10,
            itemStyle:{
                color:"bule"
            }
        }]
    }
    myChart5.setOption(option5)
</script>  -->
<!-- <script>
    var myChart6=echarts.init(document.getElementById('main6'))
    var  hours=["1点","2点","3点","4点","5点","6点"]
    var data=[[0,1,1],[0,2,0],[0,4,2],[1,0,3],[2,0,3],[2,2,1],[0,1,4],[3,1,0],[0,4,2],[2,1,0],[2,1,1],[1,4,0]]
    var option6={
        title:{text:"单轴散点",x:"center"},
        tooltip:{position:"top"},
  
  
        option6.singleAxis.push({
            type:"category",
            boundaryGap:flase,

        }),
        series:[]
    }
</script> -->

<!-- ----------------------------------------玫瑰----------------------------------------------------  -->

<script>
    var myChart6=echarts.init(document.getElementById('main6'))
    var option6={
        title:{text:"玫瑰图",x:"center"},
        legend:{y:"bottom"},
        tooltip:{},
        series:[{
            name:" 玫瑰",
            type:'pie',
            //半径
            radius:[50,100],
            center:['50%','50%'],
            //扇形文字位置
            label:{show :true,
           // position:'inside'},里面
           //position:'center',中间
           position:'outside'},
           //外面
            //花型
            roseType:"area",
            //控制不规则
            itemStyle:{
                broderRadius:6
            },
            label:{formatter:"    {b}  {d}% "},
            data:[
{name:'one',value:34},
{name:'two',value:45},
{name:'three',value:42},
{name:'four',value:32},
{name:'five',value:45},
{name:'six',value:23}
            ]
        }]
    }
myChart6.setOption(option6)
</script>
<script>
var myChart7=echarts.init(document.getElementById('main7'))
var option7={
    title:{text:"折线",x:"center"},
    legend:{y:"bottom"},
    tooltip:{},
    xAxis:{data:["A","B","C","D","E"]},
    yAxis:{},
    series:[{
        name:"折线",
        type:"line",
        data:[12,13,14,15,16]
    }]
}
myChart7.setOption(option7)
</script>
<div id="main8" style="width: 500px;height:400px;"></div>
    <script>
       var myChart8=echarts.init(document.getElementById('main8'))
       var option8={
        title:{text:"各地区2020年消费总额占比",x:"center"},
        legend:{y:"bottom"},
        tooltip:{},
        series:[{
            type:"pie",
            roseType:"area",
            radius:[50,100],
            center:['50%','50%'],
            label:{  formatter:"     {b}   {d}%"},
            data:[
                  {name:"dongbei",value:869},
                  {name:"dongbuyanhai",value:959},
                  {name:"huabei",value:439},
                  {name:"xinan",value:508},
                  {name:"zhongbu",value:980}
            ]
        }]
       }
        myChart8.setOption(option8)
    </script>
<div id="main9" style="width: 500px;height:400px;"></div>
<script>
    var myChart9=echarts.init(document.getElementById('main9'))
    var option9={
        title:{text:"2020年消费额最高的十个省份",x:"center"},
        legend:{y:"bottom"},
        tooltip:{},
        yAxis:{data:["jiangsu","sichuan","hubei","hunan","henan","fujian","yunan","shanxi","guangdong","heilongjiang"]},
        xAxis:{},
        series:[{
            name:"消费额",
            type:"bar",
            data:[308,306,290,284,259,255,244,241,223,219]
        }]
    }
    myChart9.setOption(option9)
</script>
<div id="main10" style="width: 500px;height:400px;"></div>
 <script>
    var myChart10=echarts.init(document.getElementById('main10'))
    var option10={
        title:{text:"2020年各地区消费额中位数",x:"center"},
        legend:{y:"bottom"},
        tooltip:{},
        xAxis:{data:["dongbei","dongbuyanhai","huabei","zhongbu","xinan"]},
        yAxis:{},
        series:[{
            name:"消费额",
            label:{formatter:"  {b} \n {c}"},
            type:"bar",
            data:[10,10.5,10,10,8]
        }]
    }
    myChart10.setOption(option10)
 </script>
 <!-- <div id="main11" style="width: 500px;height:400px;"></div>
 <script>
        console.log("")
        console.log([])
        console.log([])
        var myChart11=echarts.init(document.getElementById('main11'))
        var option11={
            title:{text:"",x:"center"},
            leged:{y:"bottom"},
            tooltip:{},
            series:[{
                name:"",
                type:"pie",
                label:{ formatter:"{b}   {d}%"},
                data:[{name:"",value:},{name:"",value:},{name:"",value:},{name:"",value:},{name:"",value:}]
            }]
        }
myChart11.setOption(option11)
 </script> -->

 <div id="main12" style="width: 600px;height:600px;"></div>
 <div id="main13" style="width: 600px;height:600px;"></div>
 <div id="main14" style="width: 600px;height:600px;"></div>
 <div id="main15" style="width: 600px;height:600px;"></div>
 <div id="main16" style="width: 600px;height:600px;"></div>
 <div id="main17" style="width: 600px;height:600px;"></div>
 <script>
    // console.log("")
    // console.log([])
    // console.log([])
    var myChart12=echarts.init(document.getElementById('main12'))
    var option12={
        title:{text:"正负条形图",x:"center"},
        legend:{data:["A","B","C"],y:"bottom"},
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            }
            },
            grid:{
                left:"3%",
                right:"4%",
                bottom:"3%",
                containLabel:true
            },
        xAxis:[{
            type:'value'
        }],
        yAxis:[{
            type:'category',
            axisTick:{
                  show:false
            },
            data:["1","2","3","4","5","6","7"]
        }],
        series:[{
            name:"A",
            type:"bar",
            label:{
                  normal:{
                    show:true,
                    position:'inside'
                  }
            },
            data:[23,13,43,23,53,21,54]
        },
    {
            name:"C",
            type:"bar",
            stack:"总量",
            label:{
                normal:{
                    show :true,
                }
            },
            data:[31,31,42,21,42,21,42]
    },
{
    name:"B",
    type:"bar",
    stack:"总量",
    label:{
        normal:{
            show:true,
            position:"left"
        }
    },
    data:[-21,-41,-45,-23,-53,-21,-24]
}]
    }
myChart12.setOption(option12)
 </script>
<!-- 到17 -->
<!-- ------------------------罕见----------------------------------------------- -->
<script>
              var myChart13=echarts.init(document.getElementById('main13'))
              var option13={
title:{text:"漏斗图",x:"center"},
tooltip:{},
legend:{y:"bootm"},
calculable:"true",
// 演算
series:[{
    name:"漏斗",
    type:"funnel",
    width:"40%",
   data:[
    {value:20,name:"A"},
    {value:40,name:"B"},
    {value:60,name:"C"},
    {value:80,name:"D"},
    {value:100,name:"E"}
   ]
},
{
    name:"金字塔",
    type:"funnel",
    x:"50%",
    // 控制两个图之间的距离
    sort:"ascending",
    // 倒过来很重要
    itemStyle:{
        normal:{
            label:{
                position:"left"
            }
        }
    },
    data:[
    {value:20,name:"A"},
    {value:40,name:"B"},
    {value:60,name:"C"},
    {value:80,name:"D"},
    {value:100,name:"E"}
   ]
}]
}
myChart13.setOption(option13)
</script>
   <!-- ------------------------------------echarts详细版------------------------------------------------ -->
<script>
        var myChart14=echarts.init(document.getElementById('main14'))
        var option3={
            title:{text:"测试",x:"center"},
            legend:{orient:"vertical",
        // 朝向排列垂直
        x:"left",
        data:["A","B","C","D","E"]
        // 这里有或者下面series里面name进行标记
        },
            tooltip:{},
            series:[{
                name:"饼",type:"pie",
                label:{  formatter:"{b}{d}%"},
                data:[{name:"A",value:45},{name:"B",value:56},{name:"C",value:34},{name:"D",value:42},{name:"E",value:35}]
            }]
        }
       myChart3.setOption(option3) 
    </script>
</script>
</body>
</html>