Echarts学习笔记7（后台、地图展示、4个图表、打包、服务器购买、前后台上线）

最新推荐文章于 2023-08-21 13:57:51 发布
最新推荐文章于 2023-08-21 13:57:51 发布
阅读量412 收藏
点赞数
分类专栏： 笔记 Echarts（5.0） 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60968779/article/details/124511603
版权

后台接口创建express介绍

后台路由创建

1.创建一个文件夹 server 在其中创建index.js与router文件夹容来容纳代码

2.在router下创建4个文件分别容纳 对应的接口

// 存放路由的文件
var express=require("express");
var router=express.Router()
// 设置路由
router.get("/data",function(req,res){
    res.send({msg:"第一个接口"})
})

// 暴露路由
module.exports=router

3.在index.js下引用使用刚才创建的内容

var express=require("express");
var app=express();
// 引用路由文件
var chartOne=require("./router/one.js");
var chartTwo=require("./router/two.js");
var chartThree=require("./router/three.js");
var chartFour=require("./router/four.js");
// 中间件中使用路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
// 请求是localhost:3000/user/路由文件中的地址
app.listen(3000)

api接口数据创建

1.在server文件夹下创建mock文件夹用来容纳数据(数据可以从代码中获取)

2.引用并且把数据返回给前台

var express=require("express");
var router=express.Router()
// 引用数据
let data=require("../mock/one.json")
router.get("/data",function(req,res){
    // 数据返回给前台
    res.send({msg:"第1个接口",data})
})


module.exports=router

解决跨域

var express=require("express");
var app=express();
app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
    // 千万不要网%%￥￥￥###
    // 千万不要网
    // 千万不要网
    next();
})

图表1基本设置销售总量

1.在components文件夹下的 itemOne.vue中 设置图表1

