可视化大屏练习

最新推荐文章于 2022-09-26 14:17:29 发布

weixin_56706590

最新推荐文章于 2022-09-26 14:17:29 发布

阅读量186

点赞数

文章标签： javascript echarts vue.js

本文链接：https://blog.csdn.net/weixin_56706590/article/details/125494880

版权

布局划分

<template>
  <div>
    <header>
      <h1>赣州房价分析平台</h1>
    </header>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <TopTenPage>
          <ItemOne/>
        </TopTenPage>
        <LunboPage>
          <ItemTwo/>
        </LunboPage>
      </section>
      <!-- 中容器 -->
      <section class="itemCenter">
        <TimePage/>
        <MapPage/>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage>
          <ItemThree/>
        </ItemPage>
        <ItemPage>
          <ItemFour/>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script>
import ItemPage from "@/components/itemPage.vue"
import LunboPage from "@/components/lunboPage.vue"
import TopTenPage from "@/components/topTenPage.vue"
import TimePage from "@/components/timePage.vue"
import MapPage from "@/components/mapPage.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"
export default {
  name: 'homePage',
  data() {
    return {

    };
  },
  components:{
    ItemPage,
    LunboPage,
    TopTenPage,
    TimePage,
    MapPage,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour
  },
  computed:{

  },
  methods: {

},
};
</script>

<style lang="less" scoped>
  header{
    height: 1rem;
    width: 100%;
    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>

插槽组件

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

<script>
export default {
  name: '',
  data() {
    return {

    };
  },
  computed:{

  },
  methods: {

},
};
</script>

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

排序横向柱状图

<template>
  <div>
    <!-- <dv-border-box-8 style="height:100% width:100%">dv-border-box-8</dv-border-box-8> -->
    <h2>赣州各区县房屋均价Top10(元/㎡)</h2>
    <div class="chart" id="topten">
        
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  components: {},
  computed: {},
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("topten"));

      // 指定图表的配置项和数据
      var option;
      let ydata = ["崇义", "龙南", "瑞金", "赣县", "南康", "信丰", "上犹","章贡","定南","全南"];
      let xdata = [11522, 13, 14, 15, 16, 17, 18,5304,7569,9947];
      option = {
        tooltip: {
          trigger: "axis"
        },
        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.length - 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);
    }
  },
  mounted() {
    this.myEcharts();
  }
};
</script>

<style lang='less' scoped>

h2 {
  height: 0.5rem;
  color: #fff;
  line-height: 0.5rem;
  font-size: 0.4rem;
  text-align: center;
}
.chart {
  height: 6.5rem;
}
</style>

折线图

<template>
  <div class="chart" id="zhexian">
     <!-- <h2>hhhhh</h2> -->
  </div>
</template>

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

      option = {
        title: {
          text: "房价走势图",
          // color:"#fff"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2022/2", "2022/3", "2022/4", "2022/5", "2022/6"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "赣州",
            type: "line",
            stack: "Total",
            data: [9358, 9421, 9394, 9348, 9610]
          },
          {
            name: "章贡",
            type: "line",
            stack: "Total",
            data: [10273, 10160, 9744, 9774, 10144]
          },
          {
            name: "南康",
            type: "line",
            stack: "Total",
            data: [6986,7185,7206,7090,7116]
          },
          {
            name: "赣县",
            type: "line",
            stack: "Total",
            data: [8046,8006,8046,8144,8056]
          },
          {
            name: "瑞金",
            type: "line",
            stack: "Total",
            data: [7390,7180,7264,7349,7455]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

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

轮播表格

<template>
  <div class="box">
    <dv-scroll-board :config="config" style="width:100%;height:100%" />
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      "config":{
      "header": ['小区名称', '房屋单价(元/㎡)', '地址'],
      "headerBGC"	:"rgb(65, 152, 207)",
      "data": [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
      ],
      "index": true,
      "columnWidth": [50],
      "align": ['center']
    }
  }
  },
  components:{

  },
  computed:{

  },
  methods: {

},
};
</script>

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