展示大屏练习

最新推荐文章于 2023-01-07 14:52:34 发布
最新推荐文章于 2023-01-07 14:52:34 发布
阅读量112 收藏
点赞数
文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/125627410
版权
1.页面框架
<template>
  <div>
    <header>
      <h1>赣州房价分析平台</h1>
    </header>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <TopTenPage>
          <ItemOne/>
        </TopTenPage>
        <PiePage>
          <ItemTwo/>
        </PiePage>
      </section>
      <!-- 中容器 -->
      <section class="itemCenter">
        <TimePage/>
        <CenterBottom>
          <MapPage/>
        </CenterBottom>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage>
          <ItemThree/>
        </ItemPage>
        <ItemPage>
          <ItemFour/>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script>
import ItemPage from "@/components/itemPage.vue"
import PiePage from "@/components/piePage.vue"
import TopTenPage from "@/components/topTenPage.vue"
import TimePage from "@/components/timePage.vue"
import CenterBottom from "@/components/centerBottom.vue"
import MapPage from "@/components/mapPage.vue"
import LinePage from "@/components/linePage.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 MainPage from "@/components/views/main/mainPage.vue"
export default {
  name: 'homePage',
  data() {
    return {

    };
  },
  components:{
    ItemPage,
    PiePage,
    TopTenPage,
    TimePage,
    CenterBottom,
    MapPage,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour,
    LinePage,
    MainPage
  },
  computed:{

  },
  methods: {

},
};
</script>

<style lang="less" scoped>
  header{
    height: 1rem;
    width: 100%;
    margin: .625rem 0;
    background: url("~@/assets/headerbg.png");
    // background-color: rgba(14, 14, 225, 0.699);
    // 标题的文字样式
    h1{
      font-size: .625rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
      
    }
  }

  // 大容器的样式
  .container{
    // 最大最小的宽度
    min-width: 1200px;
    max-width: 2048px;
    margin: 0 auto;
    padding: .125rem .125rem 0;
    // background-color: gray;
    display: flex;
    // 设置左右在页面的份数
    .itemLeft,.itemRight{
      flex: 3.5;
    }
    .itemCenter{
      flex: 4;
      height: 10.5rpx;
      // border: 1px solid rgb(65, 152, 207);
      padding: 0.125rem;
      margin: .25rem;
    }
  }
</style>
2.柱状图
<template>
  <div>
    <dv-border-box-8 style="height:100% width:100%">
    <h2>赣州各区县房屋均价Top10(元/㎡)</h2>
    <div class="chart" id="topten">
        
    </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import Border from "@/components/border.vue"
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      price: [],
      xprice: [],
      district: []
    };
  },
  components: {},
  computed: {},
  methods: {
    myEcharts() {
      let _this = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("topten"));

      // 指定图表的配置项和数据
      var option;
      axios.get("https://4o977191w3.goho.co/rank").then(
        res => {
          console.log(res.data.data.rank[0]);
          console.log(res);
          let ydata = res.data.data.rank[0].ydata;
          let xdata = res.data.data.rank[0].xdata;
          option = {
            tooltip: {
              trigger: "axis",
              formatter(params){
                return '<div><p>'+params[0].name+'<br/>'+params[0].marker+params[0].value+' 元/㎡</p></div>'
              }
            },
            grid: {
              left: "70",
              right: "20",
              bottom: "20",
              top: "20",
              containLabel: false
            },
            xAxis: {
              type: "value",
              show: false,
              max: "dataMax"
            },
            yAxis: {
              type: "category",
              data: ydata,
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 55,
                width: 60,
                align: "left",
                overflow: "truncate",
                formatter: function(value, index) {
                  let ind = index + 1;
                  if (ind + 9 == ydata.length) {
                    return "{one|" + (index + 1) + "} {a|" + value + "}";
                  } else if (ind + 8 == ydata.length) {
                    return "{two|" + (index + 1) + "} {b|" + value + "}";
                  } else if (ind + 7 == ydata.length) {
                    return "{three|" + (index + 1) + "} {c|" + value + "}";
                  }
                  if (ydata - index < 8) {
                    return "{five|"  + (index + 1) + "} {d|" + value + "}";
                  }
                  return "{four|"  + (index + 1) + "} {d|" + value + "}";
                },
                rich: {
                  a: {
                    color: "#59c9f9"
                  },
                  b: {
                    color: "#59c9f9"
                  },
                  c: {
                    color: "#59c9f9"
                  },
                  d: {
                    color: "#59c9f9"
                  },
                  // 第一名
                  one: {
                    backgroundColor: "#E86452",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11
                  },
                  // 第二名
                  two: {
                    backgroundColor: "#FF9845",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11
                  },
                  // 第三名
                  three: {
                    backgroundColor: "#F6BD16",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11
                  },
                  // 一位数
                  four: {
                    backgroundColor: "#009dff",
                    color: "white",
                    width: 12,
                    height: 16,
                    padding: [1, 0, 0, 5],
                    borderRadius: 10,
                    fontSize: 11
                  },
                  // 两位数
                  five: {
                    backgroundColor: "#009dff",
                    color: "white",
                    width: 16,
                    height: 16,
                    padding: [1, 0, 0, 1],
                    borderRadius: 10,
                    fontSize: 13
                  }
                }
              }
            },
            series: [
              {
                type: "bar",
                showBackground: true,
                realtimeSort: true,
                label: {
                  show: true,
                  position: "center",
                  color: "#fff",
                  fontSize: 18
                },
                barWidth: 25,
                itemStyle: {
                  color: "#5B8FF9"
                },
                data: xdata
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },
        res => {
          console.log("error");
        }
      );
    }
  },
  mounted() {
    this.myEcharts();
  }
};
</script>

