04 ECharts基础入门

文章目录

  • 一、ECharts介绍
    • 1. 简介
    • 2. 相关网站
    • 3. HTML引入方式
    • 4. 基本概念
  • 二、常见图表
    • 1. 柱状图
    • 2. 折线图
    • 3. 饼图
    • 4. 雷达图
    • 5. 地图
  • 三、应用
    • 1. 动画
    • 2. 交互


一、ECharts介绍

1. 简介

ECharts是一个使用JavaScript实现的开源可视化库,用于生成各种图表和图形。
ECharts提供了折线图、柱状图、散点图、饼图、地图、时间序列等,以及各种交互功能和数据可视化效果。

ECharts的主要特点包括:

  1. 高度定制化:用户可以根据自己的需求自定义图表的各种属性和样式,包括颜色、字体、交互等。
  2. 跨平台:ECharts可以在各种浏览器和设备上运行,包括桌面浏览器、移动设备和嵌入式浏览器。
  3. 丰富的图表类型和组件:ECharts提供了大量的图表类型和组件,可以满足各种数据可视化的需求。
  4. 高度兼容性:ECharts支持多种数据格式和数据源,可以与各种数据库和数据服务进行集成。
  5. 易于使用:ECharts提供了简单易用的API和文档,用户可以快速上手并创建各种图表。

2. 相关网站

ECharts 官网
ECharts CDN

3. HTML引入方式

  • 本地引入
<script src="echarts-5.4.3.min.js"></script>
  • CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js "></script>

4. 基本概念

echart = echarts.init(document.getElementById("container"));	// 初始化类
option = {														// 配置类title: {													// 标题text: 'Website',left: 'center'},tooltip: {													// 提示框trigger: 'item'},legend: {													// 配置图例的显示和位置orient: 'vertical',left: 'left'},xAxis: {													// 配置X轴(直角坐标才会有)type: 'category',data: []},yAxis: {													// 配置Y轴(直角坐标才会有)type: 'value'},series: [													// 配置图表的数据和绘制方式{type: '',												// 图表类别,如折线图(line)data: [													// 图表数据,可以是数组或对象数组]}]
};
echart.setOption(option);										// 渲染图形

二、常见图表

1. 柱状图

柱状图官方示例

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>echart = echarts.init(document.getElementById("container"));option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

2. 折线图

折线图官方示例

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>echart = echarts.init(document.getElementById("container"));option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [50, 130, 160, 170, 120, 110, 170],type: 'line'}]};echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

3. 饼图

