【echart】数据可视化

什么是数据可视化?

数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。

如何绘制?

echarts 图表的绘制,大体分为三步:

  • 1.根据 DOM 实例,通过 echarts.init 方法,生成 echarts 实例
  • 2.构建 options 配置对象,整个 echarts 的样式,皆由该对象决定
  • 3.最后通过 实例.setOption 方法,设置配置对象

绘制横向柱状图

<template><p style="margin: 20px 20px 0;">【大区分布图】</p><div ref="target" style="width: 600px; height: 400px"></div>
</template>
<script setup>
import { defineProps, onMounted ,ref} from "vue";
import * as echarts from "echarts";
import { BarChart } from "echarts/charts";
const props = defineProps({data: {type: Object,required: true,},
});
console.log(props.data);
let myChart = null;
const target = ref(null)// 2、构建option对象
var option = {// x轴xAxis: {show:false,type: "value",max:function(value){return parseInt(value.max *1.2)}},// y轴yAxis: {type: "category",data:props.data.map((item)=>{return item.name}),inverse:true,axisLine:{show:false},axisTick:{show:false},axisLabel:{color:'#9eb1c8'}},// 图表绘制位置grid:{top:10,right:20,left:20,containLabel:true},// 核心配置series: [{type: "bar",data:props.data.map((item)=>({name:item.name,value:item.value})),showBackground:true,backgroundStyle:{color:'rgba(180,180,180,0.2)'},itemStyle:{color:'#5D98CE',barBorderRadius:5,shadowColor:'rgba(0,0,0,0.3)',shadowBlur:5},barWidth:12,label:{show:true,position: 'right',textStyle:{color:'#fff',}}},],
};
onMounted(async () => {setTimeout(() => {
// 、初始化echarts实例myChart = echarts.init(target.value);// 3、通过实例.setOption(option)
myChart.setOption(option);}, 3000);
});</script>

 

绘制风险雷达图

radar:坐标系配置

polar:坐标极点

angleAxis:坐标角度

radiusAxis:径向轴

series:核心配置

绘制异常处理双环形图

legend:图例配置(width:-5-->竖向展示)

tooltip:提示层

xAxis:x轴

yAxis:y轴

serise:


props.data.xxx.foreach((item,index)=>{
// 上层series.push({name:item.name,type:'pie',clockWise:false,hoverAnimation:false,radius:[73 - index*15+'%',68 - index*15+'%'],center:['55%','55%'],label:{show:false    },data:[{value:item.value,name:item.name},{value:1000,itemStyle:{color:'rgba(0,0,0,0)',borderWidth:0},toolip:{show:false},hoverAnimation:false,}]})
// 底层series.push({name:item.name,type:'pie',silent:true,z:1,clockWise:false,hoverAnimation:false,radius:[73 - index*15+'%',68 - index*15+'%'],center:['55%','55%'],label:{show:false    },data:[ {value:7.5,itemStyle:{color:'rgb(3,31,62)',borderWidth:0},toolip:{show:false,hoverAnimation:false,}},{value:2.5,itemStyle:{color:'rgba(0,0,0,0)',borderWidth:0},toolip:{show:false,hoverAnimation:false,}}]})
})

绘制数据传递关系图

graph和lines

xAxis:x轴,show:false

yAxis:y轴,show:false

series:

series:[{type:'graph',layout:'none',coordinateSystem:'cartesian2d',sysmbolSize:26,z:3,edgeLabel:{normal:{show:true,color:'#fff',textStyle:{fontSize:14},formatter:function(params){return params.data.speed}}},label:{normal:{show:true,position:'bottom',color:'#5E5E5E'}},edgeSymbol:['none','arrow'],edgeSymbolSize:8,data:...,links:data.foreach((item,index)=>{source:item.source,target:item.target,speed:`${item.speed}kb/s`,lineStyle:{normal:{color:'#12b5d0',curveness:0.2}}})}
]

 

绘制关键词条文档云图

引入三方包:

npm install --save echarts-wordcloud@2.1.0

series:[{
type:[
{type:'wordCloud',sizeRange:[8,46],rotationRange:[0,0],gridSize:0,layoutAnimation:true,textStyle:{color:randomRGB},emphasis:{textStyle:{fontWeight:'bold',color:'#000'}}}]
}]

 

时间轴图表绘制

