vue数据大屏开发

圈圈的熊

于 2024-08-09 17:03:35 发布

阅读量1k

点赞数 23

分类专栏： vue.js 文章标签： vue.js 前端 javascript 大数据 echarts

本文链接：https://blog.csdn.net/xyx8958/article/details/141063228

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、ECharts的基本使用

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

主要有以下特点：

丰富的可视化类型
多种数据格式无需转换直接使用
千万数据的前端展现
移动端优化
多渲染方案，跨平台使用！
深度的交互式数据探索
多维数据的支持以及丰富的视觉编码手段
动态数据
绚丽的特效
通过 GL 实现更多更强大绚丽的三维可视化

(一)、下载

npm install echarts --save

(二)、引入插件

main.js中写入以下代码

import * as echarts from "echarts";

Vue.prototype.$echarts = echarts;

(三)、创建节点

在你要开发的页面进行

<template>
  <div>
    <div id="chart"></div>
  </div>
</template>

<style scoped>
    #chartOne {
        width: 400px;
        height: 300px;
    }
</style>

(四)、初始化实例

export default {
  data() {
    return {
      echart: "",
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.echart = this.$echarts.init(document.getElementById("chart")); // 基于准备好的 dom，初始化 echarts 实例
    },
  }
}

(五)、准备配置项

loadMap(data, name, myChart) {
      // 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
      this.$echarts.registerMap(name, data);
      var option = {
        tooltip: {
          show: true,
          formatter: function(params) {
            if (params.data) {
              return params.data.parkName;
            } else {
              return params.name;
            }
          },
        },
        geo: {
          map: name,
          zoom: 1.2,
          label: {
            normal: {
              show: name == "china" ? false : true,
              color: "#fff",
            },
            emphasis: {
              show: true,
              color: "#fff",
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              borderColor: "#b9b4b7",
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#073684", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#061E3D", // 100% 处的颜色
                  },
                ],
              },
            },
            emphasis: {
              areaColor: "#7295fd",
            },
          },
        },
        series: [
          {
            name: "供需占比",
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: function(data) {
              return 5;
            },
            rippleEffect: {
              color: "#C5CCFF",
              number: 3,
              period: 2,
              scale: 3,
              brushType: "fill",
            },
            symbolSize: 10,
            data: geoCoordMap,
            itemStyle: {
              color: "red", // 修改为你想要的颜色值
              shadowBlur: 10,
              shadowColor: "red",
            },
            emphasis: {
              itemStyle: {
                color: "red", // 修改为你想要的颜色值
              },
            },
          },

          {
            name: "MAP",
            type: "map",
            mapType: name,
            geoIndex: 0,
            data: allData,
            selectedMode: "false", //是否允许选中多个区域
            label: {
              normal: {
                show: false,
                formatter: function(val) {
                  val.value = val.value ? val.value : 100;
                  var area_content =
                    "{a|" + val.name + "}" + "-" + "{b|" + val.value + "}";
                  return area_content.split("-").join("\n");
                }, //让series 中的文字进行换行
                rich: {
                  a: {
                    color: "#fff",
                  },
                  b: {
                    color: "#fff",
                    fontFamily: "Microsoft YaHei",
                    fontSize: 14,
                    width: 16,
                    height: 16,
                    borderRadius: 10,
                    borderWidth: 1,
                    borderColor: "#f00",
                    textAlign: "center",
                    padding: 2,
                  },
                }, //富文本样式,就是上面的formatter中'{a|'和'{b|'
              },
              emphasis: {
                show: false,
              },
            }, //地图中文字内容及样式控制
          },
        ],
      };
    },

(六)、绘制图表

myChart.setOption(option, true);

(七)、完整代码

<template>
  <div>
    <div id="chart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import china from "@/assets/get/china.json";
import sichuan from "@/assets/get/sichuan/sichuan.json";

// 成都
import chengdu from "@/assets/get/sichuan/chengdu/chengdu.json";
import dujiangyan from "@/assets/get/sichuan/chengdu/dujiangyanshi.json";
  /**
   * ......
   * 根据自己项目下载json文件并配置
   * 这个步骤可以从后端获取,
   */