饼图官方示例

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>echart = echarts.init(document.getElementById("container"));option = {title: {text: 'Website',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

4. 雷达图

雷达图官方示例

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>echart = echarts.init(document.getElementById("container"));option = {title: {text: 'Radar Chart'},legend: {data: ['Allocated Budget', 'Actual Spending']},radar: {indicator: [{ name: 'Sales', max: 6500 },{ name: 'Administration', max: 16000 },{ name: 'Technology', max: 30000 },{ name: 'Customer', max: 38000 },{ name: 'Development', max: 52000 },{ name: 'Marketing', max: 25000 }]},series: [{name: 'Budget vs spending',type: 'radar',data: [{value: [4200, 3000, 20000, 35000, 50000, 18000],name: 'Allocated Budget'},{value: [5000, 14000, 28000, 26000, 42000, 21000],name: 'Actual Spending'}]}]};echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

5. 地图

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta charset="UTF-8"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body><div id="container" style="width: 800px; height: 600px;"></div><script>data_list = [{name:'黑龙江',value:-2},		{name:'吉林',value:0},			{name:'辽宁',value:5},{name:'北京',value:10},			{name:'天津',value:11},			{name:'山东',value:10},{name:'河北',value:9},			{name:'河南',value:7},			{name:'湖北',value:12},{name:'湖南',value:11},			{name:'江苏',value:12},			{name:'安徽',value:12},{name:'上海',value:12},			{name:'浙江',value:11},			{name:'福建',value:13},{name:'广东',value:17},			{name:'四川',value:11},			{name:'重庆',value:11},{name:'江西',value:10},			{name:'陕西',value:10},			{name:'贵州',value:10},{name:'广西',value:10},			{name:'山西',value:10},			{name:'云南',value:17},{name:'甘肃',value:0},			{name:'内蒙古',value:0},			{name:'海南',value:21},{name:'新疆',value:0},			{name:'宁夏',value:0},			{name:'青海',value:-1},{name:'西藏',value:0},			{name:'香港',value:17},			{name:'澳门',value:17},{name:'台湾',value:12},]data_value_list = [-2,0,5,10,11,10,9,7,12,11,12,12,12,11,13,17,11,11,10,10,10,10,10,17,0,0,21,0,0,-1,0,17,17,12]option = {title: {text: '全国省市温度',x: 'center'},tooltip: {trigger: 'item',formatter: '省市:{b}<br/>温度:{c}'},dataRange: {min: 0,max: Math.max.apply(null, data_value_list),x: 'left',y: 'bottom',text: ['高', '低'],calculable: true,color: ['orangered', 'yellow', 'lightskyblue']},series: [{name: '数据',type: 'map',mapType: 'china',roam: false,itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: data_list}]};echart = echarts.init(document.getElementById('container'));echart.setOption(option);</script>
</body>
</html>
  • HTML页面效果
    在这里插入图片描述

三、应用

1. 动画

  • 动画延迟开始
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div></body>
<script>echart = echarts.init(document.getElementById("container"));var xAxisData = [];var data1 = [];var data2 = [];for (var i = 0; i < 100; i++) {xAxisData.push('A' + i);data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);}option = {legend: {data: ['bar1', 'bar2']},xAxis: {data: xAxisData,splitLine: {show: false}},yAxis: {},series: [{name: 'bar1',type: 'bar',data: data1,emphasis: {focus: 'series'},animationDelay: function(idx) {return idx * 10;}},{name: 'bar2',type: 'bar',data: data2,emphasis: {focus: 'series'},animationDelay: function(idx) {return idx * 10 + 100;}}],animationEasing: 'elasticOut',animationDelayUpdate: function(idx) {return idx * 5;}};echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

2. 交互

  • 用鼠标可以拖拽曲线的点,从而改变曲线的形状
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body><div id="container" style="width: 600px; height: 500px;"></div></body>
</body>
<script>var symbolSize = 20;var data = [[15, 0],[-50, 10],[-56.5, 20],[-46.5, 30],[-22.1, 40]];var myChart = echarts.init(document.getElementById('container'));myChart.setOption({tooltip: {triggerOn: 'none',formatter: function(params) {return ('X: ' +params.data[0].toFixed(2) +'<br />Y: ' +params.data[1].toFixed(2));}},xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },series: [{ id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }]});myChart.setOption({graphic: echarts.util.map(data, function(item, dataIndex) {return {type: 'circle',position: myChart.convertToPixel('grid', item),shape: { r: symbolSize / 2 },invisible: true,draggable: true,ondrag: echarts.util.curry(onPointDragging, dataIndex),onmousemove: echarts.util.curry(showTooltip, dataIndex),onmouseout: echarts.util.curry(hideTooltip, dataIndex),z: 100};})});window.addEventListener('resize', function() {myChart.setOption({graphic: echarts.util.map(data, function(item, dataIndex) {return { position: myChart.convertToPixel('grid', item) };})});});function showTooltip(dataIndex) {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});}function hideTooltip(dataIndex) {myChart.dispatchAction({ type: 'hideTip' });}function onPointDragging(dataIndex, dx, dy) {data[dataIndex] = myChart.convertFromPixel('grid', this.position);myChart.setOption({series: [{id: 'a',data: data}]});}
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

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

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

相关文章

Mysql多表查询 思路 ——示例——sql顺序

参考练习题&#xff1a;https://blog.csdn.net/weixin_49627122/article/details/126380916 SQL顺序 在 SQL 查询中&#xff0c;SELECT 语句的执行顺序不是按照查询语句的书写顺序执行的&#xff0c;而是按照逻辑执行阶段来进行。一般来说&#xff0c;SQL 查询的执行顺序可以…

北斗网格二维编码

东经为 E —— east:东方 西经为 W —— west:西方 南纬为 S —— south:南方 北纬为 N —— north 将计算好的编码添加到列表中 my_list [1, 2, 3] my_list.append(4) 参考文献 一级北斗网格计算 高等地图学作业_已知经纬度求图幅编号_.Vector的博客-CSDN博客 其他级别…

spring面试题—— 事务

一&#xff1a;Spring事物是什么&#xff1f; spring事务的本质是底层数据库对事务的支持&#xff0c;spring并不直接管理事物&#xff0c;而是提供了多种事务管理器&#xff0c;具体的实现由持久化框架自己来做。 二&#xff1a;Spring为什么需要事物&#xff1f; add方法&…

如何使用jszip文件格式转换与批量打包成zip下载

文章目录 概要技术细节文件下载小结 概要 在前端开发中&#xff0c;我们经常需要处理文件的格式转换和下载。本文将介绍如何通过 JavaScript 实现将文件 URL 转换为 Blob 类型格式或者 arraybuffer 格式&#xff0c;并通过 JSZip 库实现文件的压缩和下载。 技术细节 先安装所…

数据清洗、特征工程和数据可视化、数据挖掘与建模的主要内容

1.4 数据清洗、特征工程和数据可视化、数据挖掘与建模的内容 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.4节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学…

vue3.2版本setup语法糖

setup语法糖&#xff1a; 一、Vue3.0 <script>里定义的变量、属性和方法必须 return 出来&#xff0c;<template>中才能使用&#xff1b;这样会导致在页面上变量会出现很多次。vue3.2只需在script标签中添加setup&#xff0c;就可以帮助我们解决这个问题,无需再写…

JVM 对象内存布局篇

