EChars

news/2024/2/25 14:04:21/文章来源:https://blog.csdn.net/ccz80/article/details/135636076

1.引入 Apache ECharts

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head>
</html>

 2. <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">

3.创建表格并初始化

 var myChart = echarts.init(document.getElementById('main'));

 4.指定图表的配置项和数据

// 设置图表标题
title: {text: 'Stacked Line'
},// 配置提示框,触发方式为轴
tooltip: {trigger: 'axis'
},// 配置图例,即显示在图表上方的标签
legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},// 配置图表的布局,包括左、右、底部的边距,以及是否包含标签
grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true
},// 配置工具箱,包括一个保存为图片的功能
toolbox: {feature: {saveAsImage: {}}
},// 配置 X 轴,类型为类别型,不留白,数据为星期的数组
xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},// 配置 Y 轴,类型为数值型
yAxis: {type: 'value'
},// 配置系列,每个系列是一条线,包括名称、类型、堆叠方式以及具体的数据
series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}
]

6.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

参照官方文档!Examples - Apache ECharts

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

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

相关文章

[自动驾驶算法][从0开始轨迹预测]:二、自动驾驶系统中常用的坐标系及相应的转换关系

自动驾驶中常见的坐标系与坐标转换 1. 传感器坐标系1.1 相机坐标系统1) 相机相关基础知识2) 相机各坐标系图像/像素坐标系相机坐标系像平面坐标系 3) 相机各坐标系之间的转换像平面坐标系到像素坐标系的转换&#xff08;平移缩放变换&#xff09;相机坐标系转像平面坐标系&…

tcpdump常用参数以及wireshark密文解密

tcpdump常用参数以及wireshark密文解密 文章目录 一、tcpdump命令和常用参数二、在wireshark中协议解析 tcpdump常用参数 一、tcpdump命令和常用参数 tcpdump常用命令&#xff1a;tcpdump -i eth0 src host 11.6.224.1 and udp port 161 -s 0 -w 161.pcap &#xff08;161为sn…

自学Python,需要注意哪些?

为什么要学习Python&#xff1f; 在学习Python之前&#xff0c;你不要担心自己没基础或“脑子笨”&#xff0c;我始终认为&#xff0c;只要你想学并为之努力&#xff0c;就能学好&#xff0c;就能用Python去做很多事情。在这个喧嚣的时代&#xff0c;很多技术或概念会不断兴起…

解决BigDecimal序列化科学计数法前端展示问题(大坑)

解决BigDecimal序列化科学计数法前端展示问题(大坑) 前言&#xff1a;在生产中出现一个问题&#xff0c;就是BigDecimal类型的字段在前端页面展示变成科学计数法&#xff0c;通过排查&#xff0c;发现里面的坑还是挺多的&#xff0c;所以特意记录下处理过程。Json序列化&#x…

ubuntu设置每天定时关机

ubuntu设置每天定时关机 终端输入命令&#xff1a; sudo crontab -e输入密码&#xff0c;回车。 我这里使用nano作为编辑器&#xff0c;你可以选择vim。 在末尾输入以下命令&#xff1a; 59 23 * * * sudo -u root shutdown now设置&#xff1a;每天23:59分&#xff0c;电脑…

深度强化学习的变道策略:Harmonious Lane Changing via Deep Reinforcement Learning

偏理论&#xff0c;假设情况不易发生 摘要 多智能体强化学习的换道策略&#xff0c;不同的智能体在每一轮学习后交换策略&#xff0c;达到零和博弈。 和谐驾驶仅依赖于单个车辆有限的感知结果来平衡整体和个体效率&#xff0c;奖励机制结合个人效率和整体效率的和谐。 Ⅰ. 简…

Visual Studio 2022 成功配置QT5.12.10

目录 下载并安装Visual Studio 2022 Qt5.12.10下载 Qt5.12.10安装 Qt VS Tools for Visual Studio 2022下载 Visual Studio 2022配置 测试 下载并安装Visual Studio 2022 下载社区版并安装&#xff0c;这个比较快。 Qt5.12.10下载 官网下载很慢&#xff0c;还不如百度网…

论文笔记(四十)Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds

Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds 文章概括摘要1. 介绍2. 相关工作3. 学习 6D 抓握政策3.1 背景3.2 从点云抓取 6D 策略3.3 联合运动和抓握规划器的演示3.4 行为克隆和 DAGGER3.5 目标--辅助 DDPG3.6 对未知物体进行微调的后视目标 4. 实…

