Vue3+Echarts数据可视化+项目打包

第一步

安装Node.js

网址：下载 | Node.js 中文网

下载自己对应的操作系统版本即可

第二步

全局下载项目脚手架

win+R输入cmd进入终端对话框，

输入 npm install -g @vue/cli

等待下载完成即可，

速度可能比较慢请耐心等待~

第三步

创建项目

打开编译软件，我这里使用 PyCharm 

输入命令：cd 输入想要在里面创建项目的文件夹路径 演示如下

因为前面通过这个

“ npm install -g @vue/cli”命令安装了全局脚手架，

所以接下来使用“vue create 项目名”来创建一个vue3项目

“上 下”方向键移动，选好后按“回车”键

“上 下”方向键移动 ，“空格”键选择，选好后按“回车”键

“回车”后，输入“y”再“回车”，可进入以下界面，

这里我选择Less

选择“ESLint with error prevention only”，然后回车

“Basic”是选择了“ESLint with error prevention only”才会显示的，

接下来选择“Lint on save” 然后 “回车”

然后选择“In dedicated config files”然后“回车”

接下来输入“N”拍回车，等待它给出返回

像这样就说明创建成功了

接下来按照它给出的返回提示进行操作

出现这个，就说明它成功运行了，可按Ctrl键+鼠标左键跳转浏览器

像这样就成功了

第四步

初始化项目

像这样打开，可以看到“AboutView.vue”和“HomeView.vue”这两个文件

把“AboutView.vue”和“HomeView.vue”这两个文件，删除掉，删除以后是这样的

然后在“views”里，创建一个“homePage.vue”文件

在“homePage.vue”文件里进行编写，代码如下

<script>
import ItemPage from "@/components/itemPage.vue";
import ItemOne from "@/components/itemOne.vue";
import ItemTwo from "@/components/itemTwo.vue";
import ItemThree from "@/components/itemThree.vue";
import ItemFour from "@/components/itemFour.vue";
import MapPage from "@/components/mapPage.vue";

import {inject} from "vue";

export default {
  components:{
    ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour,MapPage
  },
  setup(){
    let $echarts = inject("echarts")
    let $http = inject("axios")
    console.log($echarts)
    console.log($http)
  }
}
</script>

<template>
<div>
  <header>
    <h1>大数据可视化</h1>
  </header>

<!--大容器-->
  <section class="container">
  <!--左容器-->
    <section class="itemLeft">
      <ItemPage>
        <ItemOne/>
      </ItemPage>
      <ItemPage>
        <ItemTwo/>
      </ItemPage>
    </section>
  <!--中容器-->
    <section class="itemCenter">

      <MapPage/>
    </section>
  <!--右容器-->
    <section class="itemRight">
      <ItemPage>
        <ItemThree/>
      </ItemPage>
      <ItemPage>
        <ItemFour/>
      </ItemPage>
    </section>
  </section>
</div>
</template>

<style lang="less">
  header{
    height: 1rem;
    width: 100%;
    background-color: rgba(0,0,255,0.2);
    //标题的文字样式
    h1{
      font-size: 0.375rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }
  }

  //大容器的样式
  .container{
    //最大和最小的宽度
    min-width: 1200px;
    max-width: 2048px;
    margin: 0 auto;
    padding:0.125rem 0.125rem 0;
    display: flex;
    //设置左右在页面的份数
    .itemLeft, .itemRight{
      flex: 3;
    }
    .itemCenter{
      flex: 5;
      height: 10.5rpx;
      border: 1px solid blue;
      padding: 0.125rem;
      margin: 0.25rem;
    }
  }
</style>

第五步

配置路由

1.像这样找到“router”文件夹里的“index.js”文件

“router”文件夹里的“index.js”，代码如下，

注意：记得“Ctrl+A”全选后再粘贴，在这复制的代码，不要保留原配置代码

import { createRouter, createWebHashHistory} from 'vue-router'


