EChart简单入门
echart的安装就细不讲了,直接去官网下,实在不会的直接用cdn,省的一番口舌。
cdn.staticfile.net/echarts/4.3.0/echarts.min.js
正入话题哈
什么是EChart?
EChart 是一个使用 JavaScript 实现的开源可视化库,Echart支持多种常见的图表类型,如折线图、柱状图、饼图、散点图等,同时还支持地图的绘制和交互。Echart非常灵活和强大,并且拥有活跃的社区支持,在数据可视化领域广泛应用于各种类型的网站和应用程序中。
一.echart的语法构造搭建
第一步
在写echart之前先引入库(像vue,jq,都类似这样,应该不陌生,有点啰嗦了)
<script src="cdn或本地位置"></script>
第二步
身体body部分的搭建
1.先创个盒子吧,你想要图表有多大,就创多大,图表就是放置在这个盒子中
<div id="main" style="width: 600px;height:400px;"></div>
2.创完盒子之后呢,开始数据部分吧,怎么将数据应用到图表可视化显示出来呢?
先随便创个值例如:myChart,用myChart来上承接入echart,下接入数据,echart.init表示这是个echart表,后面(document.getElementById('main'))是填写数据位置
var myChart = echarts.init(document.getElementById('main'));
当然这只是创建echart实例的其中一种方法。
创完值 myChart 之后呢,怎么办?
就是具体的数据结构了,让我们来看看。
3.随便创个名字来承接你要的数据,数据打在这个名字里面,哦对,就打在这个里面,例如取个名字叫option来承接数据:
var option = {title: {text: '因蓝桥杯摆烂的第无数天'},tooltip: {},legend: {data:['销量tmd']},xAxis: {data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
来我们来看看效果
写完数据之后呢?
最后一步
将更改数据填入中介
myChart.setOption(option);
整体来看看:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="自己研究看开头"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '因蓝桥杯摆烂的第无数天'},tooltip: {},legend: {data:['销量tmd']},xAxis: {data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
总结一下:第一步引入库 <script src="cdn或本地位置"></script>
第二步创个容器对象
第三步创个承接对象
第四步创个数据对象,填入数据。
第五步 更新数据
五步万能结束,ok了,就这样了。。。。。。。。。。
就再补充点数据方面的知识吧,就是写在数据对象里面的。
二.数据
1.type
type的意思是什么?哦,对,是类型,你先要想好,你要创建的图表是个什么类型。
2.color
color也就是调色盘,想搞什么颜色就搞什么颜色。
调色盘颜色列表。如果没有设置全局颜色,则会依次循环从该列表中取颜色作为系列颜色。
说实话,没啥软用
3.title
也就是标题嘛
看下属性,旁边都有介绍:
title: {text: //标题名字x: 'left', // 水平安放位置,默认为左对齐,可选为:// 'center' ¦ 'left' ¦ 'right'// ¦ {number}(x坐标,单位px)y: 'top', // 垂直安放位置,默认为全图顶端,可选为:// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}(y坐标,单位px)//textAlign: null // 水平对齐方式,默认根据x设置自动调整backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc', // 标题边框颜色borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框)padding: 5, // 标题内边距,单位px,默认各方向内边距为5,// 接受数组分别设定上右下左边距,同cssitemGap: 10, // 主副标题纵向间隔,单位px,默认为10,textStyle: {fontSize: 18,fontWeight: 'bolder',color: '#333' // 主标题文字颜色},subtextStyle: {color: '#aaa' // 副标题文字颜色}},
4.legend
翻译过来就是图标比例,像怎么布局啊,边框啊
legend: {data: //数据显示orient: 'horizontal', // 布局方式,默认为水平布局,可选为:// 'horizontal' ¦ 'vertical'x: 'center', // 水平安放位置,默认为全图居中,可选为:// 'center' ¦ 'left' ¦ 'right'// ¦ {number}(x坐标,单位px)y: 'top', // 垂直安放位置,默认为全图顶端,可选为:// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}(y坐标,单位px)backgroundColor: 'rgba(0,0,0,0)',borderColor: '#ccc', // 图例边框颜色borderWidth: 0, // 图例边框线宽,单位px,默认为0(无边框)padding: 5, // 图例内边距,单位px,默认各方向内边距为5,// 接受数组分别设定上右下左边距,同cssitemGap: 10, // 各个item之间的间隔,单位px,默认为10,// 横向布局时为水平间隔,纵向布局时为纵向间隔itemWidth: 20, // 图例图形宽度itemHeight: 14, // 图例图形高度textStyle: {color: '#333' // 图例文字颜色}},
5.....睡觉
相关文章:
EChart简单入门
echart的安装就细不讲了,直接去官网下,实在不会的直接用cdn,省的一番口舌。 cdn.staticfile.net/echarts/4.3.0/echarts.min.js 正入话题哈 什么是EChart? EChart 是一个使用 JavaScript 实现的开源可视化库,Echart支持多种常…...
阿里云8核32G云服务器租用优惠价格表,包括腾讯云和京东云
8核32G云服务器租用优惠价格表,云服务器吧yunfuwuqiba.com整理阿里云8核32G服务器、腾讯云8核32G和京东云8C32G云主机配置报价,腾讯云和京东云是轻量应用服务器,阿里云是云服务器ECS: 阿里云8核32G服务器 阿里云8核32G服务器价格…...
设计模式,工厂方法模式
工厂方法模式概述 工厂方法模式,是对简单工厂模式的进一步抽象和推广。以我个人理解,工厂方法模式就是对生产工厂的抽象,就是用一个生产工厂的工厂来进行目标对象的创建。 工厂方法模式的角色组成和简单工厂方法相比,创建了一个…...
WPF中嵌入3D模型通用结构
背景:wpf本身有提供3D的绘制,但是自己通过代码描绘出3D是比较困难的。3D库helix-toolkit支持调用第三方生成的模型,比如Blender这些,所以在wpf上使用3D就变得非常简单。这里是一个通过helix-toolkit库调用第三方生成的3d模型的样例…...
举个例子说明联邦学习
学习目标: 一周掌握 Java 入门知识 学习内容: 联邦学习是一种机器学习方法,它允许多个参与者协同训练一个共享模型,同时保持各自数据的隐私。 联邦学习概念(例子): 假设有三家医院,它们都希望…...
【Python】免费的图片/图标网站
专栏文章索引:Python 有问题可私聊:QQ:3375119339 这里是我收集的几个免费的图片/图标网站: iconfont-阿里巴巴矢量图标库icon(.ico)INCONFINDER(.ico)...
Pytorch中的nn.Embedding()
模块的输入是一个索引列表,输出是相应的词嵌入。 Embedding.weight(Tensor)–形状模块(num_embeddings,Embedding_dim)的可学习权重,初始化自(0,1)。 也就是…...
WebSocketServer后端配置,精简版
首先需要maven配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.1.3.RELEASE</version></dependency> 然后加上配置类 这段代码是一个Spri…...
Python程序设计 多重循环(二)
1.打印数字图形 输入n(n<9),输出由数字组成的直角三角图形。例如,输入5,输出图形如下 nint(input("")) #开始 for i in range(1,n1):for j in range(1,i1):print(j,end"")print()#结束 2.打印字符图形 …...
前端面试题--CSS系列(一)
CSS系列--持续更新中 1.CSS预处理器有哪些类型,有什么区别2.盒模型是什么,有哪两种类型3.css选择器有哪些,优先级是怎样的,哪些属性可以继承4. 说说em/px/rem/vh/vw的区别5.元素实现水平垂直居中的方法有哪些,如果元素…...
VSCode好用插件
由于现在还是使用vue2,所以本文只记录vue2开发中好用的插件。 美化类插件不介绍了,那些貌似对生产力起不到什么大的帮助,纯粹的“唯心主义”罢了,但是如果你有兴趣的话可以查看上一篇博客:VSCode美化 1. vuter 简介&…...
Vue3:对ref、reactive的一个性能优化API
一、情景说明 我们知道,在Vue3中,想要创建响应式的变量,就要用到ref、reactive来包裹一下数据即可。 但是,这里有个损耗性能的地方 就是,被它包裹的数据,都会构建成响应式的,无论多少层次&…...
Python 用pygame简简单单实现一个打砖块
# -*- coding: utf-8 -*- # # # Copyright (C) 2024 , Inc. All Rights Reserved # # # Time : 2024/3/30 14:34 # Author : 赫凯 # Email : hekaiiii163.com # File : ballgame.py # Software: PyCharm import math import randomimport pygame import sys#…...
软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令
一、IPv6 IPv6 具有长达 128 位的地址空间,可以彻底解决 IPv4 地址不足的问题。由于 IPv4 地址是32 位二进制,所能表示的IP 地址个数为 2^32 4 294 967 29640 亿,因而在因特网上约有 40亿个P 地址。 由 32 位的IPv4 升级至 128 位的IPv6&am…...
深入浅出 -- 系统架构之负载均衡Nginx资源压缩
一、Nginx资源压缩 建立在动静分离的基础之上,如果一个静态资源的Size越小,那么自然传输速度会更快,同时也会更节省带宽,因此我们在部署项目时,也可以通过Nginx对于静态资源实现压缩传输,一方面可以节省带宽…...
基于jsp+Spring boot+mybatis的图书管理系统设计和实现
基于jspSpring bootmybatis的图书管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获…...
Pytorch转onnx
pytorch 转 onnx 模型需要函数 torch.onnx.export。 def export(model: Union[torch.nn.Module, torch.jit.ScriptModule, torch.jit.ScriptFunction],args: Union[Tuple[Any, ...], torch.Tensor],f: Union[str, io.BytesIO],export_params: bool True,verbose: bool False…...
苍穹外卖——项目搭建
一、项目介绍以及环境搭建 1.苍穹外卖项目介绍 1.1项目介绍 本项目(苍穹外卖)是专门为餐饮企业(餐厅、饭店)定制的一款软件产品,包括 系统管理后台 和 小程序端应用 两部分。其中系统管理后台主要提供给餐饮企业内部员…...
云原生架构(微服务、容器云、DevOps、不可变基础设施、声明式API、Serverless、Service Mesh)
前言 读完本文,你将对云原生下的核心概念微服务、容器云、DevOps、Immutable Infrastructure、Declarative-API、Serverless、Service Mesh 等有一个相对详细的了解,帮助你快速掌握云原生的核心和要点。 因题主资源有限, 这里会选用部分云服务商的组件进…...
基于重写ribbon负载实现灰度发布
项目结构如下 代码如下: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocat…...
无端科技一面(生死狙击项目组 战斗客户端 40min)
自我介绍 实习经历询问 项目询问 TCP和UDP的区别 什么情况会用到UDP 大小端 寻路算法了解多少 A*算法 场景题:扫雷如何随机分地雷,怎么安排数字显示 怎么判断一个物体在三角锥内 动作游戏中打击效果怎么处理穿模问题 八叉树了解过吗 骨骼动画…...
idea开发 java web 高校学籍管理系统bootstrap框架web结构java编程计算机网页
一、源码特点 java 高校学籍管理系统是一套完善的完整信息系统,结合java web开发和bootstrap UI框架完成本系统 ,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 前段主要技术 css jq…...
linux之文件系统、inode和动静态库制作和发布
一、背景 1.没有被打开的文件都在磁盘上 --- 磁盘级文件 2.对磁盘级别的文件,我们的侧重点 单个文件角度 -- 这个文件在哪里,有多大,其他属性是什么? 站在系统角度 -- 一共有多少文件?各自属性在哪里?…...
C++IO类,输入输出缓冲区,流状态
我们的程序已经使用了很多IO库设施: istream(输入流)类型,提供输入操作。ostream(输出流)类型,提供输出操作。cin,一个istream对象,从标准输入读取数据。写入到标准错误。cout,一个ostream对象,…...
机器学习笔记 - 文字转语音技术路线简述以及相关工具不完全清单
一、TTS技术简述 今天的文本到语音转换技术(TTS)的目标已经不仅仅是让机器说话,而是让它们听起来像不同年龄和性别的人类。通常,TTS 系统合成器的质量是从不同方面进行评估的,包括合成语音的清晰度、自然度和偏好,以及人类感知因素,例如可理解性。 1、技术路线 (1)基…...
阿里云4核8G服务器ECS通用算力型u1实例优惠价格
阿里云4核8G服务器优惠价格955元一年,配置为ECS通用算力型u1实例(ecs.u1-c1m2.xlarge)4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选,CPU采用Intel(R) Xeon(R) Platinum处理器,阿里云活动链接 aliyunfuwuq…...
Jetson nano部署Yolov8 安装Archiconda3+创建pytorch环境(详细教程+错误解决)
由于jetson nano 是aarch64架构,Anaconda官方不支持aarch64架构,所以有了一个叫“Archiconda”,其目的就是将conda移植到aarch64平台上 一. 下载地址Releases Archiconda/build-tools GitHub 然后安装archiconda bash Archiconda3-0.2.3…...
Node.JS多线程PromisePool之promise-pool库实现
什么是Promise Pool Map-like, concurrent promise processing for Node.js. Promise-Pool是一个用于管理并发请求的JavaScript库,它可以限制同时进行的请求数量,以避免过多的请求导致服务器压力过大。使用Promise-Pool可以方便地实现对多个异步操作的并…...
【C++】红黑树讲解及实现
前言: AVL树与红黑树相似,都是一种平衡二叉搜索树,但是AVL树的平衡要求太严格,如果要对AVL树做一些结构修改的操作性能会非常低下,比如:插入时要维护其绝对平衡,旋转的次数比较多,更…...
security如何不拦截websocket
只要添加一个关键配置就行 //忽略websocket拦截Overridepublic void configure(WebSecurity webSecurity){webSecurity.ignoring().antMatchers("/**");} 全部代码我放着了 package com.oddfar.campus.framework.config;import com.oddfar.campus.framework.secur…...
北京市保障房建设投资中心网站首页/免费的网站域名查询app
转自:http://www.tairan.com/archives/3998 cocos2d-x 中有自己的定时器实现,一般用法是在场景,层等内部实现,定时器的生命周期随着它们的消亡而消亡,就运行周期而言,相对最长的是场景,如果在多…...
专门做衣服特卖的网站/怎么线上推广自己的产品
目录函数类异常模块导入读写文件从mysql中读取数据日期与字符串格式转换函数 函数举例 不需要权限修饰符不需要返回值类型如果函数中没有return,那么默认返回值时None # 无参函数 def test():print("hello")# 带参函数 def test1(n):print("hello…...
wordpress密码登录插件/南京seo关键词优化预订
本文字数:8814 字精读时间:18 分钟也可在 8 分钟内完成速读容器到底是什么?容器是怎么工作的?容器如何隔离资源?为啥容器启动那么快?...如果你是个好奇宝宝,平时在使用容器的时候内心定会泛起类…...
wordpress 音乐/快速排名优化怎么样
先浅复习一下es6 let与const 作⽤域 全局作⽤域 局部作⽤域 块级作⽤域 let ⽤法:声明⼀个变量 特点: 只在声明的代码块内有效 在同⼀作⽤域内不允许重复声明 没有变量提升 暂时性死区 用法:声明一个只读的变量(可理解为常量) …...
精简wordpress博客程序/东营seo整站优化
关于AutoLayout设置的图解翻译,之前的有很多文章都讲解,我这里就不班门弄斧了。有兴趣的可以搜一下。 为啥要用AutoLayout?我是可视化拥趸: 当你使用AutoLayout搭建完成一个页面之后,可以使用Preview查看是否适配不同的…...
做家教网站怎么样/推广方案框架
2019独角兽企业重金招聘Python工程师标准>>> WAF,主要是对Web特有入侵方式的加强防护,如DDOS防护、SQL注入、XML注入、XSS等。由于是应用层而非网络层的入侵,从技术角度都应该称为Web IPS,而不是Web防火墙。由于重点是…...