Echarts数据动态可视化的实现

Echarts简介

Echarts缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行。与此相同的数据可视化插件还有Highcharts。不过我还是比较喜欢还是Echarts(支持国货),这篇文章讲解从Echarts的基础入门到通过Echarts制作动态图表。

使用步骤

1.下载Echarts插件

可以去Echarts官网下载Echarts插件
ecahrts下载
可以进行在线定制,可能有人会在选择定制的模块上很纠结,一句话:你觉得你可能用的上的模块都勾上就行了。
下载成功后是这个样子:
在这里插入图片描述

2.通过插件开始编写图表

先将插件导入自己的工程
我用的webStrom,我的工程目录大概是这样子的(内容比较简单):
在这里插入图片描述
工程中也就两个js文件,以及一个页面
学过html都知道html文件就是将页面的大体框架部署出来就OK了,不需要在里面进行复杂的修饰,所以我将要写的js文件一并放到了index.js文件中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    引入Echarts插件--><script src="js/echarts.min.js"></script>
<!--    引入自己编写的js文件--><script src="js/index.js"></script><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;}.login-content{width: 1518px;height: 750px;margin: 0 auto;background-image: url("image/night_background.png");background-repeat: no-repeat;background-size: 100%;}.title{font-size: 20px;width: 200px;height: 40px;margin: 0 auto;color: deepskyblue;text-align: center;}#echarts{width: 90%;height: 300px;margin: 0 auto;}#echarts3{width: 90%;height: 300px;margin: 0 auto;}#echarts2{width: 90%;height: 300px;margin: 0 auto;}.panel{margin-top: 100px;width: 500px;float: left;}
</style>
<body>
<div class="login-content"><div class="panel">
<!--柱形图标--><div class="title">图表一</div><div id="echarts" ></div></div><div class="panel">
<!--饼状图标--><div class="title">图表二</div><div id="echarts2"></div></div>
<!--折线图表--><div class="panel"><div class="title">图表三</div><div id="echarts3"></div></div>
</div>
</body>
</html>

html页面一目了然,也就是构建了一个大体的框架,由于小编为了展示出来的漂亮些,所以就给整个页面加了一个背景图片,如果嫌麻烦这完全可以去掉。

之后就可以开始编写index.js文件了,也就是正式编写可视化图表
我直接源码展示出来:

window.onload = function(){//柱状图//配置var option = {// backgroundColor:'#d48265', //背景颜色color:['#546570'],//系列颜色xAxis: {//x轴type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLine:{ //线条设置lineStyle:{//线条颜色color: '#fff'}}},grid:{  //图表在指定div中的位置,相当于html中的marginleft:'2%',right:'2%',top:'2%',bottom:'2%',containLabel: true //是否显示刻度信息},yAxis: {//y轴type: 'value'},series: [{//展示数据data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'bar'  //line为折线图,bar为柱状图}]};//初始化var mychart1 = echarts.init(document.getElementById("echarts"));//设置数据//mychart1.setOption(option);//实时数据展示,这里为了制造动态图表,直接进行模拟数据var data = [[123, 342, 533, 23, 42, 57, 112],[29, 642, 567 ,98, 45, 567, 172],[13, 342, 508 ,6, 65, 567, 192],[41, 65, 65 ,6, 45, 500, 120],[123, 234, 533 ,6, 45, 67, 162]];//定时器setInterval(getItem, 1000);  //每间隔两秒钟请求一次函数function getItem(){var random = data[parseInt(Math.random()*data.length)];option.series[0].data = random;  //获取series的第一行数据,并将模拟的数据赋值给他mychart1.setOption(option);//重新加载表}//先直接调用该函数,可以让页面刚出现时图表就可以展现出来,也可以不写getItem();//数据请求// function getData(){//     $.ajax({//         type:'get',//         url:'',//         success:function(){//              option.series[0].data;//              mychart1.setOption(option);//         }//     })// }//折线图var mychart3 = echarts.init(document.getElementById("echarts3"));mychart3.setOption({// backgroundColor:'#d48265', //背景颜色color:['#ff0000'],//系列颜色xAxis: {//x轴type: 'category',data: ['一月', '二月', '三月', '四月', '五月', '六', '七'],axisLine:{ //线条设置lineStyle:{//线条颜色color: '#fff'}}},grid:{  //图表在指定div中的位置,相当于html中的marginleft:'2%',right:'2%',top:'2%',bottom:'2%',containLabel: true //是否显示图表刻度信息},yAxis: {//y轴type: 'value'},series: [{//展示数据data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'  //line为折线图,bar为柱状图}]});//饼状图var mycharts2 = echarts.init(document.getElementById("echarts2"));mycharts2.setOption({//backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '50%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'},{value:400, name:'搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]});window.onresize = function(){ //窗口自适应mycharts.resize();mycharts2.resize();mycharts3.resize();}
}