<style lang='less' scoped>
h2 {
  height: 0.5rem;
  color: #fff;
  line-height: 0.5rem;
  font-size: 0.3rem;
  text-align: center;
}
.chart {
  height: 4.5rem;
}
</style>

在这里插入图片描述

3.饼状图
<template>
  <div class="box" id="piechart">
     <!-- <h2>hhhhh</h2> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  computed: {},
  mounted() {
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      var chartDom = document.getElementById("piechart");
      var myChart = this.$echarts.init(chartDom);
      var option;

      axios.get("https://4o977191w3.goho.co/count").then(
        res => {
          console.log(res);
          let count = res.data.data.data;

          option = {
            title: {
              text: "房价区间分布(元/㎡)",
              left: "center",
              textStyle:{
                color:"#fff"
              }
            },
            tooltip: {
              trigger: "item",
              formatter(params){
                // alert(JSON.stringify(params))
                return '<div><p>'+params.name+' 元/㎡   '+'<br/>'+params.marker+params.value+'个楼盘</p></div>'
              }
            },
            legend: {
              orient: "vertical",
              left: "left",
              top:"bottom",
              textStyle:{
                color:"#fff"
              }
            },
            series: [
              {
                name: "房价区间分布(元/㎡)",
                type: "pie",
                radius: "55%",
                data: count,
                label:{
                  color:"#fff",
                  fontSize:15
                },
                labelLine:{
                  show:true,
                  length:40,
                  length:20
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        },
        res => {
          console.log("error");
        }
      );

    }
  }
};
</script>

<style lang='less' scoped>
.box {
  // margin: 0 auto;
  width: 6.5rem;
  height: 5.5rem;
  // background-color: #457dcb1a;
}
</style>

在这里插入图片描述

4.折线图
<template>
  <div id="chart">
            <!-- <h3>{{ Title }}</h3> -->
            <el-select v-model="value" placeholder="切换地区" @change="onchange" >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div ref="myChart3" id="myChart3" style="height:100%;width:100%;"></div>
        </div>
</template>


<script>
import axios from "axios";
import MenuPage from "@/components/menuPage.vue";
import LinePage from "@/components/linePage.vue";
export default {
  name: "",
  data() {
    return {
      // Title: 'echarts实现下拉框选值',
      value: "",
      datas: [
      ],
      seltValue: [
      ],
      options: [
        {
          value: "0",
          label: "赣州"
        },
        {
          value: "1",
          label: "上犹"
        },
        {
          value: "2",
          label: "于都"
        },
        {
          value: "3",
          label: "会昌"
        },
        {
          value: "4",
          label: "信丰"
        },
        {
          value: "5",
          label: "全南"
        },
        {
          value: "6",
          label: "兴国"
        },
        {
          value: "7",
          label: "南康"
        },
        {
          value: "8",
          label: "大余"
        },
        {
          value: "9",
          label: "宁都"
        },
        {
          value: "10",
          label: "定南"
        },
        {
          value: "11",
          label: "寻乌"
        },
        {
          value: "12",
          label: "崇义"
        },
        {
          value: "13",
          label: "开发区"
        },
        {
          value: "14",
          label: "瑞金"
        },
        {
          value: "15",
          label: "石城"
        },
        {
          value: "16",
          label: "站北"
        },
        {
          value: "17",
          label: "章江新区"
        },
        {
          value: "18",
          label: "章贡"
        },
        {
          value: "19",
          label: "赣县"
        },
        {
          value: "20",
          label: "龙南"
        }
      ]
    };
  },
  methods: {
    onchange(value) {
      this.datas.map((item, index) => {
        if (index == value) {
          this.downSelect(this.seltValue[index]);
        }
      });
    },
    downSelect(seltValue) {
      console.log(seltValue);
      // 基于准备好的dom，初始化echarts实例
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      var lineStyle = {
        normal: {
          width: 1,
          opacity: 0.5
        }
      };

      axios.get("https://4o977191w3.goho.co/line").then(
        res => {
          console.log(res);
          this.datas = res.data.data;
          this.seltValue = res.data.data;

          // 绘制图表
          myChart3.setOption({
            xAxis: {
              type: "category",
              data: ["2022/2", "2022/3", "2022/4", "2022/5", "2022/6"],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: "#fff",
                fontSize: 13
              }
            },
            yAxis: {
              type: "value",
              // color: "#fff",
              max: "dataMax",
              min: "dataMin",
              axisTick: {
                alignWithLabel: true,
                show:true
              },
              axisLine: {
                show: true
              },
              axisLabel: {
                color: "#fff",
                fontSize: 13,
                shouw:true
              },
              splitLine: {
                show: false
              }
            },
            tooltip: {
              show:true,
              trigger: "axis",
              showContent:true,
            },
            series: [
              {
                name: "平均房价(元/㎡)",
                type: "line",
                silent: true,
                axisLabel: {
                  color: "#fff"
                },
                lineStyle: {
                  normal: {
                    type: "solid",
                    color: "#00ddff",
                    width: 2.5,
                    opacity: 1
                  }
                },
                data: seltValue,
                itemStyle: {
                  normal: {
                    opacity: 0
                  }
                },
                areaStyle: {
                  normal: {
                    color: "#0d6dba",
                    opacity: 0.1
                  }
                }
              }
            ]
          });
        },
        res => {
          console.log("error");
        }
      );
    }
  },

  mounted() {
    this.downSelect(this.seltValue[0]);
  }
};
</script>

<style lang='less' scoped>
#chart {
  // width: 6.5rem;
  // height: 5rem;
  height: 5.125rem;
  // border: 1px solid #00ddff;
}
</style>