const routes = [

  {
    path: '/page',
    name: 'page',
    component: () => import('../views/homePage.vue')
  },
  {
    path: "/",
    redirect: '/page',
  }
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router

2.接下来找到“store”文件夹里的“index.js”文件然后进行编译

“store”文件夹里的“index.js”代码如下

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

3.在项目文件夹终端使用“npm install --save echarts”

来安装模块

4.接下来继续使用“npm install --save axios”

来安装模块，完成以后进入第六步

第六步

配置App.vue文件使其能够正常运行

像这样找到App.vue文件

然后进行编译，代码如下

<template>
  <router-view/>
</template>

<script>
import {provide} from "vue"
import * as echarts from "echarts"
import axios from "axios";
//设置基准路径
axios.defaults.baseURL = "http://localhost:8888/";
export default {
  setup(){
    // provider("名字随便起","传递的内容")
    provide("echarts",echarts)
    provide("axios",axios)
  }
}

</script>

<style lang="less">
body{
  background: url("~@/assets/bg.jpg") top center no-repeat;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
</style>

第七步

响应式分辨率

1.在项目文件夹终端输入“npm install --save lib-flexible”来获取所需工具

2.如图找到“main.js”文件

在“main.js”文件中进行编译，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引用插件
import "lib-flexible/flexible"

createApp(App).use(store).use(router).mount('#app')

3.Ctrl+F查找，在搜索框输入“lib-flexible”，然后如图找到“flexible.js”文件

进入“flexible.js”文件进行编译，代码如下：

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
        //修改 最小值400  最大值2560
        if (width / dpr < 400) {
            width = 400 * dpr;
        }else if (width / dpr > 2560) {
            width = 2560 * dpr;
        }
        //设置成24分 1920px设计稿 1rem 就是80px (1920/24=80)
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

第八步

插入背景图

背景图如下

背景图命名要求为“bg.jpg”

把“bg.jpg”背景图如图所示放入 “assets”文件夹下面

第九步

找到如图 “components”文件夹，并在文件夹下创建“itemOne.vue”，“itemTwo.vue”，“itemThree.vue”，“itemFour.vue”，“itemPage.vue”，“mapPage.vue”

“itemOne.vue”：第一个可视化

“itemTwo.vue”：第二个可视化

“itemThree.vue”：第三个可视化

“itemFour.vue”：第四个可视化

“itemPage.vue”：插槽

“mapPage.vue”：地图数据可视化

“itemOne.vue”代码如下：

<script>
import {inject,onMounted,reactive} from "vue";
export default {
setup(){
  let $echarts = inject("echarts")
  let $http = inject("axios")

  let data = reactive({})
  let xdata = reactive([])
  let ydata = reactive([])
  function setData(){
    xdata = data.data.chartData["'chartData'"].map(v=>v.title)
    ydata = data.data.chartData["'chartData'"].map(v=>v.num)
    console.log("xdata:",xdata)
    console.log("ydata:",ydata)

  }
  async function getState(){
   data = await $http({url:"/one/data"})
    // console.log(oneData.data.chartData["'chartData'"])
  }

  onMounted(()=>{

    //调用请求
    getState().then(()=>{
      setData()
           let myChart = $echarts.init(document.getElementById("oneChart"));

      myChart.setOption({
        //提示框
          tooltip:{
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              //文本标签样式
              label:{
                backgroundColor:"#e6b600"
              }
            }
          },
       grid:{
         top:"3%",
         left:"1%",
         right:"6%",
         bottom:"3%",
         containLabel: true


       },
       xAxis:{
         type:"value",
         axisLine:{
           lineStyle:{
             color:'#fff'
           }
          }
       },
       yAxis:{
         type:"category",
         data:xdata,
          axisLine:{
           lineStyle:{
             color:'#fff'
           }
          }

       },
       series:[
         {

           data:ydata,
           type:"bar",
           //设置渐变颜色
           itemStyle:{

             normal:{

               barBorderRadius:[0,20,20,0],
               color:new $echarts.graphic.LinearGradient(0,0,1,0,[
                   {
                 offset:0,
                 color:"#005eaa"
          },
                   {
                     offset:0.5,
                     color:"#339ca8",
                   },
                   {
                     offset:1,
                     color:"#cda819"
                   },
               ])
             }
           }
         }
       ]

     })
    })

  })
  return{
      getState,data,xdata,ydata,setData
  }
}
}

</script>

<template>
  <div>
    <h2>销量总量</h2>
    <div class="chart" id="oneChart">

    </div>
  </div>

</template>

<style scoped>

.chart{
  height: 4.5rem;
}

h2{
  height: 0.6rem;
  color: white;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}

</style>

“itemTwo.vue”代码如下：

<script>
import {inject,onMounted,reactive} from "vue";
export default {
   setup(){
     let $echarts = inject("echarts");
     let $http = inject("axios")

     let data = reactive({})

    async function getState(){
      data = await $http({url:"/two/data"})
    }

    onMounted(()=>{
      getState().then(()=>{
        console.log("折线图",data)
       let myChart = $echarts.init(document.getElementById("myEchartsTwo"));

        myChart.setOption({
          //提示框
          tooltip:{
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              //文本标签样式
              label:{
                backgroundColor:"#e6b600"
              }
            }
          },
          //设置图例
          legend:{
            data:["服饰","数码","家电","家具","日化"]
          },
          grid:{
            left:'1%',
            right:'4%',
            bottom:'3%',
            containLabel: true
          },
          xAxis:{
            type:"category",
            boundaryGap:false,
            data:data.data.chartTwo.chartData.day,
            axisLine:{
              lineStyle:{
                color:'#fff'
                    }
                }
          },
          yAxis:{
            type:"value",
            axisLine:{
              lineStyle:{
                color:'#fff'
                    }
                }
          },
          series:[
            {
              name:"服饰",
              type:'line',
              data:data.data.chartTwo.chartData.num.Chemicals,
              //给予平滑效果
              smooth:true,
              //隐藏点
              showSymbol:false,
              //数据堆叠
              stack:"Total",
              //隐藏线段
              lineStyle:{
                width:0,
              },
              //设置高亮
              emphasis:{
                focus:"series"//series只显示选中的那个
              },
              areaStyle:{
                //透明度
                opacity:0.8,
                //设置颜色（渐变）
                color:new  $echarts.graphic.LinearGradient(0,0,0,1,
                    [
                        {
                      offset:0,
                      color:"rgb(128,255,165)",
                    },
                      {
                        offset:1,
                        color:"rgb(1,191,236)"
                      },
                    ])

              }
            },
               {
              name:"数码",
              type:'line',
              data:data.data.chartTwo.chartData.num.Clothes,
                //给予平滑效果
              smooth:true,
              //隐藏点
              showSymbol:false,
              //数据堆叠
              stack:"Total",
              //隐藏线段
              lineStyle:{
                width:0,
              },
              //设置高亮
              emphasis:{
                focus:"series"//series只显示选中的那个
              },
              areaStyle:{
                //透明度
                opacity:0.8,
                //设置颜色（渐变）
                color:new  $echarts.graphic.LinearGradient(0,0,0,1,
                    [
                        {
                      offset:0,
                      color:"rgb(0,221,255)",
                    },
                      {
                        offset:1,
                        color:"rgb(77,119,255)"
                      },
                    ])

              }


            },
               {
              name:"家电",
              type:'line',
              data:data.data.chartTwo.chartData.num.Electrical,
                 //给予平滑效果
              smooth:true,
              //隐藏点
              showSymbol:false,
              //数据堆叠
              stack:"Total",
              //隐藏线段
              lineStyle:{
                width:0,
              },
              //设置高亮
              emphasis:{
                focus:"series"//series只显示选中的那个
              },
              areaStyle:{
                //透明度
                opacity:0.8,
                //设置颜色（渐变）
                color:new  $echarts.graphic.LinearGradient(0,0,0,1,
                    [
                        {
                      offset:0,
                      color:"rgb(55,162,255)",
                    },
                      {
                        offset:1,
                        color:"rgb(116,21,219)"
                      },
                    ])

              }

            },
               {
              name:"家具",
              type:'line',
              data:data.data.chartTwo.chartData.num.digit,
                 //给予平滑效果
              smooth:true,
              //隐藏点
              showSymbol:false,
              //数据堆叠
              stack:"Total",
              //隐藏线段
              lineStyle:{
                width:0,
              },
              //设置高亮
              emphasis:{
                focus:"series"//series只显示选中的那个
              },
              areaStyle:{
                //透明度
                opacity:0.8,
                //设置颜色（渐变）
                color:new  $echarts.graphic.LinearGradient(0,0,0,1,
                    [
                        {
                      offset:0,
                      color:"rgb(255,0,135)",
                    },
                      {
                        offset:1,
                        color:"rgb(135,0,157)"
                      },
                    ])

              }
            },
               {
              name:"日化",
              type:'line',
              data:data.data.chartTwo.chartData.num.gear,
                 //给予平滑效果
              smooth:true,
              //隐藏点
              showSymbol:false,
              //数据堆叠
              stack:"Total",
              //隐藏线段
              lineStyle:{
                width:0,
              },
              //设置高亮
              emphasis:{
                focus:"series"//series只显示选中的那个
              },
              areaStyle:{
                //透明度
                opacity:0.8,
                //设置颜色（渐变）
                color:new  $echarts.graphic.LinearGradient(0,0,0,1,
                    [
                        {
                      offset:0,
                      color:"rgb(255,191,0)",
                    },
                      {
                        offset:1,
                        color:"rgb(224,62,76)"
                      },
                    ])

              }
            },
          ]
        })
      })
    })
   }
}