​​​​​​​

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>
// 1引用inject获取全局echarts
import {inject,onMounted} from "vue"
export default {
    setup() {
        // 2得到echarts对象
     let $echarts= inject("echarts")
     //3.需要获取到element,所以是onMounted 别忘了上面引用
    onMounted(() => {
        // 4.初始化echarts 别忘了给上面echarts容器添加id
        let myChart = $echarts.init(document.getElementById("chartDom"));
        // 5.绘制图表
        myChart.setOption({

        })
    })
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

2.我们要完成的横向柱状图

所以在设置echarts配置的时候。给xAxis 的type设置value数值轴。给yAxis设置 catehory类目轴

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>
// 1引用inject获取全局echarts
import {inject,onMounted} from "vue"
export default {
    setup() {
        // 2得到echarts对象
     let $echarts= inject("echarts")
     //3.需要获取到element,所以是onMounted 别忘了上面引用
    onMounted(() => {
        // 4.初始化echarts 别忘了给上面echarts容器添加id
        let myChart = $echarts.init(document.getElementById("chartDom"));
        // 5.绘制图表
        myChart.setOption({
            xAxis:{
                type:"value"
            },
            yAxios:{
                type:"category"
            },
 						series:[
                     {
                            type:"bar"
                     }
                  ]
        })
    })
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }

3 接下来我们需要图表展示的数据(后台提供)

设置axios请求

在组件内容请求数据

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>
import {inject,onMounted} from "vue"
export default {
    setup() {
      
    //  let $echarts= inject("echarts")
    //  引用axios
     let $http= inject("axios")
       // 设置数据请求方法 不要忘了return
      async function getState(){
          let chartData=await 	$http({url:"http://localhost:3000/one/data"})
          console.log(chartData)
       }
     
    onMounted(() => {
        
        // let myChart = $echarts.init(document.getElementById("chartDom"));
        // myChart.setOption({
        //     xAxis:{
        //         type:"value"
        //     },
        //     yAxios:{
        //         type:"category"
        //     },
 				//			series:[
         //               {
         //                    type:"bar"
         //               }
         //           ]
        // })

        // 测试数据请求的数据 但是先要把上面的注释掉否则会报错
        getState()
    })

    return {
        getState
    }
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

设置请求基准路径

后续我们右很多的请求 或者后期请求地址改变的时候我们在一个个组件的修改非常的麻烦 所以我们可以设置请求基准路径方便修改

1.在app.vue中设置

<script>
// 1.引用proivde
import {provide} from "vue"
// 2.引用echarts
import * as echarts from "echarts"
// 引用axios
import axios from 'axios'
// 设置请求基准路径
axios.defaults.baseURL="http://localhost:3000/"

export default {
  setup() {
    provide("echarts",echarts)//第一个参数是名字  第二个参数是你传递的内容
    provide("axios",axios)//第一个参数是名字  第二个参数是你传递的内容
  },
}
</script>

​​​​​​​2.在需要请求的地方只需要写请求的路由地址即可

async function getState(){
          let chartData=await $http({url:"chartDataOne"})
          console.log(chartData)
       }

处理数据

我们请求来的数据事一个数组对象 那么我们需要把x轴的数据于y轴的数据取出来变成两个数组方便echarts使用

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>
// 1.引用reactive
import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
  
    //  let $echarts= inject("echarts")
     let $http= inject("axios")
      async function getState(){
        //   3.吧请求过来的值传递给变量接收方便使用
          data=await $http({url:"chartDataOne"})
         
       }
         //   2.创建接受请求的数据于接受x轴的数据于y轴的数据 别忘了return
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
        // 4.创建处理数据的方法 
        function setData(){
          console.log("data",data)
        //   便利数据并且去除对应的值
           xdata=data.data.data.chartData.map(v=>v.title)
           ydata=data.data.data.chartData.map(v=>v.num)
           console.log("x",xdata)
           console.log("y",ydata)
        }
     
    onMounted(() => {
        
        // let myChart = $echarts.init(document.getElementById("chartDom"));
        // myChart.setOption({
        //     xAxis:{
        //         type:"value"
        //     },
        //     yAxios:{
        //         type:"category"
        //     },
 				//			series:[
         //               {
         //                    type:"bar"
         //               }
         //           ]
        // })

        // 5在请求成功之后调用处理数据的方法
        getState().then(()=>{
        // 测试下处理的数据
        setData()
        })

       
    })

    return {
        getState,data,xdata,ydata,setData
    }
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

动态展示图表

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>

import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
//   1.打开echarts的注释
     let $echarts= inject("echarts")
     let $http= inject("axios")
      async function getState(){
          data=await $http({url:"chartDataOne"})
         
       }
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
        function setData(){
          console.log("data",data)
           xdata=data.data.data.chartData.map(v=>v.title)//名字在y轴展示
           ydata=data.data.data.chartData.map(v=>v.num)//数据在x轴展示
           console.log("x",xdata)
           console.log("y",ydata)
        }
     
    onMounted(() => {
        
     

        getState().then(()=>{
        setData()
        // 2.吧图表展示放到数据请求成功当中 并且传入对应数据
           let myChart = $echarts.init(document.getElementById("chartDom"));
                myChart.setOption({
                    xAxis:{
                        type:"value"
                    },
                    yAxis:{
                        type:"category",
                        // 2.插入数据
                        data:xdata
                    },
                    series:[
                        {
                            data:ydata,
                            type:"bar"
                        }
                    ]
                })
        })       
    })

    return {
        getState,data,xdata,ydata,setData
    }
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

添加echarts

echart图表本身是提供了一个resize的函数的。是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>

import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
     let $echarts= inject("echarts")
     let $http= inject("axios")
      async function getState(){
          data=await $http({url:"chartDataOne"})
         
       }
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
        function setData(){
          console.log("data",data)
           xdata=data.data.data.chartData.map(v=>v.title)
           ydata=data.data.data.chartData.map(v=>v.num)
           console.log("x",xdata)
           console.log("y",ydata)
        }
     
    onMounted(() => {
        
     

        getState().then(()=>{
        setData()
           let myChart = $echarts.init(document.getElementById("chartDom"));
                myChart.setOption({
                    xAxis:{
                        type:"value"
                    },
                    yAxis:{
                        type:"category",
                        data:xdata
                    },
                    series:[
                        {
                            data:ydata,
                            type:"bar"
                        
                        }
                        
                    ]
                })
                // 让echarts根据浏览器大小改变动态该改变
                window.onresize = function () {//自适应大小
                    myChart.resize();
                };

        })       
    })

    return {
        getState,data,xdata,ydata,setData
    }
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

图表一样式修改

柱状图圆角与线段渐变色设置

在components下的itemOne.vue

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>

import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
     let $echarts= inject("echarts")
     let $http= inject("axios")
      async function getState(){
          data=await $http({url:"chartDataOne"})
         
       }
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
        function setData(){
          console.log("data",data)
           xdata=data.data.data.chartData.map(v=>v.title)
           ydata=data.data.data.chartData.map(v=>v.num)
           console.log("x",xdata)
           console.log("y",ydata)
        }
     
    onMounted(() => {
        
     

        getState().then(()=>{
        setData()
           let myChart = $echarts.init(document.getElementById("chartDom"));
                myChart.setOption({
                    xAxis:{
                        type:"value"
                    },
                    yAxis:{
                        type:"category",
                        data:xdata
                    },
                    series:[
                        {
                            data:ydata,
                            type:"bar",
                         // 设置柱状图区域样式
                       itemStyle: {
                            normal: {
                                // 如果传递数组，则需要传递四个元素，依次表示 左上，右上，右下、左下
                                barBorderRadius: [0,20,20,0],
                                // color:"red"如果写死值那么是一个固定的颜色
                                // 我们需要设置渐变色使用
                                // new echarts.graphic.LinearGradient(a,b,c,d,arr)来进行设置
                                // a ,b,c,d为0，1
                                // a:1 arr中的颜色右到左
                                // c:1 arr中的颜色左到右
                                // b:1 arr中的颜色下到上
                                // d:1 arr中的颜色上到下
                                color:new $echarts.graphic.LinearGradient(0,0,1,0,[
                              {
                                    offset:0,
                                    color:'#005eaa'
                                },
                                {
                                    offset:0.5,
                                    color:'#339ca8'
                                },
                                {
                                    offset:1,
                                    color:'#cda819'
                                }
                                ])
                            }
                          }
                        },
                    ]
                })
                window.onresize = function () {
                    myChart.resize();
                };

        })       
    })

    return {
        getState,data,xdata,ydata,setData
    }
    }
}
</script>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

柱状图的柱状的位置与上面显示文字

<template>
  <div>
      <h2>图表1</h2>
      <div id="chartDom" class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>

import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
     let $echarts= inject("echarts")
     let $http= inject("axios")
      async function getState(){
          data=await $http({url:"chartDataOne"})
         
       }
        let data=reactive({})
        let xdata=reactive([])
        let ydata=reactive([])
        function setData(){
          console.log("data",data)
           xdata=data.data.data.chartData.map(v=>v.title)
           ydata=data.data.data.chartData.map(v=>v.num)
           console.log("x",xdata)
           console.log("y",ydata)
        }
     
    onMounted(() => {
        
     

        getState().then(()=>{
        setData()
           let myChart = $echarts.init(document.getElementById("chartDom"));
                myChart.setOption({
                    xAxis:{
                          // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
                        type:"value"
                    },
                    yAxis:{
                          // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
                        type:"category",
                        data:xdata
                    },
   
                    // 配置图标的位置  不包含坐标轴中的文字
                    grid:{
                        top:'3%',
                        left:'1%',
                        bottom:'3%',
                        right:'6%',
                        containLabel:true // 包含坐标轴中的文字
                    },
                   
                    series:[
                        {
                            data:ydata,
                            type:"bar",
                        //   设置图形上的文字
                            label:{
                                show:true, // 显示数值
                                position:'right',//位置
                                textStyle:{
                                color:'#fff'
                                }
                            },
                         itemStyle: {
                            normal: {
                                barBorderRadius: [0,20,20,0],
                                // 我们需要设置渐变色使用
                                // new echarts.graphic.LinearGradient(a,b,c,d,arr)来进行设置
                                // a ,b,c,d为0，1
                                // a:1 arr中的颜色右到左
                                // c:1 arr中的颜色左到右
                                // b:1 arr中的颜色下到上
                                // d:1 arr中的颜色上到下
                                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>
<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        /* background-color: gray; */
    }
</style>

图表2 地图展示

如果要展示地图那么需要中国地图的矢量数据与省份数据 在public中的map文件夹已经提供了

由于数据实在我们本地 所以 我们在启动项目的时候可以直接在浏览器上输入

http://localhost:8080/map/china.json即可看到数据

我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用并且在页面中间的div中使用

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

<script>
export default {

}
</script>

<style lang="less">
    .map{
        width: 100%;
        height: 100%;
    }
</style>

获取地图数据

因为我们在项目中app.vue中 设置了 请求基准路径

axios.defaults.baseURL="http://localhost:3000/"

所以我们不能在使用全局的axiso 否则会使用基准路径完成请求

我们单独引用axios进行数据的请求

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

<script>
// 1.引用
import axios from "axios"
import {onMounted,reactive} from "vue"
export default {
 setup(){
    //  2.设置请求 并且创建变量接收获取来的数据 不要忘了报漏
    let mapData=reactive({})
    async function getState(){
        
          mapData=await axios.get("http://localhost:8080/map/china.json")
    }
    
     onMounted(()=>{
        // 3发送请求
        getState().then(()=>{
            console.log("map",mapData)
            
        })
     })
     return {
        mapData
     }
 }
}
</script>

<style lang="less">
    .map{
        width: 100%;
        height: 100%;
    }
</style>

设置地图

echarts.registerMap（名字，数据）

​​​​​​​

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

<script>

import axios from "axios"
// 1.引用
import {onMounted,reactive,inject} from "vue"
export default {
 setup(){
    //  2.得到echarts
    let $echarts= inject("echarts")
    let mapData=reactive({})
    async function getState(){
        
          mapData=await axios.get("http://localhost:8080/map/china.json")
    }
    
     onMounted(()=>{
        getState().then(()=>{
            console.log("map",mapData)
            // 3.设置地图
            $echarts.registerMap('china', mapData.data);
            var chart = $echarts.init(document.getElementById('map'));
                chart.setOption({
                     geo: {
                        map: 'china'
                    }
                });
        })
     })
     return {
        mapData
     }
 }
}
</script>

<style lang="less">
    .map{
        width: 100%;
        height: 100%;
    }
</style>

设置地图样式

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

<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("http://localhost:8080/map/china.json")
    }
    
     onMounted(()=>{
        getState().then(()=>{
            console.log("map",mapData)
            $echarts.registerMap('china', mapData.data);
            var chart = $echarts.init(document.getElementById('map'));
                chart.setOption({
                     geo: {
                        map: 'china',
                        itemStyle:{//地图区域的多边形 图形样式
                            areaColor:"#0099ff",//地图区域的颜色。
                            borderColor:"#00ffff",//图形的描边颜色。
                             shadowColor: 'rgba(230,130, 70, 0.5)',//橙色
                            shadowBlur: 30,//图形阴影的模糊大小
                           emphasis: {//高亮状态下的多边形和标签样式。
                                focus: 'self'//在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果self'self' 只聚焦（不淡出）当前高亮的数据的图形。
                            }
                        }
                    },
                    
                });
        })
     })
     return {
        mapData
     }
 }
}
</script>

在地图上设置散点标记图

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

<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("http://localhost:8080/map/china.json");
    }

    onMounted(() => {
      getState().then(() => {
        console.log("map", mapData);
        $echarts.registerMap("china", mapData.data);
        var chart = $echarts.init(document.getElementById("map"));
        chart.setOption({
          geo: {
            map: "china",
            itemStyle: {
              //地图区域的多边形 图形样式
              areaColor: "#0099ff", //地图区域的颜色。
              borderColor: "#00ffff", //图形的描边颜色。
              shadowColor: "rgba(230,130, 70, 0.5)", //橙色
              shadowBlur: 30, //图形阴影的模糊大小
              emphasis: {
                //高亮状态下的多边形和标签样式。
                focus: "self", //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果self'self' 只聚焦（不淡出）当前高亮的数据的图形。
              },
            },
          },
          series: [
            {
              type: "scatter",//类型散点图
              itemStyle: {//散点图的颜色
                  color:"red",
                },
              name: "所在城市销售额",
              coordinateSystem: "geo",//该系列使用的坐标系 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] },
              ],
            },
          ],
        //   tooltip: {
        //     trigger: "item",
        //   },
        //   visualMap: {
        //     type: "continuous", // 连续型
        //     min: 100, // 值域最小值，必须参数
        //     max: 5000, // 值域最大值，必须参数
        //     calculable: true, // 是否启用滑动空间
        //     inRange: {
        //       color: ["#50a3ba", "#eac736", "#d94e5d"], // 指定数值从低到高时的颜色变化
        //     },
        //     textStyle: {
        //       color: "#fff", // 值域控件的文本颜色
        //     },
        //   },
        });
      });
    });
    return {
      mapData,
    };
  },
};
</script>

<style lang="less">
.map {
  width: 100%;
  height: 100%;
}
</style>

设置提示框组件的视觉映射效果（地图左下角效果）

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

<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("http://localhost:8080/map/china.json");
    }

    onMounted(() => {
      getState().then(() => {
        console.log("map", mapData);
        $echarts.registerMap("china", mapData.data);
        var chart = $echarts.init(document.getElementById("map"));
        chart.setOption({
          geo: {
            map: "china",
            itemStyle: {
              areaColor: "#0099ff", 
              borderColor: "#00ffff", 
              shadowColor: "rgba(230,130, 70, 0.5)", 
              shadowBlur: 30,
              emphasis: {
                focus: "self", 
              },
            },
          },
          series: [
            {
              type: "scatter",
              itemStyle: {
                  color:"red",
                },
              name: "所在城市销售额",
              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] },
              ],
            },
          ],
          tooltip: {//提示框组件。
            trigger: "item",
          },
          visualMap: {//是视觉映射组件就是地图左下角的选择器
            type: "continuous", // 连续型
            min: 100, // 值域最小值，必须参数
            max: 5000, // 值域最大值，必须参数
            calculable: true, // 是否启用滑动空间
            inRange: {
              color: ["#50a3ba", "#eac736", "#d94e5d"], // 指定数值从低到高时的颜色变化
            },
            textStyle: {
              color: "#fff", // 值域控件的文本颜色
            },
          },
        });
      });
    });
    return {
      mapData,
    };
  },
};
</script>