在这里插入图片描述

5.轮播表格
<template>
  <div class="box">
    <dv-scroll-board :config="config" style="width:100%;height:100%" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: '',
  data() {
    return {
      config:{
      header: ['楼盘名称', '地址', '房屋单价(元/㎡)'],
      headerBGC	:"rgb(65, 152, 207)",
      data: [],
      index: true,
      columnWidth: [50],
      align: ['center']
    }
  }
  },
  components:{

  },
  mounted(){
      this.getData();
  },
  methods: {
      getData(){
        axios.get('https://4o977191w3.goho.co/all').then(res => {
                    console.log(res)
                    console.log(res.data.data.data[155])
                    // this.config.data=res.data.data.data
                    this.config={
                    header: ['楼盘名称', '房屋单价', '地址'],
                    headerBGC	:"rgb(65, 152, 207)",
                    data: res.data.data.data,
                    index: true,
                    columnWidth: [50],
                    align: ['center'],
                    waitTime:1500,
                    indexHeader:''
                  }
                }, res => {
                    console.log("error");
                });
      }
},
};
</script>

<style lang='less' scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>

在这里插入图片描述

6.地图
<template>
  <div class="item">
    <div ref="map" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import axios from "axios";
import gzMap from "@/assets/ganzhou.json";
export default {
  data() {
    return {
      data: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.map);
      //注入这个表
      this.$echarts.registerMap("ganzhou", gzMap);

      axios.get('https://4o977191w3.goho.co/map').then(res => {
                    console.log(res)

                    //指定图表配置项及数据
      var option = {
        title: {
          // text: "赣州市房价地图",
          left: "left",
          // bottom:'90%',
          textStyle: {
            fontSize: 25,
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          enterable: true,
          // formatter: '{b0}: <br />{b1}: {c1}'
          formatter: function(params) {
            // alert(JSON.stringify(params))
            return '<div><p>'+params.name+'<br/>'+params.marker+params.value+'  元/㎡</p></div>'
          }
        },
        series: [
          {
            name:'房价地图',
            type: "map",
            map: "ganzhou",
            zoom: "1.25",
            data: res.data.data,
            label: {
              show: "true",
              textStyle: {
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#5595bc"
              },
              emphasis: {
                areaColor: "#f4aad6",
              }
            }
          }
        ]
      };
      //使用刚指定的配置项及数据
      myChart.setOption(option);
                }, res => {
                    console.log("error");
                });

    }
  }
};
</script>

<style lang="less" scoped>
.item {
  height: 7.125rem;
  // border: 1px solid #f4aad6;
  margin-top: .625rem;
  // background-color: rgba(12,130,255,.85)
}
</style>

在这里插入图片描述