const option = {timeline:{data:props.data,axisType:'category',autoPlay:true,playInterval:3000,left:'10%',right:'10%',bottom:'0%',width:'80%',label:{normal:{textStyle:{color:'#ddd'}},emphasis:{textStyle:{color:'#fff'}}},SymbolSize:10,lineStyle:{color:'#555'},checkpointStyle:{borderColor:'#888',borderWidth:2},controlStyle:{showNextBtn:true,showPreBtn:true,normal:{color:'#666',borderColor:'#666'},emphasis:{color:'#aaa'}}}
}

地图可视化绘制地图

  1. 导入地图的json文件
  2. 注册地图
  3. 配置option
echarts.registerMap('china',mapJson);
const option = {...baseOption:{grid:{right:'2%',top:'15%',bottom:'10%',width:'20%'}geo:{show:true,map:'china',roam:true,zoom:0.8,center:[113.835,34.027],itemStyle:{normal:{borderColor:'rgba(147,235,248,1)';borderWidth:1,areaColor:{type:'radial',x:0.5,y:0.5,r:0.5},colorStop:[{offset:0,color:''},{offset:1,color:''}]},emphasis:{areaColor:'',borderWidth:2}}}}
}

地图可视化绘制散点图

   series: {name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#333'},emphasis: {scale: true},zlevel: 1}

数据自增

第三方库 countup

npm i --save countup.js@2.6.2

new CountUp(起始值,目标值).start();

电子屏幕字体

RX-LED.ttf
 

@font-face{font-family:'Electronic';src:url('./font/RX-LED.ttf');
}

渐变字体
 

.text-gradient{background-image: linear-gradient(to bottom,#e5e4ea,#5ea8f2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

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

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

相关文章

智能合约测试例子

// SPDX-License-Identifier: MIT pragma solidity >0.4.11 <0.9.0; contract CrowdFunding {// 定义的新类型包含两个属性。struct Funder {address addr;uint amount;}struct Campaign {address payable beneficiary;uint fundingGoal;uint numFunders;uint amount;ma…

数据湖与湖仓一体是如何演变而来的?详谈大数据存储架构的变迁

在大数据存储架构的发展历程中&#xff0c;可以划分为三个显著的演进阶段。首先&#xff0c;随着Hadoop和Hive等初期项目的出现&#xff0c;数据仓库&#xff08;Data Warehouse&#xff09;的概念得以确立&#xff1b;随着数据仓库的不断演化&#xff0c;同时有了云与对象存储…

Unity DOTS中的baking(四)blob assets

Unity DOTS中的baking&#xff08;四&#xff09;blob assets blob assets表示不可变的二进制数据&#xff0c;在运行时也不会发生更改。由于blob assets是只读的&#xff0c;这意味着可以安全地并行访问它们。此外&#xff0c;blob assets仅限于使用非托管类型&#xff0c;这意…

一-容量管理是什么?

容量管理的定义 随着企业对外服务的内容和用户不断增长&#xff0c;企业会不断增加对硬件和云基础设施的投入&#xff0c;用于满足业务发展的需要。但是很多业务和技术架构师很可能没有关心或思考过采购这些IT资源的必要性&#xff0c;或者应采购多少IT资源才算合理。当前很多…

C++引用学习day2

思维导图 定义一个矩形类&#xff08;Rectangle&#xff09;&#xff0c;包含私有成员&#xff1a;长(length)、宽&#xff08;width&#xff09;, 定义成员函数&#xff1a; 设置长度&#xff1a;void set_l(int l) 设置宽度&#xff1a;void set_w(int w) 获取长度&#…

STL和泛型编程

STL和泛型编程 一.STL六大部件"前开后闭"区间 二.容器(1)顺序容器1.array源码剖析 2.vector源码剖析vector的迭代器 3.list源码剖析迭代器的设计规则关于重载操作符关于重载->和*操作符 4.forward_list源码剖析 5.deque源码剖析底层数据结构操作实现deque的设计de…

设置定时闹钟,语音播报

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTime>//时间类 #include<QtTextToSpeech>//文本转语音类 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:W…

不再混淆!一文搞懂ECMAScript和JavaScript的真正差异

深入解析ECMAScript和JavaScript的区别 1. 引言2. ECMAScript和JavaScript的定义3. ECMAScript和JavaScript的关系4. ECMAScript的发展历史5. JavaScript的实现和应用6. ECMAScript和JavaScript的区别7. 总结8. 参考资料 1. 引言 大家好&#xff0c;这里是程序猿代码之路。本文…

【Vue】实现的底层原理

底层原理 在 Vue 中实现数据对象和UI模板之间绑定关系&#xff0c;从而实现数据变化自动更新UI的核心机制&#xff0c;主要依赖于响应式系统。Vue的响应式系统基于JavaScript的对象属性访问器&#xff08;getter和setter&#xff09;和依赖收集的概念来实现。下面是这一机制的…

【MATLAB源码-第13期】基于matlab的4ASK的误码率BER和误符号率SER理论和实际对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 "4ASK" 是一种数字调制技术&#xff0c;代表4级振幅移移键控&#xff08;4-Level Amplitude Shift Keying&#xff09;调制。它是一种数字通信中常用的调制方式之一&#xff0c;用于将数字信号转换为模拟信号以便传…

分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存

课程介绍 分享全栈开发医疗小程序 -带源码课件&#xff08;课件无解压密码&#xff09;&#xff0c;自行速度保存&#xff01;看到好多坛友都在求SpringBoot2.X Vue UniAPP&#xff0c;全栈开发医疗小程序 - 带源码课件&#xff0c;我看了一下&#xff0c;要么链接过期&…

GPT2从放弃到入门(四)

引言 体验地址&#xff1a;https://huggingface.co/spaces/greyfoss/gpt2-chatbot 上篇文章我们通过Gradio作为前端轻松地连接到训练好的Chatbot&#xff0c;本文介绍如何分享你创建好的模型给你的朋友。 当你训练好的模型推送到Huggingface Hub上后&#xff0c;其实还可以进一…

Linux 挂载磁盘

第一种方式&#xff08;不分区&#xff09; 磁盘不分区&#xff0c;直接挂载到某个目录。 查看磁盘列表 fdisk -l [root]# fdisk -lDisk /dev/vdb: 214.7 GB, 214748364800 bytes, 419430400 sectors Units sectors of 1 * 512 512 bytes Sector size (logical/physical): …

Codeforces Round 934 (Div. 2) ---- D. Non-Palindromic Substring --- 题解

目录 D. Non-Palindromic Substring &#xff1a; 题目描述&#xff1a; 思路解析&#xff1a; 下面给出两种代码的代码实现&#xff1a; 代码一&#xff1a;线段树实现hash判断回文字符串 代码二&#xff1a;manacher判断回文字符串 D. Non-Palindromic Substring &#…

大数据Hadoop生态圈体系视频课程

课程介绍 熟悉大数据概念&#xff0c;明确大数据职位都有哪些&#xff1b;熟悉Hadoop生态系统都有哪些组件&#xff1b;学习Hadoop生态环境架构&#xff0c;了解分布式集群优势&#xff1b;动手操作Hbase的例子&#xff0c;成功部署伪分布式集群&#xff1b;动手Hadoop安装和配…

codeforces div4 Double Strings

#include<iostream> #include<algorithm> #include<cstring> #include<map> using namespace std; int T, n; string s[900005]; map<string, int>mm;//存放每一个字符串是否出现过 int main() {cin >> T;while (T--){mm.clear();//每次清…

服务端测试开发必备技能:Mock测试

什么是mock测试 Mock 测试就是在测试活动中&#xff0c;对于某些不容易构造或者不容易获取的数据/场景&#xff0c;用一个Mock对象来创建以便测试的测试方法。 Mock测试常见场景 无法控制第三方系统接口的返回&#xff0c;返回的数据不满足要求依赖的接口还未开发完成&#…

linux 离线安装 dotnet tool

1. 在官网下载对应的nuget包,比如: dotnet-dump NuGet Gallery | dotnet-dump 3.1.57502 注意文件名称: dotnet-dump.3.1.57502.nupkg 我犯了一个错误,下载比较慢,然后通过迅雷来下载,结果没有后缀名称. 2. 然后拷贝到linux上,比如: 拷贝到dp文件夹下, 在dp文件夹上级执行命…

2965: 寻宝猎人(贪心)

2965: 寻宝猎人 题目描述 寻宝猎人Tom发现了一处宝藏&#xff0c;宝藏为一个N * M 的矩阵组成&#xff0c;矩阵的每一个点都包含一个钱袋&#xff0c;钱袋中装有若干金币。现在Tom只想从这个矩阵中拿走一块 3 * 3 的矩阵&#xff0c;请问他能拿走的最大金币数量。 输入 第一行输…

mfc140.dll丢失的解决方法,快速修复win10系统dll问题

在Windows 10操作系统环境下&#xff0c;如果发现系统中关键的动态链接库文件mfc140.dll丢失&#xff0c;可能会引发一系列运行问题。mfc140.dll是Microsoft Foundation Class Library&#xff08;微软基础类库&#xff09;的重要组成部分&#xff0c;对于许多基于该库开发的应…