<style lang="less">
.map {
  width: 100%;
  height: 100%;
}
</style>

图表3 产品库存统计分析图

获取数据

在components下的itemThree.vue

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomb" class="chart">
        
    </div>
  </div>
</template>

<script>
import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
    // 1.设置echarts设置axios  创建接受请求的变量
     let $echarts= inject("echarts")
     let $http= inject("axios")
     let data=reactive({})
    //  2.获取数据
     async function getState(){
          data=await $http({url:"three/data"})
         
    }
  
    
        return{
            getState,data
        }
    }
    
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

动态生成图表

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomb" class="chart">
        
    </div>
  </div>
</template>

<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"})
         
    }

 
  
    // 1.在dom加载完毕后动态展示图表
    onMounted(()=>{
        // 2.发送请求
        getState().then(()=>{
            console.log("饼状图",data.data.data)
            // 初始化echarts
          let myChart = $echarts.init(document.getElementById("chartDomb"));
          myChart.setOption({
          legend: {//设置图例
                top: 'bottom'//放到最下面
            },
            series: [
                {
                //   name: 'Nightingale Chart',
                type: 'pie',//饼图
                radius: [10, 100],//饼图的半径数组的第一项是内半径，第二项是外半径
                center: ['50%', '45%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                roseType: 'area',//设置成玫瑰图
                itemStyle: {
                    borderRadius: 10//用于指定饼图扇形区块的内外圆角半径，
                },
                data:  data.data.data.chartData//数据
                }
            ]
          })
        })    
        return{
            getState,data
        }
    })
    }
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