这个js文件主要编写了三种图表:柱状图,饼状图,折线图
上面代码备注了比较多的注释,更多关于其具体配置的详解可以在Echarts官网上查看:
在这里插入图片描述
最终展现的的可视化界面也跟大家分享下吧:
在这里插入图片描述
上面的代码只将图表一进行了动态化,剩下两个图表都是静态的,其原理与图表一的原理相似。
有问题可以或者需要前端资源可以留言或私聊噢!

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

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

相关文章

手把手教你使用ECharts绘制可视化图表

1.在ECharts官网&#xff0c;下载ECharts的源码和示例文件。 2.解压缩下载下来的Echars压缩包&#xff0c;找到doc\example\www\echartsjs目录&#xff0c;将里面的js文件全部取出来&#xff0c;放到项目js目录文件夹下。 3.在页面的顶端引入模块加载器esl.js。 1 <script s…

chatgpt赋能python:Python绘制数据可视化图表的SEO指南

Python绘制数据可视化图表的SEO指南 数据可视化图表可以帮助人们更加直观地理解数据分析结果。而Python作为一种开源的编程语言&#xff0c;拥有简洁、易上手的特点&#xff0c;可以用于多种数据可视化任务。但是&#xff0c;在进行Python数据可视化的同时&#xff0c;也应该关…

LangChain学习:评估

文章目录 1. 加载数据2. 硬编码测试样例3. LLM生成测试样例4. 评估手动评估LLM评估 learn from https://learn.deeplearning.ai/langchain 1. 加载数据 import os import pandas as pd from dotenv import load_dotenv, find_dotenv _ load_dotenv(find_dotenv()) # read lo…

蔚来手机入网工信部,外观长这样?

相对于华为、小米等手机厂商纷纷进军新能源汽车&#xff0c;车企则瞄上了手机的“红海”&#xff0c;首当其冲的代表是吉利汽车。现在蔚来也加入了这个行列。 据报道&#xff0c;蔚来手机已于本月19日通过了工信部无线电核准&#xff0c;设备型号N2301&#xff0c;支持2G、联通…

OpenAI秘史公开:马斯克和奥特曼的战争,与钱无关

编译 | 蔓蔓周 毕昊天 首图来源&#xff1a;WIRED OpenAI 成立于2015年&#xff0c;由马斯克&#xff08;Elon Musk&#xff09;和里德霍夫曼&#xff08;Reid Hoffman&#xff09;等科技界的亿万富翁共同出资创办。 但在2018年初&#xff0c;马斯克断然撤销了一笔巨额资金后拂…

探讨GPT-4有望成为通用人工智能的基础,引领未来AI技术趋势

前言 从去年11月底至今&#xff0c;ChatGPT火爆全球&#xff0c;国内外关于ChatGPT的讨论热度持续不减&#xff0c;尤其是技术圈里面几乎每天都在讨论和使用ChatGPT&#xff0c;以及各大头部互联网巨头纷纷踏入ChatGPT产品的研发大潮中&#xff0c;大家都想从ChatGPT这个新风口…

构建无服务器 ChatGPT 支持的简历助手 - 基础(二)

之前我们制作了一个简洁的小命令行工具&#xff0c;可以用来帮助我们构建更好的简历。现在我们将该应用程序部署到云中&#xff01; 我将使用 AWS CDK&#xff0c;因为我喜欢它&#xff0c;而且它使此类事情变得相对简单。如果愿意&#xff0c;您当然可以将这些说明改编为 Ter…

巴比特 | 元宇宙每日必读:2026年,互联网上90%的内容或由AI创建,科技大公司如何阻止虚假信息?...

摘要&#xff1a;据澎湃新闻报道&#xff0c;主流的AI生成工具如ChatGPT、DALL-E、Midjourney降低了创建虚假图像、视频和文本的难度和成本&#xff0c;使网络上的AI生成内容泛滥且难以分辨。欧盟执法机构“欧洲刑警组织&#xff08;Europol&#xff09;”的一份报告预测&#…

