Echarts可视化

echarts是一个基于javascripts的开源可视化图表库

画图步骤:

1.引入echarts.js文件

<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

也可将文件下载到本地通过src引入。

2. 准备一个呈现图表的盒子:

<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>

3.基于准备好的dom,初始化echarts实例

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

4. 准备配置项:

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'}]};

5. 将配置项设置给echarts实例对象:

myChart.setOption(option);

这样我们就可以获得一个echarts图了

柱形图:

代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head><body><div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('dd'));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'}]};myChart.setOption(option);</script>
</body></html>

相关配置项:title  //标题组件

xAxis   //x轴

yAxis  //y轴

series  //系列列表,通过type绝定图表类型

相关配置可查看echats官网:https://echarts.apache.org/zh/option.html#title

折线图:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script><style>.box{width: 900px;height: 600px;background-color:aqua;}
</style>
</head>
<body><div class="box"></div><script>var myChart = echarts.init(document.querySelector(".box"));var options = {title:{text:'条形图',subtext:'',textstyle:{color:'red',fontSize:12},textAlign:'center',left:'50%'},xAxis:{type:'category',data:['浏览量','点赞数','转发数','收藏数','评论量'],name:'x轴'},yAxis:{type:'value',name:'y轴'},series:[{type:'line',data:[5000,800,200,300,150],},{type: 'line',data:[12000,2500,200,800,400],},]}myChart.setOption(options);</script>
</body>
</html>

散点图:

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head>
<body><div id="scatter" style="width: 600px; height: 400px;"></div><script>var scatter_chart = echarts.init(document.getElementById("scatter"));var scatter_option = {title:{text:"Echart"},xAxis:{},yAxis:{},series:[{symbolSize:20,data:[[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6, 7.24],[4.2, 4.62],[12.0, 10.84],[7.0, 4.82],[5.0, 5.58],],type:'scatter'}]};scatter_chart.setOption(scatter_option);</script>
</body>
</html>

饼图:

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body><div id="app" style="width: 600px;height: 400px;"></div><script>// 3.将type设置为pievar myCharts = echarts.init(document.querySelector('#app'))// 需要设置给饼图的数据var sl = [{name: '2018',value: '30'},{name: '2019',value: '10'},{name: '2020',value: '10'},{name: '2021',value: '10'},{name: '2022',value: '20'},{name: '2023',value: '10'}]var option = {legen:{show:true,align:'left',left:0,},// 注意:饼图不是直角坐标系图表,就不用配置x轴和y轴了series: [{type: 'pie',data: sl,radius:["20%","60%"],   // roseType:"area"}]}myCharts.setOption(option)</script>
</body>
</html>

 roseType:"area" 可以将饼图设置为玫瑰图。

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

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

相关文章

828华为云征文|华为云Flexus X实例docker部署harbor镜像仓库

828华为云征文&#xff5c;华为云Flexus X实例docker部署harbor镜像仓库 华为云最近正在举办828 B2B企业节&#xff0c;Flexus X实例的促销力度非常大&#xff0c;特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求&#xff0c;一定不要错…

Django+Vue二手交易平台的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质创作者&…

Having trouble using OpenAI API

题意&#xff1a;"使用OpenAI API遇到困难" 问题背景&#xff1a; I am having trouble with this code. I want to implement AI using OpenAI API in my React.js project but I cannot seem to get what the issue is. I ask it a question in the search bar in…

string详解

Golang详解string 文章目录 Golang详解stringGolang中为什么string是只读的&#xff1f;stirng和[]byte的转化原理[]byte转string一定需要内存拷贝吗&#xff1f;字符串拼接性能测试 Golang中为什么string是只读的&#xff1f; 在Go语言中&#xff0c;string其实就是一个结构体…

实验报告: lookie-lookie 项目测试与分析

目录 一、实验目的 二、实验环境 三、实验步骤 1. 下载与准备项目 1.1 从 GitHub 获取项目 1.2 查看项目文件结构 2. 运行项目 2.1 启动项目 2.2 浏览器设置 3. 项目体验 3.1 功能测试 3.2 运行截图 4. 文件结构分析 4.1 总体结构 4.2 主要文件和目录说明 5. 数…

09-03 周二 ansible部署和节点管理过程

09-03 周二 ansible部署和节点管理过程 时间版本修改人描述2024年9月3日10:08:58V0.1宋全恒新建文档&#xff0c; 简介 首先要找一个跳板机&#xff0c;来确保所有的机器都可以访问。然后我们围绕ansible来搭建环境&#xff0c;方便一键执行所有的命令&#xff0c;主要的任务是…

SQL语言的规则和规范

规则 是什么呢&#xff0c;规则就是我们最基本&#xff0c;每时每刻都要遵守的比如人行道靠右&#xff0c;不能逆行&#xff0c; 规范 呢就是锦上添花&#xff0c;如果你不这么做&#xff0c;是不那么道德&#xff0c;不那么好的&#xff0c;就像小学生见到老师要问好&#…

机器学习:opencv图像识别--图片运算、边界、阈值处理、平滑处理