类别分析图样式修改

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomb" class="chart">
        
    </div>
  </div>
</template>

<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.data)
          let myChart = $echarts.init(document.getElementById("chartDomb"));
          myChart.setOption({
          legend: {
                top: 'bottom'
            },
            
            series: [
                {
                type: 'pie',
                radius: [10, 100],
                center: ['50%', '45%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 10
                },
                data:  data.data.data.chartData
                }
            ],
            // 设置饼状图的颜色
            color:['#c12e34', '#e6b600', '#0098d9','#2b821d','#005eaa','#339ca8'],
               //提示框，鼠标悬浮交互时的信息提示
            tooltip : {
                show: true,//默认值true，可选为：true（显示） | false（隐藏）
                borderRadius: 10,//提示边框圆角，单位px，默认为4
            },
          })
        })    
        return{
            getState,data
        }
    })
    }
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

图表4 产品月销图

数据获取

在components文件夹下的itemTwo.vue中进行设置

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomb" class="chart">
        
    </div>
  </div>
</template>

<script>
import {inject,onMounted,reactive} from "vue"
export default {
    setup() {
    // 1.设置echarts设置axios  创建接受请求的变量
     let $echarts= inject("echarts")
     let $http= inject("axios")
     let data=reactive({})
    //  2.获取数据
     async function getState(){
          data=await $http({url:"two/data"})
         
    }
  
    
        return{
            getState,data
        }
    }
    
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

动态生成基本折线图

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomc" class="chart">
        
    </div>
  </div>
</template>

<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"})
         
    }

 
  
    // 1.在dom加载完毕后动态展示图表
    onMounted(()=>{
        // 2.发送请求
        getState().then(()=>{
            console.log("折线图",data.data)
            // 初始化echarts
          let myChart = $echarts.init(document.getElementById("chartDomc"));
          myChart.setOption({
            //   设置x轴内容
                xAxis: [
                {
                    type: "category",
                    boundaryGap: false,//折线图与y轴距离false 没有距离
                    data: data.data.data.chartData.day,
                },
                ],
            // 设置y轴内容
                yAxis: [
                {
                    type: "value",
                },
                ],
                series: [
                    // 设置服饰的折线图
                    {
                          name: "服饰",
                          type: "line",
                          data:data.data.data.chartData.num.Chemicals
                    },
                    {
                          name: "数码",
                          type: "line",
                          data:data.data.data.chartData.num.Clothes
                    },
                    {
                          name: "家电",
                          type: "line",
                          data:data.data.data.chartData.num.Electrical
                    },
                    {
                          name: "家居",
                          type: "line",
                          data:data.data.data.chartData.num.digit
                    },
                    {
                          name: "日化",
                          type: "line",
                          data:data.data.data.chartData.num.gear
                    },
                ]
          })
        })    
        return{
            getState,data
        }
    })
    }
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