数据分析-Pandas如何整合多张数据表

数据分析-Pandas如何整合多张数据表 数据表&#xff0c;时间序列数据在数据分析建模中很常见&#xff0c;例如天气预报&#xff0c;空气状态监测&#xff0c;股票交易等金融场景。数据分析过程中重新调整&#xff0c;重塑数据表是很重要的技巧&#xff0c;此处选择Titanic数据…

Linux命令之服务器的网络配置hostname,sysctl,ifconfig,service,ifdown,ifup,route,ping的使用

1、查看当前主机名称&#xff0c;编辑配置文件修改主机名为你姓名拼音的首字母&#xff08;如张三&#xff0c;则为zs&#xff09; 2、查看本机网卡IP地址&#xff0c;编辑/etc/sysconfig/network-scripts/ifcfg-ens33&#xff0c;要求在一块物理网卡上绑定2个IP地址&#xff0…

【PHP】PHP利用ffmreg获取音频、视频的详细信息

目录 一、目的 二、下载并安装ffmreg 三、PHP代码 四、运行结果 一、目的 使用PHP利用ffmreg获取音频、视频的详细信息&#xff0c;音视频总时长、码率、视频分辨率、音频编码、音频采样频率、实际播放时间、文件大小。 二、下载并安装ffmreg 1、下载地址&#xff1a;htt…

探索web技术与低代码开发的融合应用

随着物联网、云计算和人工智能等技术的迅猛发展&#xff0c;现代软件开发正面临着日益增长的需求和复杂性。为了应对这一挑战&#xff0c;一种被称为低代码开发的快速、可视化开发方法逐渐崭露头角。本文将探讨低代码开发与web技术的融合应用&#xff0c;以及这种趋势对软件开发…

SDRAM小项目——命令解析模块

简单介绍&#xff1a; 在FPGA中实现命令解析模块&#xff0c;命令解析模块的用来把pc端传入FPGA中的数据分解为所需要的数据和触发命令&#xff0c;虽然代码不多&#xff0c;但是却十分重要。 SDRAM的整体结构如下&#xff0c;可以看出&#xff0c;命令解析模块cmd_decode负责…

银行储蓄系统的顶层数据流图及细化数据流图

绘制出银行储蓄系统的顶层数据流图及细化数据流图&#xff1b; 银行储蓄系统存、取款流程如下&#xff1a; 1&#xff09;业务员事先录入利率信息&#xff1b; 2&#xff09;如果是存款&#xff0c;储户填写存款单&#xff0c;业务员将存款单键入系统&#xff0c;系统更新储户存…

深度学习预备知识-数据存储、数据预处理

1.数据操作 存储 为了能够完成各种数据操作&#xff0c;我们需要某种方法来存储和操作数据。 通常&#xff0c;我们需要做两件重要的事&#xff1a; &#xff08;1&#xff09;获取数据&#xff1b; &#xff08;2&#xff09;将数据读入计算机后对其进行处理。 如果没有某…

JVM实战(19)——JVM调优工具概述

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

ChatGPT 和文心一言哪个更好用?

ChatGPT 和文心一言哪个更好用&#xff1f; 直接让文心一言来回答&#xff1a; ChatGPT和文心一言都是人工智能语言模型&#xff0c;各有其优势和特点。以下是它们在智能回复、语言准确性、知识库丰富度等方面的比较&#xff1a; 智能回复&#xff1a;ChatGPT和文心一言在智能…

react、Vue打包直接运行index.html不空白方法

react vue 在根目录下创建 vue.config.js 文件&#xff0c;写入 module.exports {publicPath: ./, }

大模型学习之书生·浦语大模型5——基于LMDeploy大模型量化部署实践

目录 大模型部署背景 LMDeploy部署 量化 TurboMind API server 动手实践环节

项目解决方案:“ZL铁路轨行车辆”实时视频监控系统

目 录 一、建设背景 1.1 政策背景 1.2 现状 二、建设目标 三、建设依据 四、建设原则 4.1经济高效性 4.2系统开放性 4.3系统继承性 4.4系统扩展性 4.5系统经济性 4.6系统安全性 五、系统架构 5.1系统架构图 5.2技术架构 1、DVS 2、中心管理服务…