ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)

news2024/11/9 2:37:16

ChatGPT工作提效系列文章目录

  1. ChatGPT工作提效之初探路径独孤九剑遇强则强
  2. ChatGPT工作提效之在程序开发中的巧劲和指令(创建MySQL语句、PHP语句、Javascript用法、python的交互)
  3. ChatGPT工作提效之生成开发需求和报价单并转为Excel格式
  4. ChatGPT工作提效之小鹅通二次开发批量API对接解决方案(学习记录同步、用户注册同步、权益订购同步、开发文档)
  5. ChatGPT工作提效之使用python开发对接百度地图开放平台API的实战方案
  6. ChatGPT工作提效之layedit上传多附件的解决方案(layedit赋值、layui.js底层修改、追加模式多附件上传)
  7. ChatGPT工作提效之使用百度地图在首都为六一儿童节献爱心(多边形覆盖物、文本标注、自动获取经纬度、爱心函数)

ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案

  • ChatGPT工作提效系列文章目录
    • 1.如何加载大数量的折线图?
    • 2.如何在echart中实现伪3D的饼图效果?
    • 3.如何获取中国地图geojson属性中每个省的cp属性(中心坐标)
    • 4.如何在echarts中实现map3D的材质功能


在这里插入图片描述

数据可视化大屏的图表组件,有哪些开源产品?

数据可视化大屏的图表组件,有很多开源产品,主要有以下几种:

  1. ECharts:ECharts 是百度开源的数据可视化库,提供了各种各样的图表类型和丰富的功能,包括折线图、柱状图、散点图、饼图、雷达图、热力图等。

  2. Chart.js:Chart.js 是一个简单灵活的 JavaScript 图表库,支持多种图表类型,包括折线图、柱状图、饼图、散点图等。

  3. D3.js:D3.js 是一个 JavaScript 数据可视化库,提供了丰富的 API,能够创建各种各样的定制化可视化图表。

  4. AntV:AntV 是阿里云的前端可视化解决方案,提供了各种各样的图表类型,包括折线图、柱状图、饼图、散点图等。

  5. Highcharts:Highcharts 是一个 JavaScript 数据可视化库,提供了多种图表类型和交互式功能。

  6. FusionCharts:FusionCharts 是一个基于 Flash 和 JavaScript 的交互式图表库,支持多种图表类型,包括折线图、柱状图、饼图、散点图等。

以上是一些开源的数据可视化大屏图表组件,开发者可以根据项目需求选择合适的组件进行开发。

如何使用Echarts?