折线图样式设置

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomc" class="chart">
        
    </div>
  </div>
</template>

<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.data)
          let myChart = $echarts.init(document.getElementById("chartDomc"));
          myChart.setOption({
                xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: data.data.data.chartData.day,
                },
                ],
                yAxis: [
                {
                    type: "value",
                },
                ],
                series: [
                    {
                          name: "服饰",
                          type: "line",
                          data:data.data.data.chartData.num.Chemicals,
                          stack: "Total",//数据堆叠
                          smooth: true,//折线图平滑效果 变成曲线图
                          showSymbol: false,//   隐藏所有数据点
                          
                          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)",
                            },
                            ]),
                        },  
                            lineStyle: { // 设置线段样式
                                width: 0,
                            },
                            emphasis: {//设置高亮的图形样式和标签样式 
                              focus: "series",//只显示选中的内容高亮
                            },                 
                    },
                    {
                          name: "数码",
                          type: "line",
                          data:data.data.data.chartData.num.Clothes,
                           stack: "Total",//数据堆叠
                          smooth: true,//折线图平滑效果 变成曲线图
                          showSymbol: false,//   隐藏所有数据点
                          
                            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)",
                                },
                            ]),
                        },  
                            lineStyle: { // 设置线段样式
                                width: 0,
                            },
                            emphasis: {//设置高亮的图形样式和标签样式 
                              focus: "series",//只显示选中的内容高亮
                            }, 
                    },
                    {
                          name: "家电",
                          type: "line",
                          data:data.data.data.chartData.num.Electrical,
                          stack: "Total",//数据堆叠
                          smooth: true,//折线图平滑效果 变成曲线图
                          showSymbol: false,//   隐藏所有数据点
                          
                      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)",
                                },
                            ]),
                    
                        },  
                            lineStyle: { // 设置线段样式
                                width: 0,
                            },
                            emphasis: {//设置高亮的图形样式和标签样式 
                              focus: "series",//只显示选中的内容高亮
                            }, 
                    },
                    {
                          name: "家居",
                          type: "line",
                          data:data.data.data.chartData.num.digit,
                          stack: "Total",//数据堆叠
                          smooth: true,//折线图平滑效果 变成曲线图
                          showSymbol: false,//   隐藏所有数据点
                          
                            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)",
                                },
                            ]),
                    
                        },  
                            lineStyle: { // 设置线段样式
                                width: 0,
                            },
                            emphasis: {//设置高亮的图形样式和标签样式 
                              focus: "series",//只显示选中的内容高亮
                            }, 
                    },
                    {
                          name: "日化",
                          type: "line",
                          data:data.data.data.chartData.num.gear,
                          stack: "Total",//数据堆叠
                          smooth: true,//折线图平滑效果 变成曲线图
                          showSymbol: false,//   隐藏所有数据点
                          
                            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)",
                                },
                            ]),
                    
                        },  
                            lineStyle: { // 设置线段样式
                                width: 0,
                            },
                            emphasis: {//设置高亮的图形样式和标签样式 
                              focus: "series",//只显示选中的内容高亮
                            }, 
                    },
                ]
          })
        })    
        return{
            getState,data
        }
    })
    }
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