MasterGo入选36氪「下一个百亿规模AIGC产品」,持续探索AI+界面设计的新未来

新技术带动了 AI、云计算、芯片等大模型相关的产业链各个环节的发展跃迁。热潮奔涌&#xff0c;谁能成为 AGI 时代现象级产品&#xff1f;谁将站在热潮的巅峰定义和捕捉新的机会&#xff1f; 经过大量的调研实践&#xff0c;36氪于日前公布《中国ChatGPT梦之队&下一个百亿…

Notepad++统计文本字数

Notepad简介 Notepad 是免费的、开源编辑器和支持多种语言。它运行在MS Windows环境中&#xff0c;其使用受GPL许可证约束。 基于强大的编辑组件Scintilla&#xff0c;Notepad 是用C 编写的&#xff0c;并使用纯Win32 API和STL来确保更高的执行速度和更小的程序尺寸。通过优化…

如何快速统计网站所有页面的文本字数

文章目录 前言一、WinHTTrack Website Copier是什么&#xff1f;二、WinHTTrack Website Copier使用步骤三、什么是Python?四、Python实现的功能 前言 实现快速统计网站所有页面的文本字数&#xff0c;需要具备两个条件&#xff1a; 1.获取该网站的所有页面的html文件 2.提取…

小红书代运营 ,小红书运营必备的15个模型1.0版,建议收藏

文/企飞薯 本文一共4983字 大家好&#xff0c;我是小红书代运营圈的主理人的企飞薯。我们一直在研究小红书生态营销。 近年来小红书随着用户体量壮大和平台多元化发展&#xff0c;用户的兴趣点&#xff0c;早已从美妆独大变为渗透生活领域的各个方面。 据小红书最新数据显示&a…

移动软件开发五——仿微信发现界面

2022年夏季《移动软件开发》实验报告 一、实验目标 模仿微信“发现”页创建列表布局&#xff0c;学习使用Textview imageview、LinearLayout 二、实验步骤 1. 搭建开发环境 在此之前我的电脑已经安装并使用过android studio和java sdk 详情参见我大一写的博客 安卓小白实…

用AS实现微信界面设计

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 设计目标一、结果展示二、top.xml三、bottom.xml四、4个fragment.xml五、activity_main.xml六、java文件总结仓库 设计目标 提示&#xff1a;这里可以添加本文要记…

仿QQ聊天软件(登录界面、好友界面、聊天界面)-Java(Swing、Socket)

文章目录 一、项目结构二、项目功能三、制作界面&#xff08;一&#xff09;、登录界面的制作&#xff08;二&#xff09;、好友列表界面&#xff08;三&#xff09;、聊天界面 四、制作服务器五、设计通信协议六、项目缺点 学习了socket通信后&#xff0c;就想来制作一个类似Q…

Android仿微信气泡聊天界面设计

微信的气泡聊天是仿iPhone自带短信而设计出来的&#xff0c;不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo&#xff0c;给大家分享一下&#xff01;效果图如下&#xff1a; 气泡聊天最终要的是素材&#xff0c;要用到9.png文件的素材&#xff0c;这样气泡会随着聊天…

计算机系统大作业

摘 要 尽管hello程序非常简单&#xff0c;但是为了让它实现运行&#xff0c;系统的每个主要组成部分都需要协调工作&#xff0c;本篇论文就是解释说明在系统上执行hello程序时&#xff0c;系统发生了什么以及为什么会这样。 我们通过跟踪hello程序的生命周期开始系统讲解——…

程序人生-Hello’s P2P

计算机系统 大作业 题 目 程序人生-Hello’s P2P 专 业 未来技术 学   号 2021112807 班 级 21WL021 学 生 马铭杨 指 导 教 师 史先俊 …

Google reCAPTCHA ----------验证码

现有验证码的产品形态调研范围如下&#xff0c;基本涵盖了比较主流的验证码平台&#xff1a; Google reCAPTCHA极验阿里云腾讯云点触网易易盾螺丝帽FunCaptcha 产品背景 ‍‍reCAPTCHA起初是由CMU&#xff08;卡耐基梅隆大学&#xff09;设计&#xff0c;将OCR&#xff08;光…

关于captcha验证码演示

转载&#xff1a;https://blog.csdn.net/dayonglove2018/article/details/106612549 import com.wf.captcha.SpecCaptcha; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springfr…