</script>

<template>
  <div>
    <h2>周销图</h2>
    <div class="chart" id="myEchartsTwo">
    </div>
  </div>

</template>

<style>

</style>

“itemThree.vue”代码如下：

<script>
import {inject,onMounted,reactive} from "vue";
export default {
  setup(){
    let $echarts =  inject("echarts");
    let $http = inject("axios");

    let data = reactive({})

    async function getState(){
      data = await $http({url:"/three/data"})
    }
    onMounted(()=>{
      getState().then(()=>{
        console.log("饼状图",data)

        let myChart =  $echarts.init(document.getElementById("myEcharts"));
        myChart.setOption({
          //添加图例
          legend:{
            top:"bottom"
          },
          tooltip:{
            show: true,
          },
          series:[
            {
              type: "pie",
              data:data.data.chartThree.charData,
              radius:[10,100],
              center:["50%","45%"],
              roseType:"area",
              itemStyle:{
                //设置圆角
                borderRadius:10

              }
            }
          ]
        })
      })
    })
    return{
        getState,data
    }
  }
}

</script>

<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" id="myEcharts">
    </div>
  </div>

</template>

<style>
h2{
  height: 0.6rem;
  color: white;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
.chart{
  height: 4.5rem;
}
</style>

“itemFour.vue”代码如下：

<script>
import {inject,onMounted,reactive} from "vue";
export default {
  setup(){
    let $echarts =  inject("echarts");
    let $http = inject("axios");

    let data = reactive({})

    async function getState(){
      data = await $http({url:"/four/data"})
    }
    onMounted(()=>{
      getState().then(()=>{
        console.log("柱形图",data)

        let myChart =  $echarts.init(document.getElementById("myEchartsFour"));
        myChart.setOption({
          grid:{
            left:"3%",
            right:"4%",
            bottom:"3%",
            containLabel:true,
          },
          xAxis:{
            type:"category",
            data:data.data.chartFour.chartData.day,
            axisLine:{
              lineStyle:{
                color:'#fff'
                    }
                }
          },
          yAxis:{
                type:"value",
                axisLine:{
              lineStyle:{
                color:'#fff'
                    }
                }
          },
          //图例
          legend:{

          },
          tooltip:{
            trigger:"axis",
            axisPointer:{
              type:"shadow",
            }
          },
          series:[
            {
              name:"服饰",
              type:'bar',
              data:data.data.chartFour.chartData.num.Chemicals,
              stack:"Total",
              //开启显示内容
              label:{
                show:true,
              },
              emphasis:{
                focus:"series"
              }
            },
              {
              name:"数码",
              type:'bar',
              data:data.data.chartFour.chartData.num.Clothes,
              stack:"Total",
                //开启显示内容
              label:{
                show:true,
              },
              emphasis:{
                focus:"series"
              }
            },
              {
              name:"家电",
              type:'bar',
              data:data.data.chartFour.chartData.num.Electrical,
              stack:"Total",
                //开启显示内容
              label:{
                show:true,
              },
              emphasis:{
                focus:"series"
              }
            },
              {
              name:"家具",
              type:'bar',
              data:data.data.chartFour.chartData.num.digit,
              stack:"Total",
                //开启显示内容
              label:{
                show:true,
              },
              emphasis:{
                focus:"series"
              }
            },
              {
              name:"日化",
              type:'bar',
              data:data.data.chartFour.chartData.num.gear,
              stack:"Total",
                //开启显示内容
              label:{
                show:true,
              },
              emphasis:{
                focus:"series"
              }
            },
          ]
        })
      })
    })
        return{
        getState,data
    }
  }
}
</script>

<template>
  <div>
    <h2>库存统计图</h2>
    <div class="chart" id="myEchartsFour">

    </div>
  </div>

</template>

<style>

</style>

“itemPage.vue”代码如下:

<script>
export default {

}

</script>

<template>
  <div class="item">
    <!--设置插槽-->
    <slot></slot>
  </div>
</template>

<style lang="less">
.item{
  height: 5.125rem;
  border: 1px solid blue;
  margin: 0.25rem;
  background-color: rgba(12,130,255,0.85);
}
</style>

“mapPage.vue”代码如下：

<script>
import axios from "axios";
import {onMounted, reactive,inject} from "vue";
export default {

  setup(){
    let $echarts=inject("echarts");
    let mapData = reactive({});
    async function getState(){
     mapData = await axios.get("/china/data")
    }

    onMounted(()=>{
      console.log("地图数据",mapData)
      getState().then(()=>{
        console.log("map",mapData)
        $echarts.registerMap("china",mapData.data.chinaData)
      let myChart =  $echarts.init(document.getElementById("map"));
        myChart.setOption({
          geo:{
            map:"china",
            itemStyle:{
              //填充颜色
              areaColor:"#0099ff",
              //边框颜色
              borderColor:"#00ffff",
              //阴影颜色
              shadowColor:"rgba(230, 130, 70, 0.5)",
              //模糊度
              shadowBlur:30,
              //淡出
              emphasis:{
                focus:"self"
              }
            }
          },
              //散点图数据
            //显示悬浮框
          tooltip:{
            trigger: 'item',
          },
          //标题设置
          title:{
            text:"城市销量",
            left:"45%",
            textStyle:{
              color:"#fff",
              fontSize:20,
              textShadowBlur:10,
              textShadowColor:"#fff"
            }
          },
          //视觉映射
          visualMap:{
              type: "continuous",//continuous连续类型
            //设置最大值和最小值
              min:100,
              max:5000,
            //滑动效果
            //开启
            calculable:true,
            //颜色设置
            inRange:{
                color:["#50a3ba","#eac736","#d94e4d"],
            },
            textStyle:{
                color:"#fff"
            }

          },
              series:[
                {
                  type:"scatter",
                  itemStyle:{
                    color:"red",
                  },
                  //指定坐标系
                  coordinateSystem:"geo",
                  data:[
                  {name:"北京",value:[116.46,39.92,4367]},
                  {name:"上海",value:[121.48,31.22,8675]},
                  {name:"深圳",value:[114.07,22.62,2461]},
                  {name:"广州",value:[113.23,23.16,187]},
                  {name:"西安",value:[108.45,34,3421]}
                  ]
                }
              ]
        });
      });
    });

    return{
      getState
      ,mapData
    };
  },
};
</script>

<template>
<div class="map" id="map">

</div>
</template>

<style>
.map{
  width: 100%;
  height: 100%;
}

</style>

第十步

创建后端数据

新建server文件夹

在“server”里创建“index.js”文件,和“router”文件夹

“index.js”代码如下

//合并和创建http服务
//创建
let express=require('express');
//容纳
let app=express();
//设置跨域
app.use(function(reg,res,next){
    res.header("Access-Control-Allow-Origin",'*');


    res.header("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");
    next();
})

// 引用路由文件
let chartOne=require('./router/one');
let chartTwo=require('./router/two');
let chartThree=require('./router/three');
let chartFour=require('./router/four');
let chartMap=require('./router/map');

//开始使用
//使用中间件来配置路由
app.use("/one",chartOne);
app.use("/two",chartTwo);
app.use("/three",chartThree);
app.use("/four",chartFour);
app.use("/china",chartMap);

//监听端口
app.listen(8888)

然后在“router”文件夹里创建“one.js”，“two.js”，“three.js”，“four.js”，“map.js”文件，

在里面编写路由代码

“one.js”代码如下：

let express = require('express');
let router = express.Router();
let oneData = require("../mock/one.json")

// 定义路由地址
router.get('/data',  (req, res)=>{
    res.send({msg:"我是one的路由地址",chartData:oneData})
})

//为了让其他文件能使用所以需要暴漏
//暴漏
module.exports = router

“two.js”代码如下：

let express = require('express');
let router = express.Router();
let twoData = require("../mock/two.json")

// 定义路由地址
router.get('/data',  (req, res)=>{
    res.send({msg:"我是two的路由地址",chartTwo:twoData})
})

//为了让其他文件能使用所以需要暴漏
//暴漏
module.exports = router

“three.js”代码如下

let express = require('express');
let threeData = require("../mock/three.json");
let router = express.Router();

// 定义路由地址
router.get('/data',  (req, res)=>{
    res.send({msg:"我是three的路由地址",chartThree:threeData})
})


//为了让其他文件能使用所以需要暴漏
//暴漏
module.exports = router

“four.js”代码如下

let express = require('express');
let fourData = require("../mock/four.json");
let router = express.Router();

// 定义路由地址
router.get('/data',  (req, res)=>{
    res.send({msg:"我是four的路由地址",chartFour:fourData})
})
//为了让其他文件能使用所以需要暴漏
//暴漏
module.exports = router

“map.js”代码如下：

let express = require('express');
let router = express.Router();
let mapData = require("../mock/china.json")

// 定义路由地址
router.get('/data',  (req, res)=>{
    res.send({msg:"我是地图的路由地址",chinaData:mapData})
})

//为了让其他文件能使用所以需要暴漏
//暴漏
module.exports = router

第十一步

在server文件夹终端下载 express

使用 npm install --save express

第十二步

api接口数据创建

在server文件夹里，新建“mock”文件夹，

在“mock”文件夹里创建“china.json”，“one.json”，“two.json”，“three.json”，“four.json”

“china.json”数据有点多请前往：file.geojson.cn/china/1.6.2/china.json

“one.json”数据如下

{
    "'chartData'":[
        {"title":"冰箱","num":1827},
        {"title":"洗衣机","num":342},
        {"title":"电视机","num":541},
        {"title":"微波炉","num":1347},
        {"title":"烤箱","num":2431},
        {"title":"空调","num":876},
        {"title":"洗碗机","num":1578}
    ]
}

“two.json”数据如下

{
    "chartData":{
    "day":["星期1","星期2","星期3","星期4","星期5","星期6","星期7"],
    "num":{
        "Clothes":[140,232,101,264,90,340,250],
        "digit":[120,282,111,234,220,340,310],
        "Electrical":[320,132,201,334,190,130,220],
        "gear":[220,402,231,134,190,230,120],
        "Chemicals":[220,302,181,234,210,290,150]
        }
    }
}

“three.json”数据如下

{
  "charData":[
    {"value":567,"name":"服饰"},
    {"value":123,"name":"数码"},
    {"value": 324,"name":"家电"},
    {"value": 324,"name":"家电"},
    {"value":453,"name":"日化"},
    {"value":767,"name":"熟食"}
  ]
}

“four.json”数据如下

{
    "chartData":{
    "day":["星期1","星期2","星期3","星期4","星期5","星期6","星期7"],
    "num":{
        "Clothes":[320,502,401,334,390,430,720],
        "digit":[234,564,443,234,754,430,321],
        "Electrical":[220,321,335,534,390,330,310],
        "gear":[269,212,491,368,341,330,410],
        "Chemicals":[820,832,901,934,1290,1330,1320]
        }
    }
}

第十三步

运行看结果

在前端项目文件夹终端，

使用指令 “yarn serve” 来运行前端vue

出现以上界面说明没有接收到API数据，这个时候就需要启动后端程序了

启动后端程序

在后端项目文件夹终端

使用指令：“node index.js”来启动后端

前后端启动以后结果是这样的

第十四步

打包项目

在前端项目文件夹终端使用

命令“npm run build”来打包

像这样就是打包成功了

打包后在项目文件夹里会出现一个“dist”文件夹

第十五步

验证打包后是否能够正常使用

打包后运行的结果是这样的，为什么会这样？

因为后端没有运行，所以前端没有接收到AIP数据

接下来开启后端

使用指令：“node index.js”启动后端

启动后端以后，回到刚刚运行的打包后的前端就可以看到还是没数据，

这个时候就需要刷新一下了

刷新后就可以看到，已经有数据出现了