优化

设置提示框等信息

​​​​​​​

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomc" class="chart"></div>
  </div>
</template>

<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.data);
        let myChart = $echarts.init(document.getElementById("chartDomc"));
        myChart.setOption({




         tooltip: { //提示框组件
          trigger: "axis",//触发类型。坐标轴触发
          axisPointer: {//坐标轴指示器配置项
            type: "cross",//指示器类型 十字准星指示器
            label: {//坐标轴指示器的文本标签
              backgroundColor: "#e6b600",//文本标签的背景颜色就是x轴y轴上的内容
            },
          },
        },
        legend: {
          data: ["服饰", "数码", "家电", "家居", "日化"],
        },
        // toolbox: {//下载
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {//组件离容器的距离
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true,//grid 区域是否包含坐标轴的刻度标签
        },

          xAxis: [
            {
                // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
              type: "category",
              boundaryGap: false,
              data: data.data.data.chartData.day,
            },
          ],
          yAxis: [
            {
                 // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
              type: "value",
            },
          ],
          series: [
            {
              name: "服饰",
              type: "line",
              data: data.data.data.chartData.num.Chemicals,
              stack: "Total", //数据堆叠
              smooth: true, //折线图平滑效果 变成曲线图
              showSymbol: false, //   隐藏所有数据点

              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)",
                  },
                ]),
              },
              lineStyle: {
                // 设置线段样式
                width: 0,
              },
              emphasis: {
                //设置高亮的图形样式和标签样式
                focus: "series", //只显示选中的内容高亮
              },
            },
            {
              name: "数码",
              type: "line",
              data: data.data.data.chartData.num.Clothes,
              stack: "Total", //数据堆叠
              smooth: true, //折线图平滑效果 变成曲线图
              showSymbol: false, //   隐藏所有数据点

              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)",
                  },
                ]),
              },
              lineStyle: {
                // 设置线段样式
                width: 0,
              },
              emphasis: {
                //设置高亮的图形样式和标签样式
                focus: "series", //只显示选中的内容高亮
              },
            },
            {
              name: "家电",
              type: "line",
              data: data.data.data.chartData.num.Electrical,
              stack: "Total", //数据堆叠
              smooth: true, //折线图平滑效果 变成曲线图
              showSymbol: false, //   隐藏所有数据点

              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)",
                  },
                ]),
              },
              lineStyle: {
                // 设置线段样式
                width: 0,
              },
              emphasis: {
                //设置高亮的图形样式和标签样式
                focus: "series", //只显示选中的内容高亮
              },
            },
            {
              name: "家居",
              type: "line",
              data: data.data.data.chartData.num.digit,
              stack: "Total", //数据堆叠
              smooth: true, //折线图平滑效果 变成曲线图
              showSymbol: false, //   隐藏所有数据点

              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)",
                  },
                ]),
              },
              lineStyle: {
                // 设置线段样式
                width: 0,
              },
              emphasis: {
                //设置高亮的图形样式和标签样式
                focus: "series", //只显示选中的内容高亮
              },
            },
            {
              name: "日化",
              type: "line",
              data: data.data.data.chartData.num.gear,
              stack: "Total", //数据堆叠
              smooth: true, //折线图平滑效果 变成曲线图
              showSymbol: false, //   隐藏所有数据点

              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)",
                  },
                ]),
              },
              lineStyle: {
                // 设置线段样式
                width: 0,
              },
              emphasis: {
                //设置高亮的图形样式和标签样式
                focus: "series", //只显示选中的内容高亮
              },
            },
          ],
        });
      });
      return {
        getState,
        data,
      };
    });
  },
};
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

图表5 产品库存统计图

基本柱状图

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomd" class="chart">
        
    </div>
  </div>
</template>

<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"})
         
    }

 
  
    // 1.在dom加载完毕后动态展示图表
    onMounted(()=>{
        // 2.发送请求
        getState().then(()=>{
            console.log("柱状图",data.data)
            // 初始化echarts
          let myChart = $echarts.init(document.getElementById("chartDomd"));
          myChart.setOption({
            xAxis: {
                type: "category",
                data: data.data.data.chartData.day,
            },
            yAxis: {
                type: "value",
            
            },
             series: [
                    {   
                         name:"服饰",
                         type: "bar",
                         data:data.data.data.chartData.num.Chemicals,

                    }
             ]

          })
        })    
        return{
            getState,data
        }
    })
    }
}
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

完成堆叠效果

template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomd" class="chart"></div>
  </div>
</template>

<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.data);
        let myChart = $echarts.init(document.getElementById("chartDomd"));
        myChart.setOption({
          xAxis: {
            type: "category",
            data: data.data.data.chartData.day,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "服饰",
              type: "bar",
              data: data.data.data.chartData.num.Chemicals,
              stack: "total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            },
            {
               name: "数码",
              type: "bar",
              data: data.data.data.chartData.num.Clothes,
              stack: "total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            },
            {
               name: "家电",
              type: "bar",
              data: data.data.data.chartData.num.Electrical,
              stack: "total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            },
            {
              name: "家居",
              type: "bar",
              data: data.data.data.chartData.num.digit,
              stack: "total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            },
            {
             name: "日化",
              type: "bar",
              data: data.data.data.chartData.num.gear,
              stack: "total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
            },
      
          ],
        });
      });
      return {
        getState,
        data,
      };
    });
  },
};
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