weixin_56706590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue3和Typescript的数据大屏练习项目设计源码
04-12
本数据大屏练习项目基于Vue3和Typescript开发，包含45个文件，包括SVG图形、JSON配置文件、TypeScript源代码、CommonJS模块文件、Vue组件、开发模式和生产模式配置文件、测试文件、ESLint忽略文件和GIT忽略文件。...
DataV中边框组件不生效解决方案
往事随风
10-18 2368
DataV中边框组件不生效解决方案
echarts实现排名柱状图
小小•愿望的博客
03-22 1万+
通过echarts实现排名柱状图统计。
dataV中改变dv-border-box-8的环绕线条宽度
weixin_47803327的博客
09-26 854
dataV动画库中dv-border-box-8环绕边框线的宽度修改
Vue + DataV + SignalR 数字化大屏展示
lee576的专栏
02-15 2041
个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来 前端 <template> <dv-full-screen-container class="screen-container"> <div class="ti
【18】数据可视化+selenium数采：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜
YYDataV的博客
10-27 3067
目录 ❤️效果展示❤️ 1、首先看动态效果图 2、自动切换主题​ 一、确定需求方案 1、确定产品上线部署的屏幕LED分辨率 2、部署方式 二、整体架构设计 三、爬虫采集关键编码实现 1、确认爬虫目标 2、确定爬取方式 3、爬取关键代码 四、数据可视化关键编码实现 1、前端html代码 2、前端JS代码 3、后端python服务器代码 五、上线运行 六、源码下载 七、精彩案例汇总 写在前面，最近收到了很多小伙伴们的建议，大屏得展示数据如果采用真实数据分析计...
疫情大数据分析Python爬取数据+MySQL+hadoop+Vue+ElementUI大屏展示（源码+说明）.zip
03-24
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。...疫情大数据分析Python爬取数据+Springboot+MySQL+hadoop(存取)+Vue+ElementUI大屏展示（源码+项目说明）.zip
基于Spark大数据平台二手房信息爬虫分析预测系统带大屏展示毕业源码案例设计（高分项目）.zip
最新发布
05-20
个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业，项目都经过严格调试，确保可以运行！ 包含源码，数据库，演示...
Cognos 实践操作
06-30
本课程采用实践教学，动手操作实践能力比较强，学完之后具备Cognos开发的能力与水平，数据可视化的操作，报表的开发与业务逻辑的理解 ，对于数据仓库的理解，指标的展示意义，及软件的实践，丰富的实践案例，知识点...
在中设置超级链接教学设计.pdf
12-15
3. 练习：学生自主学习和实际操作超级链接的创建、编辑和删除，并完成任务练习。 4. 展示：学生展示自己的作品，并接受教师和同伴的评价和反馈。 教学资源： * 教师教的资源：演示课件、无链接的 PPT * 学生学的...
通用vue组件化搜索组件页面
qq_55928824的博客
01-07 2515
通用vue组件化搜索组件页面
dataV中重置边框组件的宽高的initWH方法的使用
m0_51431448的博客
09-29 1万+
当我们收缩菜单的时候，中间的dataV边框并没有自适应容器，展开的时候又超出了容器的宽度，所以bug就来了，为了解决百度找了好多资料，但基本上都是说使用组件内部的initWH方法重置组件的宽高，官网也确实有说
可视化大屏练习
weixin_56706590的博客
06-28 178
可视化大屏练习
border-box和content-box最直观的区别和解释
热门推荐
weixin_38606332的博客
07-03 2万+
Chrome浏览器box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中 ，padding和border的改变不能改变width和height的值。   代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; ...
DataV在vue cli上的安装和自定义修改样式
Yueqin0512的博客
06-28 6552
<dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
vue的mounted和created方法的执行
weixin_43626356的博客
04-09 2953
Vue的created 和 mouted的执行顺序 今天在数据可视化的项目中，用了echarts和vue来进行展示。按照我的理解，先执行created中调用后台数据的接口，然后再进行echarts的展现。很遗憾一直失败，而且每次打印都有数据，但是始终无法给echarts绑定。 <template> <div class="map"> <dv-border-box-8 class="map-chart-border"> &lt
Vue-components封装组件
Mr.小灰狼_随笔
05-01 4517
Vue-components封装组件 整理一下自己在 Vue2 项目中常用到的一些封装组件 ： 大部分是结合 element-ui 组件库 进行的二次封装 ： 目录 1、Input 输入框 2、Table 表格 3、Tree 树形控件 4、Pagination 分页 5、Dialog 对话框 6、ECharts 图表 7、wangEditor 富文本编辑器...
综合能源展示大屏html
05-12
很抱歉，我无法提供完整的综合能源展示大屏HTML代码。这需要根据具体的需求和数据来源进行定制开发。但是我可以给你一些建议和指导： 1. 首先，你需要确定你要展示哪些能源指标的数据，如电力、燃气、水等。这些...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值