var provinces = {
  四川: sichuan,
  // 成都
  成都市: chengdu,
};
// 各省份的数据
var allData = [
  {
    parkName: "北京",
  },
  {
    parkName: "四川",
  },
];
// 需要展示的点
var geoCoordMap = [];
export default {
  data() {
    return {
      echart: "",
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", () => {
      this.echart.resize();
    });
  },
  watch: {
    "$store.state.hidden_aside"() {
      setTimeout(() => {
        this.echart.resize();
      }, 500);
    },
  },
  methods: {
    //   获取数据
    getData() {
      this.$axios
        .getAction("bigData/query.do?queryKey=parking_parks")
        .then((res) => {
          if (res.success) {
            geoCoordMap = res.data.map((item) => {
              return {
                name: item.county,
                value: [item.PRECISIONS, item.LATITUDE],
                // county: item.county,
                province: item.province,
                city: item.city,
                parkName: item.ORG_NAME,
              };
            });
            this.initChart();
          } else {
            this.$message.error("parking_parks 获取数据失败");
          }
        });
    },
    //this.$echarts
    initChart() {
      let that = this;
      this.echart = this.$echarts.init(document.getElementById("chart"));

      // 加载地图
      this.loadMap(china, "china", this.echart);
      var timeFn = null;
      //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
      this.echart.on("click", function(params) {
        switch (params.name) {
          case "乐山市":
            provinces.市中区 = LSshizhongqu;
            break;
          case "内江市":
            provinces.市中区 = NJshizhongqu;
            break;
        }
        clearTimeout(timeFn);
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function() {
          var name = params.name; //地区name
          //   var county = params.data.county
          var mapCode = provinces[name]; //地区的json数据
          if (!mapCode) {
            alert("无此区域地图显示");
            return;
          }

          that.loadMap(mapCode, name, that.echart);
        }, 250);
      });

      // 绑定双击事件，返回全国地图
      this.echart.on("dblclick", function(params) {
        //当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);
        //返回全国地图
        that.loadMap(china, "china", that.echart);
      });
    },
    loadMap(data, name, myChart) {
      // 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
      this.$echarts.registerMap(name, data);
      var option = {
        tooltip: {
          show: true,
          formatter: function(params) {
            if (params.data) {
              return params.data.parkName;
            } else {
              return params.name;
            }
          },
        },
        geo: {
          map: name,
          zoom: 1.2,
          label: {
            normal: {
              show: name == "china" ? false : true,
              color: "#fff",
            },
            emphasis: {
              show: true,
              color: "#fff",
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              borderColor: "#b9b4b7",
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#073684", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#061E3D", // 100% 处的颜色
                  },
                ],
              },
            },
            emphasis: {
              areaColor: "#7295fd",
            },
          },
        },
        series: [
          {
            name: "供需占比",
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: function(data) {
              return 5;
            },
            rippleEffect: {
              color: "#C5CCFF",
              number: 3,
              period: 2,
              scale: 3,
              brushType: "fill",
            },
            symbolSize: 10,
            data: geoCoordMap,
            itemStyle: {
              color: "red", // 修改为你想要的颜色值
              shadowBlur: 10,
              shadowColor: "red",
            },
            emphasis: {
              itemStyle: {
                color: "red", // 修改为你想要的颜色值
              },
            },
          },

          {
            name: "MAP",
            type: "map",
            mapType: name,
            geoIndex: 0,
            data: allData,
            selectedMode: "false", //是否允许选中多个区域
            label: {
              normal: {
                show: false,
                formatter: function(val) {
                  val.value = val.value ? val.value : 100;
                  var area_content =
                    "{a|" + val.name + "}" + "-" + "{b|" + val.value + "}";
                  return area_content.split("-").join("\n");
                }, //让series 中的文字进行换行
                rich: {
                  a: {
                    color: "#fff",
                  },
                  b: {
                    color: "#fff",
                    fontFamily: "Microsoft YaHei",
                    fontSize: 14,
                    width: 16,
                    height: 16,
                    borderRadius: 10,
                    borderWidth: 1,
                    borderColor: "#f00",
                    textAlign: "center",
                    padding: 2,
                  },
                }, //富文本样式,就是上面的formatter中'{a|'和'{b|'
              },
              emphasis: {
                show: false,
              },
            }, //地图中文字内容及样式控制
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style>
/* 样式 */
</style>

样式功能展示：

官方文档：Echarts 官方文档

因为是国外的网站，所以浏览起来会有些慢，在此篇文章结尾我会放几个国内镜像的还不错的图表网站。

二、DataV的基本使用

组件库基于Vue （React版 (opens new window)），主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

兼容性

组件库的开发和调试都使用Chrome浏览器，没有时间和精力做其他浏览器的兼容，尤其是IE。

所以请使用Chrome浏览器。

这个插件最好用的就是可以根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。

(一)、下载

// npm安装
npm install @jiaminghi/data-view
// yarn安装
yarn add @jiaminghi/data-view

(二)、引入插件

在main.js中写入：

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

(三)、使用

只要全局注册后就可以直接使用里面的全屏容器、边框、装饰等组件了

例如：

<template>
    <dv-full-screen-container>
        <dv-border-box-11
            ref="borderBox_2"
            class="componList Operational"
            title="设备分析"
            :titleWidth="180">
            <EquipmentComponent ref="equipmentref"></EquipmentComponent>
        </dv-border-box-11>
        // 按需添加....
        <dv-border-box-12>...</dv-border-box-12>
        <dv-border-box-6>...</dv-border-box-6>
    </dv-full-screen-container>
</template>

推荐几个好用的图表网站：
https://www.isqqw.com/

https://ppchart.com/#/

makeapie echarts社区图表可视化案例

https://madeapie.com/#/

数据可视化技术分享 - Powered by Discuz!

https://echarts.apache.org/examples/zh/index.html

......

欢迎大家补充~

圈圈的熊

关注

23
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue数据大屏开发

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库。因为是国外的网站，所以浏览起来会有些慢，在此篇文章结尾我会放几个国内镜像的还不错的图表网站。组件库的开发和调试都使用Chrome浏览器，没有时间和精力做其他浏览器的兼容，尤其是IE。，提供直观，交互丰富，可高度个性化定制的数据可视化图表。多维数据的支持以及丰富的视觉编码手段。
复制链接

扫一扫

专栏目录