样式优化

<template>
  <div>
    <h2>图表1</h2>
    <div id="chartDomd" class="chart"></div>
  </div>
</template>

<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.data);
        let myChart = $echarts.init(document.getElementById("chartDomd"));
        myChart.setOption({
          xAxis: {
              // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
            type: "category",
            data: data.data.data.chartData.day,
          },
          yAxis: {
              // 设置坐标轴上文字颜色
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
            type: "value",
          },
          tooltip: {
          trigger: "axis",
          axisPointer: {//设置鼠标选中样式为阴影
            type: "shadow", 
          },
        },
        legend: {},//图例
        grid: {//位置
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,//设置包含坐标轴
        },
          series: [
            {
              name: "服饰",
              type: "bar",
              data: data.data.data.chartData.num.Chemicals,
              stack: "total",
              label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show: true,
              },
              emphasis: {
                //高亮的图形样式和标签样式。
                focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
              },
            },
            {
              name: "数码",
              type: "bar",
              data: data.data.data.chartData.num.Clothes,
              stack: "total",
              label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show: true,
              },
              emphasis: {
                //高亮的图形样式和标签样式。
                focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
              },
            },
            {
              name: "家电",
              type: "bar",
              data: data.data.data.chartData.num.Electrical,
              stack: "total",
              label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show: true,
              },
              emphasis: {
                //高亮的图形样式和标签样式。
                focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
              },
            },
            {
              name: "家居",
              type: "bar",
              data: data.data.data.chartData.num.digit,
              stack: "total",
              label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show: true,
              },
              emphasis: {
                //高亮的图形样式和标签样式。
                focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
              },
            },
            {
              name: "日化",
              type: "bar",
              data: data.data.data.chartData.num.gear,
              stack: "total",
              label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show: true,
              },
              emphasis: {
                //高亮的图形样式和标签样式。
                focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
              },
            },
          ],
        });
      });
      return {
        getState,
        data,
      };
    });
  },
};
</script>

<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.5rem;
  /* background-color: gray; */
}
</style>

项目打包

vue项目中大家在运行的时候我们是需要用内置的devServer帮助我们自动项目 开发过程中没有问题

但是 我们所写的项目今后是需要上公网让用户访问的 所以我们需要把项目放在性能更好的服务器上运行

还有就是 我们所写的是.vue文件 浏览器不认识 没有办法直接解析

所以我们就绪要对当前项目 进行打包 就是把项目编译成 html css js 方便我们把项目放到服务器上也方便浏览器解析

打包流程

1.npm run build命令打包 但是会发现打包之后资源路径有问题

2.修改静态资源路径 publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

3.修改路由模式为hash

// 1.需要引入 
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 2.修改配置
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

 

服务器购买与连接

在购买ECS服务器后，系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通过电脑上自带的终端工具访问云服务器，进行应用部署和环境搭建。

  1. 在ECS实例列表页面，选择实例的所属地域。

  2. 找到目标实例，然后在操作列选择【更多】> 【密码/密钥】 > 【重置实例密码】，然后在弹出的对话框设置ECS实例的登录密码

        3.在弹出的页面，单击【立即重启】使新密码生效。

        4.在ECS实例列表页面，复制ECS实例的公网IP地址。

        5.连接远程桌面

        （1）方式1 浏览器直接访问

 

 

 

 

即可连接

（2）远程桌面方式

在电脑的开始中搜索远程桌面

 

 

nginx服务器使用

Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。

代理服务器

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。

注意

我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了

使用

1.解压出nginx得到如下内容

 

2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字（名字随便起） 这个文件就是nginx的配置文件

 

3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动

4.打开浏览器输入localhost:80即可启动

使用小扩展

记得如果修改服务器内容了 要停止之后在重新启动

打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止

69. 项目运行

1.把我们打包好的dist放到根路径下

2.修改我们的.conf文件

3.配置端口

 

 

 

4.在电脑浏览器尝试使用 你的公网ip加端口访问

如不行 重新启动（不要忘了先关闭nginx） 运行浏览器即可看见

后端上线

同前端方式

 