对象的实例化 创建对象有哪些方式&#xff1f; 1、new对象 最常见的方式 变形1:X的静态方法 变形2:XxxBuilder/XxxFactory的静态方法 2、Class的newlnstance0:反射的方式&#xff0c;只能调用空参的构造器&#xff0c;权限必须是public 3、Constructor的newinstance(X):反射的…

软件多开助手的创新使用:在同一设备上玩转多个游戏

软件多开助手&#xff1a;在同一设备上玩转多个游戏的创新使用 随着科技的不断发展&#xff0c;手机和电脑已经成为我们生活中必不可少的工具。众多游戏爱好者也越来越追求在同一设备上同时体验多个游戏的乐趣。而软件多开助手的出现为这一需求提供了创新的解决方案。 传统上…

可视化监管云平台EasyCVR宠物粮食食品厂智能视频监控方案

由于我国养宠物群体的不断膨胀&#xff0c;宠物市场也占据了经济的很大一部分&#xff0c;宠物做为人类的好朋友&#xff0c;可以给人们带来极高的精神抚慰&#xff0c;作为“毛孩子”家长&#xff0c;爱宠人士自然不会亏待自家宠物&#xff0c;都会选择最好的口粮以供宠物食用…

【开源】基于Vue+SpringBoot的教学过程管理系统

项目编号&#xff1a; S 054 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S054&#xff0c;文末获取源码。} 项目编号&#xff1a;S054&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2…

CompletableFuture:Java中的异步编程利器

前言&#xff1a; 在秋招的面试中&#xff0c;面试官问了很多关于异步编程相关的知识点&#xff0c;朋友最近也和我聊到了这个话题&#xff0c;因此今天咱们来讨论讨论这个知识点&#xff01; 随着现代软件系统的日益复杂&#xff0c;对于非阻塞性和响应性的需求也在不断增加…

Vue学习计划-Vue2--Vue核心(六)过滤器和自定义指令

1. 过滤器 定义&#xff1a;对要显示的数据进行特定格式转换再显示&#xff08;适用于一些简单逻辑的处理&#xff09;语法&#xff1a; 注册过滤器&#xff1a;Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器&#xff1a;{{ xx | 过滤器名 }} 或 v-bind:属性 …

3 文本分类入门finetune:bert-base-chinese

项目实战&#xff1a; 数据准备工作 bert-base-chinese 是一种预训练的语言模型&#xff0c;基于 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;架构&#xff0c;专门用于中文自然语言处理任务。BERT 是由 Google 在 2018 年提出的一…

gpt1与bert区别

区别1&#xff1a;网络结构&#xff08;主要是Masked Multi-Head-Attention和Multi-Head-Attention&#xff09; gpt1使用transformer的decoder&#xff0c;单向编码&#xff0c;是一种基于语言模型的生成式模型&#xff0c;更适合生成下一个单词或句子 bert使用transformer的…

Domino多Web站点托管

大家好&#xff0c;才是真的好。 看到一篇文档&#xff0c;大概讲述的是他在家里架了一台Domino服务器&#xff0c;上面跑了好几个Internet的Web网站&#xff08;使用Internet站点&#xff09;。再租了一台云服务器&#xff0c;上面安装Nginx做了反向代理&#xff0c;代理访问…

轨迹分析:Palantir评估细胞分化潜能 类似于monocle2

轨迹分析是单细胞测序分析中重要的组成部分&#xff0c;它基于细胞谱系之间“具有中间态细胞”的理论基础&#xff0c;通过结合先验知识&#xff08;细胞注释、markers&#xff09;、细胞基因表达改变等&#xff0c;为在单细胞测序数据赋予了“假时间”&#xff08;pseudotime&…

图的深度优先搜索(数据结构实训)

题目&#xff1a; 图的深度优先搜索 描述&#xff1a; 图的深度优先搜索类似于树的先根遍历&#xff0c;是树的先根遍历的推广。即从某个结点开始&#xff0c;先访问该结点&#xff0c;然后深度访问该结点的第一棵子树&#xff0c;依次为第二顶子树。如此进行下去&#xff0c;直…

每天五分钟计算机视觉:通过残差块搭建卷积残差神经网络Resnet

本文重点 随着深度神经网络的层数的增加,神经网络会变得越来越难以训练,之所以这样就是因为存在梯度消失和梯度爆炸问题。本节课程我们将学习跳跃连接方式,它可以从某一网络层获取激活a,然后迅速反馈给另外一层,甚至是神经网络的更深层,从而解决梯度消失的问题。 传统的…

关于命令行方式的MySQL服务无法启动问题原因之一解决

这里无法启动服务的原因为系统某些进行占用了3306端口问题 当你遇到无法启动的问题时&#xff0c;可以尝试通过netstat -ano命令查看系统进行信息&#xff0c;验证是否3306端口被占用 在本地地址列如果发现3306端口被占用&#xff0c;则通过 taskkill /f /pid 进程id命令关闭进…

matlab 点云放缩变换

目录 一、算法原理二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。爬虫网站自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 缩放可以独立应用于三个坐标轴,如将点 ( x , y , z ) ( x