目录 一、图片运算 1.加法 1. 2.add 3.加权相加 2.减法 二、图片边界 三、图像阈值处理 四、图像平滑处理 1.生成椒盐噪声 2.滤波器 1.均值滤波 2.方框滤波 3.高斯滤波 4.中值滤波 一、图片运算 1.加法 1. 直接将图片上每个像素点的值加上给定值或者两张图片…

wpf image source绑定相对路径方法

当使用image source绑定相对路径图片资源时&#xff0c;出现问题&#xff1a;未能找到路径C:\windows/System32…路径的一部分 解决方法&#xff1a; 将文件放到指定文件夹中包含在当前项目中 具体绑定语句为&#xff1a; <Image Stretch"Fill" x:Name"imgT…

(计算机论文)基于SpringBoot和Vue的台球赛事服务网站的设计与实现

毕业设计&#xff08;论文&#xff09; 博主可接毕设论文&#xff01;&#xff01;&#xff01; 基于SpringBoot和Vue的台球赛事服务网站的设计与实现 摘 要 在快速发展的信息时代&#xff0c;体育竞赛作为群众文化娱乐的一部分&#xff0c;已日益受到广泛关注。台球&#xff…

python 怎样计算字符串的长度

python 计算字符串长度&#xff0c;一个中文算两个字符&#xff0c;先转换成utf8&#xff0c;然后通过计算utf8的长度和len函数取得的长度&#xff0c;进行对比即可知道字符串内中文字符的数量&#xff0c;自然就可以计算出字符串的长度了。 valueu脚本12 length len(value) u…

排查SQL Server中的内存不足及其他疑难问题

文章目录 引言I DMV 资源信号灯资源信号灯 DMV sys.dm_exec_query_resource_semaphores( 确定查询执行内存的等待)查询性能计数器什么是内存授予?II DBCC MEMORYSTATUS 查询内存对象III DBCC 命令释放多个 SQL Server 内存缓存 - 临时度量值IV 等待资源池 %ls (%ld)中的内存…

统计学习与方法实战——K近邻算法

K近邻算法 K近邻算法备注k近邻模型算法距离度量 k k k值选择分类决策规则构造KDTree k k k近邻查找范围查询 代码结构总结 K近邻算法 备注 kNN是一种基本分类与回归方法. 多数表决规则等价于0-1损失函数下的经验风险最小化&#xff0c;支持多分类&#xff0c; 有别于前面的感…

QT做一个USB HID设备识别软件

1.下载 HidApi库&#xff1a;GitHub - yigityuce/HidApi: Human Interface Device Api (HidApi) with C 2.pro文件添加 DEFINES - UNICODE LIBS -lsetupapi 3.h文件 #ifndef My_Usb_Hid_Device_H #define My_Usb_Hid_Device_H#include <QWidget> #include <QStr…

数据结构(6.4_6)——拓扑排序

AOV网 AOV网&#xff1a;用顶点表示活动的网。 用DAG图(有向无环图)表示一个工程&#xff0c;顶点表示活动&#xff0c;有向边<Vi,Vj>表示活动Vi必须先于vj进行 拓扑排序&#xff08;找到做事的先后顺序&#xff09; 对有回路的图进行拓扑排序 拓扑排序的实现代码 回…

Redis过期键监听

在 Redis 中&#xff0c;为了监听过期键事件&#xff0c;需要使用 Redis 的 Keyspace Notifications 功能。这一功能允许客户端订阅某些事件的发生&#xff0c;比如键过期、键删除等。 启用过期键监听 在 Redis 的配置文件 redis.conf 中&#xff0c;确保配置项 notify-keysp…

Python画笔案例-031 绘制器形图

1、绘制蝌蚪 通过 python 的turtle 库绘制器形图&#xff0c;如下图&#xff1a; 2、实现代码 绘制器形图&#xff0c;以下为实现代码&#xff1a; """器形图.py采用前进&#xff0c;倒退&#xff0c;左转&#xff0c;右转命令制作的一个图形。 ""&q…

场外个股期权机构有哪些?

今天带你了解场外个股期权机构有哪些&#xff1f;场外个股期权交易商名单包括了多家券商&#xff0c;这些券商在场外期权市场中扮演着重要的角色。 场外个股期权通常涉及的主要机构包括&#xff1a; 1.投资银行&#xff1a;这些机构常常作为交易的中介或对手方&#xff0c;为…

绝区零苹果电脑能玩吗,如何在Mac上玩绝区零?绝区零MacBook 下载安装保姆级教程

《绝区零》是一款由米哈游开发的都市动作冒险游戏&#xff0c;游戏的故事背景设定在一个名为「新艾利都」的现代化大都市中&#xff0c;玩家将扮演一对「绳匠」兄妹展开冒险。很多玩家都在问苹果电脑笔记本Mac怎么玩绝区零&#xff0c;今天就给大家介绍一下《绝区零》是一款什么…

【UE5】控件蓝图——树视图(TreeView)的基本使用

目录 前言 效果 步骤 一、显示根节点 二、显示子节点 前言 我们在视口中添加1个方块&#xff0c;2个球体&#xff0c;5个圆柱 它们在大纲视图中的层级关系如下&#xff0c;那么如何将这种层级关系显示在树视图中是本篇文章要解决的问题。 效果 步骤 一、显示根节点 1…