官方认证新生代农民工_平安喜乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp查询工资echarts图表显示.zip
06-17
1.asp查询本地access数据库，获取应发工资、实发工资、扣除工资，ajax异步返回json格式数据 2.将返回json输入到echarts圆饼状显示，实现动态加载数据。
echarts学习笔记之图表自适应问题详解
12-28
为了直观查看公司服务器各个进程占用的内存动态情况，我使用echarts进行数据可视化，具体的实现过程按下不表。 最后实现的效果如图： 然后问题就来了，因UI采用了Bootstrap响应式框架，所以除了图表之外其他都是...
vue3+Echarts-数据可视化项目实践
qq_53541336的博客
08-21 1501
本次案例是使用vue3和Echarts图表进行实现的，整个书写代码过程相对来说还算比较简单，易于理解，项目开始之初肯定离不开框架的搭建，vue框架的搭建这里主要使用的是vue-cli来构建项目，不过小伙伴们也可以使用vite来构建，这个可能相对来说需要后期自己去书写里面的比如像路由这些。今天来讲解一下最近工作中学习到的一些新的知识点，也是自己第一次接触到的新内容，和小伙伴们一起分享学习下。(4)最后就是后端数据，需要另外新建文件夹，在里面书写各个图表的数据，这里将具体的数据文档放置。
Vue+Echarts 项目演练（下）收尾工作图表绘制
dafsq的博客
04-25 931
Vue+Echarts 项目演练（下）收尾工作图表绘制
echarts折柱混线图根据后台数据动态刷新显示数据
苦瓜_小学生的博客
09-28 2937
echarts折柱混线根据后台数据动态刷新数据，setInterval定时器中添加计数器，遍历数组依次返回n个数组对象的方法，echarts图背景透明，柏拉图
Echarts 3D地图图表
qq_35119405的博客
07-30 1万+
需求：实现如图所示的3D地图图表 （1）原本使用的highcharts没有3d地图的功能，搜索插件也没有可替代的方案，选择echarts理由是在地图方面百度拥有毋庸置疑的实力 https://blog.csdn.net/GRAY_KEY/article/details/81295961 （2）通过代码可以轻易写出例子的效果，但是想要写特定区域的地图则需要该地区相对应的json文件，需要通...
若依后台框架，入手学习笔记记录
10-10
若依后台 com.ruoyi ├── common // 工具类 │ └── annotation // 自定义注解 │ └── config // 全局配置 │ └── constant // 通用常量 │ └── core // 核心控制 │ └── enums // 通用枚举
echarts 学习笔记 文档
02-26
echarts 学习笔记 文档
echarts练习笔记-图表模板
最新发布
03-11
一个可视化数据分析的web网页
echarts+asp查询应用
07-14
echarts+asp查询应用echarts+asp查询应用echarts+asp查询应用，百度echarts,建议如果后台需要做数据分析可以使用，支持asp、php、jsp、jspssh等框架。
asp+access+echarts+iis
11-18
利用了echarts的JS，通过asp编程语言，连接access数据库，展现出大数据图表。内置了一个iis，可以极简约地实现数据库中的数据用各种图形展现，还提供图片下载。有意思的一个新老技术结合。
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
BADAO_LIUMANG_QIZHI的博客
05-07 2686
场景 SpringBoot+Echarts实现请求后台数据显示饼状图： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89921101 实现 在上面实现一次ajax请求数据返回并显示一个饼状图的基础上。 html页面修改 <script src=" href='https://cdn.bootcss.com/...
echarts怎么从后台传值php,通过PHP和echarts交互实现折现图
weixin_36433730的博客
03-10 408
直接上代码php部分require('db_config.php');$conn = mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die('error connecting');mysql_query('set names utf8');mysql_select_db($mysql_database);$...
.NET C# + ECharts 初学笔记 后台加载统计图表数据 - 简单示例
qq_18816201的博客
09-09 4068
上面是全部源码下载地址↑↑↑↑↑↑↑↑↑↑↑ ECharts官方下载地址：https://www.echartsjs.com/zh/download.html 我用的是当时最新的4.2.1 一共就4个js文件 - 前端页面↓ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l...
Echarts从后台获取数据展示折线图（堆叠图）
热门推荐
qq_32961283的博客
05-02 1万+
Echarts从后台获取数据展示折线图（堆叠图） 这里主要展示的是折线图，主要是涉及到两种订单的比较 首先我们要从数据库中获取所要展示的数据，这里我只进行controller的讲解 @RequestMapping("/ecOrderCount") public void ecOrderStatisticsCount(HttpServletResponse response,Str...
Echarts与后台(SSM) 数据交互
qq_44543292的博客
05-09 4884
一、Echarts 是什么？ 在说 Echarts 是什么之前,先来看看我们常看到的数据图形: 这就是 Echarts 搞出来的,通俗一点来说,Echarts 就是可视化图形界面,获取到后台的数据,通过图形的形式形象化的展现在你的面前。相对于死板的数据字符串,清晰的图形分析简直好到不能再好。 当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据...
后台管理Echarts、时间线
Y_Tiam的博客
05-07 600
1.查看物流进度 主要用到了Element UI中的时间线组件 代码如下： <!-- 显示时间线 --> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" > {{ activity.context }} </el-timeline-item> </el-timeline&g
echarts通过ajax请求后台。
anning755的博客
11-06 695
新手，新手。 1 这里是我伪造的数据。（因为自己得到的这些数据比较繁琐,所以就伪造了这些数据） @RestController public class HelloController{ @RequestMapping("/go") public Map<String,Object> list(){ Map<String,Object>map = new HashMap<>(); map.put("192.168.52.71",73.
ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来...
weixin_30386713的博客
04-13 1025
ECharts 多个折线图动态获取json数据 效果图如下： 一.html部分 <p id="TwoLineChart" style="width:100%; height:400px;"></p> 二.js部分 <script type="text/JavaScript"> function loadTwoLine() { ...
Android Studio 学习笔记1.1 创建自己的第一个安卓项目并且打包APK
05-14
好的，下面是创建自己的第一个安卓项目并打包APK的步骤： 1. 首先打开Android Studio软件，在欢迎界面中选择“Start a new Android Studio project”选项。 2. 在“Create New Project”界面中，输入项目名称、包...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值