要使用 Echarts 进行数据可视化,可以按照以下步骤进行:

  1. 下载 Echarts:可以在 Echarts 的官网(https://echarts.apache.org/zh/index.html)上下载最新的版本。

  2. 引入 Echarts 库:在 HTML 页面中引入 Echarts 库的文件,例如:

<script src="echarts.min.js"></script>
  1. 创建一个 DOM 元素:在 HTML 页面中创建一个 DOM 元素,用于显示图表,例如:
<div id="myChart" style="width: 600px;height:400px;"></div>
  1. 初始化 Echarts 实例:在 JavaScript 代码中初始化 Echarts 实例,并设置图表的配置项和数据,例如:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
  1. 在网页中显示图表:最后在网页中显示图表即可。

以上就是使用 Echarts 进行数据可视化的基本步骤,具体的图表类型和配置项可以参考 Echarts 的官方文档进行学习和使用。

1.如何加载大数量的折线图?

加载大量的折线图,可以采用 Echarts 提供的大数据量加载方案,即数据分块加载(dataset)和视图区域范围(dataZoom)限制,以避免过多数据的同时提高渲染性能。

下面是一个加载大量的折线图的基本代码:

// 数据分块加载(dataset)
var data = [...]; // 数据数组
var option = {
    dataset: {
        source: data,
        // 每次渲染的数据量
        dimensions: ['日期', '数值'],
        sourceHeader: false
    },
    // 视图区域范围(dataZoom)
    dataZoom: [
        {
            type: 'slider',   // 滑动条形式
            xAxisIndex: 0,    // 设置 dataZoom 组件控制的 x轴
            start: 0,         // 起始位置
            end: 50           // 结束位置
        }
    ],
    // 折线图配置项
    series: [
        {
            type: 'line',
            encode: {
                x: 0,  // 指定数据的维度作为 x 轴
                y: 1   // 指定数据的维度作为 y 轴
            }
        }
    ]
};

// 初始化 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

上面代码中的 data 数组存储了大量的数据,通过 dataset 配置项实现了数据分块加载,每次渲染一定数量的数据,避免了一次性渲染大量数据导致的性能问题。通过 dataZoom 配置项实现视图区域范围限制,只渲染指定区域范围内的数据。

如果需要动态加载数据,可以结合 Echarts 提供的 ajax 动态获取数据方案进行:

// 初始化 Echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 大量数据的折线图配置项
var option = {
    dataset: {
        source: [],   // 初始数据为空
        dimensions: ['日期', '数值'],
        sourceHeader: false
    },
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 50
        }
    ],
    series: [
        {
            type: 'line',
            encode: {
                x: 0,
                y: 1
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

// ajax 获取数据
$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(res) {
        // 更新数据
        myChart.setOption({
            dataset: {
                source: res   // 更新数据为 ajax 获取到的数据
            }
        });
    }
});

上面的代码中,通过 ajax 获取数据,更新数据并动态更新大量的折线图。

2.如何在echart中实现伪3D的饼图效果?

要在 Echarts 中实现伪3D的饼图效果,可以通过以下步骤进行:

  1. 引入 Echarts 库:在 HTML 页面中引入 Echarts 库的文件,例如:
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
  1. 创建一个 DOM 元素:在 HTML 页面中创建一个 DOM 元素,用于显示图表,例如:
<div id="myChart" style="width: 600px; height: 400px"></div>
  1. 初始化 Echarts 实例:在 JavaScript 代码中初始化 Echarts 实例,并设置图表的配置项和数据,例如:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 设置图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
  1. 设置饼图的 3D 效果:在上述代码中,通过在 series 中的 itemStyle 中设置 depth 属性,可以实现饼图的 3D 效果。同时需要添加 coordinateSystem 属性,以指示该系列属于哪个坐标系,例如:
series: [
    {
        name: '访问来源',
        type: 'pie',
        coordinateSystem: 'polar',  // 指定坐标系为极坐标系
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        itemStyle: {  // 3D 效果设置
            normal: {
                borderWidth: 5,
                borderColor: '#fff',
                opacity: 0.8,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 3,
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                depth: 50  // 3D 效果的深度
            }
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }
]
  1. 在网页中显示图表:最后在网页中显示图表即可。

上述代码中的 depth 属性值可以根据实际情况进行设置,以达到适当的 3D 效果效果。

在这里插入图片描述

3.如何获取中国地图geojson属性中每个省的cp属性(中心坐标)

在 Echarts 中,可以通过 geo 组件加载地图数据,而中国地图的 geoJSON 数据默认包含了各个省份的边界数据,以及其他属性,例如各省的 cp 属性用于设置省份地图的中心坐标。

可以通过先加载中国地图的 geoJSON 数据,然后使用 echarts.util.mapData.params 方法获取各省的 cp 属性数据,对应的省份数据索引与中国地图 geoJSON 数据的 features 数组下标一一对应。

如需获取各省 cp 属性数据,可以按照以下步骤进行:

  1. 加载中国地图的 geoJSON 数据,例如:
$.getJSON('./china.json', function (chinaJson) {
  echarts.registerMap('china', chinaJson);
  // 进行其他操作...
});
  1. 获取各省的 cp 属性数据,例如:
var params = echarts.util.mapData.params('china');
var coordinates = params.rawFeatures.map(function (feature) {
    // return feature.properties.cp;
    return feature.attributes.cp; // echarts 5.x 需要使用 attributes 属性
});
console.log(coordinates);

在上述代码中,echarts.util.mapData.params 会返回包含中国地图各省数据的信息对象,其中 rawFeatures 数组包含了各省的坐标数据以及其他属性数据,例如 cp 属性。使用 map 方法将各省的 cp 属性数据存入 coordinates 数组中,以便后续使用。

注意:在 Echarts 5.x 中,需要使用 attributes 属性获取各个省份的 cp 值。如果使用 properties 属性,在控制台中会出现 “Uncaught TypeError: Cannot read properties of undefined (reading ‘properties’)” 错误。

4.如何在echarts中实现map3D的材质功能

在 Echarts 中实现 map3D 地图的材质功能,需要按照以下步骤进行:

  1. 为地图数据添加高程信息

geoJSON 数据中,地理信息数据只包含各个省市的边界信息,需要通过高程数据获取地图数据的 3D 笛卡尔坐标。可以使用 echarts.add3DLayer 函数为 geoJSON 数据添加高程信息。

例如,使用以下代码获取中国地图的高程数据:

$.get('data/asset/data/geo3d-china.json', function (geo3D) {
  echarts.add3DLayer('china-high', geo3D, {
    // 其他配置项
  });
}, 'json');

其中,geo3d-china.json 文件是包含中国地图高程数据的 json 文件。echarts.add3DLayer 函数用于添加 3D 图层,第一个参数为图层名称,第二个参数是高程数据,第三个参数是配置项。

通过添加高程数据,地图的图层信息就变成了 3D 笛卡尔坐标系的空间信息。

  1. 定义材质样式

使用 echarts.registerMap3d 函数进行地图的 3D 效果的渲染,可以通过在地图的 textures 属性中配置材质路径和样式信息实现地图材质功能。

例如,定义一个地图 材质

echarts.registerMap3d('mapName', {
    //材质路径
    texture: 'path/to/texture.png',
    // 材质样式
    color: 'red',
    // 光照强度,控制阴影的强度
    specularIntensity: 1,
    // 高光贴图强度
    glossIntensity: 1,
    // 其他配置项
});

其中,texture 为材质路径,可以是图片路径或调色板配色方式;color 为材质颜色;另外还可以通过 specularIntensityglossIntensity 属性来控制阴影、镜面和高光的效果。

  1. 为地图元素应用材质

将定义的材质样式应用到地图元素上,可以在地图的 visualMap 中配置对应的材质信息。例如:

var option = {
    // 其他配置项
    visualMap: {
        type: 'continuous',
        dimension: 'value',
        calculable: true,
        min: 0,
        max: 1000,
        top: 'bottom',
        left: 'right',
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        // 定义材质
        textures: [
          {id: 'mapName', type: 'repeat', src: 'path/to/texture.png'}
        ],
        inRange: {
            // 应用材质
            texture: 'mapName',
            color: '#fff'
        },
        // 其他配置项
        seriesIndex: [0]
    },
    // 其他配置项
}

在上述代码中,通过 textures 属性引入定义的材质,再通过 inRange 属性在视觉映射中应用材质,以实现地图的材质效果。

需要注意的是,不同的视觉映射类型(continuouspiecewisecategory)会影响材质显示的效果。在设置材质时,需要视图形数据类型选择合适的映射方式,并根据实际需求进行适当调整才能达到最佳效果。


@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/635756.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【电路】电路与电子技术基础 课堂笔记 第7章 晶体管放大电路

7.1 放大的概念 7.1.1 放大电路基础 放大电路可以将电信号不失真地进行放大&#xff0c;而且是幅度放大&#xff1b; 本质上&#xff0c;放大是对能量进行控制和转换&#xff0c; 由一个能量较小的输入信号控制直流电源&#xff0c; 将直流电源的能量转换成与输入信号频率…

yolov8量化部署(基于openvino和tensorrt)

yolov8 openvino量化部署 环境配置&#xff1a; pip install ultralytics && pip install openvino-dev将pytorch模型转为openvino模型: from ultralytics import YOLO# Load a model model YOLO("./yolov8n.pt") # load an official model# Export the…

S7-200 PLC编程软件介绍

更多关于西门子S7-200PLC内容请查看&#xff1a;西门子200系列PLC学习课程大纲(课程筹备中) 西门子200PLC编程软件采用的是STEP 7-Micro/WIN 软件。它可以进行编写程序&#xff0c;PLC程序下载与上传&#xff0c;编程向导&#xff0c;程序编译&#xff0c;PLC程序监控等等功能…

软件工程开发文档写作教程(12)—概要设计书的编制目标

本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;电子工业出版社《软件文档写作教程》 马平&#xff0c;黄冬梅编著 概要设计书概述 《概要设计说明书》又称为《系统设计说明书》&#xff0c;编制的目的是说明…

Cracking C++(10): 基本的输入输出流

文章目录 1. 目的2. I/O Streams 输入/输出流3. Stream Operators 流操作符4. 禁止使用 std::endl5. 缓冲区&#xff1a;直观理解6. References 1. 目的 查看 hackingcpp 上的 Input & Output (Basics) 教程后的笔记和拓展内容。 2. I/O Streams 输入/输出流 使用 C 的标…

chatgpt赋能python:合并多个文件——Python的终极解决方案

合并多个文件——Python的终极解决方案 Python是一种高级编程语言&#xff0c;其简单明了的语法和丰富的库使其成为开发者的首选语言之一。在日常编码中&#xff0c;我们有时候需要将多个文件合并成一个文件以便于处理。这篇文章将详细介绍Python如何进行多个文件的合并。 什…

高数下——查漏补缺

期末复习 一、向量与空间几何 二、多元函数与重极限 2.1定义域 2.2 二元函数重极限

【实战】体验SadTalker

论文http://openaccess.thecvf.com//content/CVPR2023/papers/Zhang_SadTalker_Learning_Realistic_3D_Motion_Coefficients_for_Stylized_Audio-Driven_Single_CVPR_2023_paper.pdf github GitHub - OpenTalker/SadTalker: [CVPR 2023] SadTalker&#xff1a;Learning Realist…

chatgpt赋能python:Python如何合并单元格-实用技巧教程

Python如何合并单元格 - 实用技巧教程 单元格合并是Excel文件和Word文档等办公软件中很常见的功能&#xff0c;而使用Python对数据进行处理时&#xff0c;也可能需要实现合并单元格的操作。本文将为大家介绍Python中实现合并单元格的方法&#xff0c;并给出代码示例。 什么是…

HTML段落标签

HTML段落标签 段落标签 显示特点&#xff1a; 代码&#xff1a; 显示效果&#xff1a; 总结&#xff1a; 答案&#xff1a;

Java性能权威指南-总结10

Java性能权威指南-总结10 垃圾收集算法理解G1垃圾收集器 垃圾收集算法 理解G1垃圾收集器 G1垃圾收集器是一种工作在堆内不同分区上的并发收集器。分区(region)既可以归属于老年代&#xff0c;也可以归属于新生代(默认情况下&#xff0c;一个堆被划分成2048个分区),同一个代的…

chatgpt赋能python:如何取消Python中的科学计数法

如何取消Python中的科学计数法 Python是一种面向对象、解释型的高级编程语言。由于它在数值计算、科学计算以及数据分析等领域的强大功能&#xff0c;Python语言已经成为科学计算和机器学习领域中最常用的语言之一。 然而&#xff0c;当我们进行大量运算时&#xff0c;Python…

[SpringBoot]Spring Security框架

目录 关于Spring Security框架 Spring Security框架的依赖项 Spring Security框架的典型特征 关于Spring Security的配置 关于默认的登录页 关于请求的授权访问&#xff08;访问控制&#xff09; 使用自定义的账号登录 使用数据库中的账号登录 关于密码编码器 使用BCry…

chatgpt赋能python:Python和Java:如何结合使用以提高开发效率

Python和Java&#xff1a;如何结合使用以提高开发效率 Python和Java是两种非常流行的编程语言&#xff0c;它们各自有自己的优势和用途。但有时候&#xff0c;我们需要将它们结合起来使用&#xff0c;以便更好地完成某些任务。在本文中&#xff0c;我们将介绍如何通过使用Java…

2.17 内存映射(1) 2.18内存映射(2)

2.17 内存映射&#xff08;1&#xff09; 内存映射 内存映射相关系统调用 void *mmap(void *addr, size_t length, int prot, int flags,int fd, off_t offset);- 功能&#xff1a;将一个文件或者设备的数据映射到内存中- 参数&#xff1a;- void *addr: NULL, 由内核指定- le…

SpringSecurity学习 -- 1 springSecurity

目录 简介&#xff1a; token和jwt的区别 1.快速入门 1.自定义用户名和密码。 自定义重定向。 2.设置权限管理 3.从路径中获取用户信息 2.SpringSecurity核心组件 SecurityContext : authentication对象的容器。 SecurityContextHolder : Authentication: ​编辑 U…

Scala概述及变量和常量的重点

1.什么是scala Scala是一种多范式的编程语言&#xff08;多范式&#xff1a;多种编程方法的意思。有面向过程、面向对象、泛型、函数式四种程序设计方法&#xff09;&#xff0c;其设计的初衷是要集成面向对象编程和函数式编程的各种特性。Scala运行于Java平台&#xff08;Jav…

python语法-面向对象数据分析案例(每日销售额柱状图数据可视化)

面向对象数据分析案例&#xff08;每日销售额柱状图数据可视化&#xff09; 使用工具&#xff1a; Pycharm、面向对象、json模块、pyecharts模块等 实现步骤&#xff1a; 读取数据–封装数据对象–计算数据对象–pyechars绘图 &#xff08;项目数据见文章末参考内容&#xff09…

UDS关于0x36数据传输学习笔记

1.服务说明 客户端使用TransferData服务将数据从客户端传输到服务器&#xff08;下载&#xff09;或从服务器传输到客户端&#xff08;上传&#xff09;。 数据传输方向由前面的RequestDownload或RequestUpload服务定义。如果客户端发起了RequestDownload&#xff0c;则要下载的…

HTML注释

注释 注释的写法&#xff1a; 注释快捷键&#xff1a; 代码&#xff1a; 效果&#xff1a; 总结 答案&#xff1a;