常见的几种echarts类型

一:折线图

let option = {tooltip: {},animation: false,grid: {top: "20%",bottom: "33%", //也可设置left和right设置距离来控制图表的大小left: '5%',right: '5%'},xAxis: {boundaryGap:false,data: [1,2,3,4,5],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: 'rgba(10,71,62,0.2)'}},axisTick: {show: false //隐藏X轴刻度},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "rgba(0,0,0,1)" //X轴文字颜色}},},yAxis: [{name:"%",nameLocation:"end",nameTextStyle:{color:"#333",align:"right",padding:[0,15]},type: "value",gridIndex: 0,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)',width: 1},},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)'}},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "#333" //X轴文字颜色}},}],series: [{name: 'Fake Data',type: 'line',symbol: 'none',smooth: true,  sampling: 'lttb',itemStyle: {color: '#20C3A7'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: 'rgba(255,255,255,1)'},{offset: 0,color: 'rgb(32,195,167)'}])},data: [12,2,3,14,5]}]};

第二种:柱形渐变图

let workOrderTjChartoption = {tooltip: {},color:["#FFAE00","#2AADD3","#20C3A7"],animation: false,grid: {top: "23%",bottom: "21%", //也可设置left和right设置距离来控制图表的大小left: '11%',right: '5%'},xAxis: {data: ['周一','周二'],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: 'rgba(10,71,62,0.2)'}},axisTick: {show: false //隐藏X轴刻度},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "rgba(0,0,0,1)" //X轴文字颜色}},},yAxis: [{type: "value",gridIndex: 0,// min: min1,// max: max1,// interval: (max1 - min1) / 4,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)',width: 1},},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)'}},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "#333" //X轴文字颜色}},}],legend: {top: '0%',itemWidth:10,itemHeight:10,data: ["核查测点数", "严重越上限测点数", "越下限测点数"],},series: [{name: "越下限测点数",type: "bar",barWidth: 8,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(29,218,182,1)"},{offset: 1,color: "rgba(34,183,160,1)"}])}},data: [1,2],// z: 10,// zlevel: 0,},{name: "严重越上限测点数",type: "bar",barWidth: 8,// barGap: '-100%',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(31,224,247,1)"},{offset: 1,color: "rgba(42,173,211,1)"}])}},data: [1,2],// z: 11,// zlevel: 1,},{name: '核查测点数',type: 'bar',barWidth: 8,// smooth: true, //是否平滑曲线显示// 			symbol:'circle',  // 默认是空心圆(中间是白色的),改成实心圆itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(255,222,0,1)"},{offset: 1,color: "rgba(255,174,0,1)"}])}},// z: 12,// zlevel: 2,data:[2,3],}]};

第三种:柱形图

let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {top: '5%',itemWidth:10,itemHeight:10,data: ["7%~10%", "10%~15%", "15以上","-10~-20","-20及以下"],},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: 'rgba(10,71,62,0.2)'}},axisTick: {show: false //隐藏X轴刻度},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "rgba(0,0,0,1)" //X轴文字颜色}},}],yAxis: [{type: 'value'}],series: [{name: '-20及以下',type: 'bar',barWidth:15,stack: 'Ad',emphasis: {focus: 'series'},itemStyle:{color:"#20C3A7"},data: [120, 132, 101, 134, 90, 230, 210]},{// 分隔type: "pictorialBar",itemStyle: {normal: {color: "#fff"}},symbolRepeat: "true",symbolMargin: 2,symbol: "rect",symbolClip: true,symbolSize: [15, 2],symbolPosition: "start",// 	symbolOffset: [0, -15],symbolBoundingData: [1000, 1000, 1000, 1000, 1000, 1000, 1000],data:  [1000, 1000, 1000, 1000, 1000, 1800, 1800],width: 25,z: 0,zlevel: 1,},{name: '-10~-20',type: 'bar',barWidth:15,stack: 'Ad',emphasis: {focus: 'series'},itemStyle:{color:"#249AEC"},data: [220, 182, 191, 234, 290, 330, 310]},{name: '15以上',type: 'bar',barWidth:15,stack: 'Ad',emphasis: {focus: 'series'},itemStyle:{color:"#35C03F"},data: [150, 232, 201, 154, 190, 330, 410]},{name: '10%~15%',type: 'bar',barWidth:15,stack: 'Ad',emphasis: {focus: 'series'},itemStyle:{color:"#FFAE00"},data: [150, 232, 201, 154, 190, 330, 410]},{name: '7%~10%',type: 'bar',barWidth:15,stack: 'Ad',emphasis: {focus: 'series'},itemStyle:{color:"#FF7214"},data: [150, 132, 101, 254, 190, 330, 410]},]};

第四种:柱形图

let option = {tooltip: {},animation: false,grid: {top: "25%",bottom: "16%", //也可设置left和right设置距离来控制图表的大小left: '5%',right: '5%'},xAxis: {data: [1,2,3,4],axisLine: {show: true, //隐藏X轴轴线lineStyle: {color: 'rgba(10,71,62,0.2)'}},axisTick: {show: false //隐藏X轴刻度},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "rgba(0,0,0,1)" //X轴文字颜色}},},yAxis: [{type: "value",gridIndex: 0,// min: min1,// max: max1,// interval: (max1 - min1) / 4,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)',width: 1},},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)'}},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "#333" //X轴文字颜色}},},{name: "%",type: "value",gridIndex: 0,// min: min2,// max: max2,// interval: (max2 - min2) / 4,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)',width: 1},},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: 'rgba(233,242,241,1)'}},axisLabel: {show: true,margin: 14,fontSize: 14,textStyle: {color: "#333" //X轴文字颜色}},},],legend: {top: '5%',data: ["总数", "越限"],itemWidth:10,itemHeight:10,itemGap:20},series: [{name: "总数",type: "bar",barWidth: 15,itemStyle: {normal: {color: "#E8F8F5",borderColor: '#22B7A0'}},data: [10,10,10,10],z: 10,zlevel: 0,},{name: "越限",type: "bar",barWidth: 15,barGap: '-100%',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(34,183,160,1)"},{offset: 1,color: "rgba(29,218,182,1)"}])}},data: [2,3,4,6],z: 11,zlevel: 1,},]};

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

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

相关文章

工作微信统一管理(还带监管功能)

1.会话页面(可统一管理多个微信号、聚合聊天、手动搜索添加好友、通过验证请求、查看好友的朋友圈等) 2.聊天历史(可查看 所有聊天记录,包括手机.上撤回、删除的消息) 3.群发助手(可以一 -次群发多个好友和群,还可以选择定时发送,目前还在内测…

操作系统---第一课

操作系统: 控制和管理整个计算机系统的硬件和软件资源。向上层提供方便易使用的服务,是最接近硬件的一层软件。 功能:文件管理,存储器管理,设备管理,处理机管理。 操作系统的四个特征: 并发 &…

爬虫实战——scrapy框架爬取多张图片

scrapy框架的基本使用,请参考我的另一篇文章:scrapy框架的基本使用 起始爬取的网页如下: 点击每张图片,可以进入图片的详情页,如下: 代码实现: 项目文件结构如下 img_download.py文件代码 im…

【kubernetes】关于k8s集群的存储卷

目录 一、存储卷的分类 二、empty存储卷以及特点 三、hostpath存储卷以及特点 四、nfs存储卷以及特点 五、pvc存储卷 查看pv的定义 查看pvc的定义 实操:静态创建pv的方式 实现pvc存储卷 步骤一:先完成nfs的目录共享,需要准备不同的目…

自动驾驶革命:解密端到端背后的数据、算力和AI奇迹

作者 |毫末智行数据智能科学家 贺翔 编辑 |祥威 最近,特斯拉FSD V12的发布引发了业界对端到端自动驾驶的热议,业界纷纷猜测FSD V12的强大能力是如何训练出来的。从马斯克的测试视频可以大致归纳一下FSD V12系统的一些核心特征: 训练数据&am…

Linux笔记--make

使用上一节的 main.c、add.c、sub.c文件进行编译,编译的过程有很多步骤,如果要重新编译,还需要再重来一遍,能不能一步完成这些步骤?将这些步骤写到makefile文件中,通过make工具进行编译 一个工程中的源文件不计其数&a…

Sora:AI视频模型的无限可能与挑战

随着人工智能技术的突飞猛进,AI视频模型已成为科技领域的新焦点。OpenAI推出的AI视频模型Sora,凭借其卓越的技术性能和前瞻性,为AI视频领域的发展揭开了新的篇章。本文将从技术解析、应用场景、未来展望、伦理与创意以及用户体验与互动五个方…

<C++>【继承篇】

​ ✨前言✨ 🎓作者:【 教主 】 📜文章推荐: ☕博主水平有限,如有错误,恳请斧正。 📌机会总是留给有准备的人,越努力,越幸运! 💦导航助手&#x1…

03. Nginx入门-Nginx虚拟主机

Nginx虚拟主机简介 yum安装与源码安装一样,只是Nginx配置文件路径不一致,这里用的yum安装的配置文件路径。 利用虚拟主机的功能,可以在一台Nginx服务器上部署一个或多个虚拟主机。 虚拟主机主配置文件 注意:配置完成Nginx主配置…

MySql安全加固:可信IP地址访问控制 设置密码复杂度

MySql安全加固:可信IP地址访问控制 & 设置密码复杂度 1.1 可信IP地址访问控制1.2 设置密码复杂度 💖The Begin💖点点关注,收藏不迷路💖 1.1 可信IP地址访问控制 当您在创建用户时使用’%作为主机部分,…

MySQL·SQL优化

目录 一 . 前言 二 . 优化方法 1 . 索引 (1)数据构造 (2)单索引 (3)explain (4)组合索引 (5)索引总结 2 . 避免使用select * 3 . 用union all代替u…

操作系统的线程管理

线程的概念 线程是“轻量级的进程”。 引入(多)线程作用 快速线程切换,通信易于实现,并行程度提高,减少(系统)管理开销 并行实体共享同一个地址空间和所有可用数据的能力。线程比进程更轻量级…

【操作教程】如何在华为云服务器部署安防监控系统EasyCVR平台?

随着视频技术的快速发展,安防视频汇聚平台EasyCVR可支持的协议也在不断拓展,平台兼容多类型的协议接入,包括:国标GB28181、RTSP/Onvif、RTMP,以及厂家的私有协议与SDK,如:海康ehome、海康sdk、大…

【VTKExamples::PolyData】第五十期 VertexConnectivity

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例VertexConnectivity,并解析接口vtkExtractEdges,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U…

threejs展示glb模型

原模型为rvt模型 <template><div ref"threeJsContainer"class"three-js-container"></div> </template> <script> import { defineComponent } from "vue"; import * as THREE from "three"; import…

Golang-channel合集——源码阅读、工作流程、实现原理、已关闭channel收发操作、优雅的关闭等面试常见问题。

前言 面试被问到好几次“channel是如何实现的”&#xff0c;我只会说“啊&#xff0c;就一块内存空间传递数据呗”…所以这篇文章来深入学习一下Channel相关。从源码开始学习其组成、工作流程及一些常见考点。 NO&#xff01;共享内存 Golang的并发哲学是“要通过共享内存的…

C++ STL自定义排序

更具体的看【速记】C STL自定义排序 - 知乎 (zhihu.com) sort sort第三个位置放的greater<int>和less<int>萌新可能会弄错&#xff0c;这两个单词不是更大和更小的意思&#xff0c;而是大于和小于&#xff0c;并且比较就是自定义排序中的前者和后者。 如果是less…

2024-3-5 python 序列小知识点

1、for循环的变量作用域不限于for循环内 >>>i 10 >>>for i in range(100): >>> print(i) >>> i 100此处&#xff0c;for循环里的 i 修改了之前的 i 变量的值。 2、列表推导式里的变量作用域仅限于推导式内 推导式犹如一个函数&…

App测试中iOS和Android的差异

1、系统版本&#xff1a; iOS和Android系统版本的更新速度、使用人数比例以及功能的不同都可能导致应用程序在不同操作系统版本上的表现和兼容性存在区别。 例如&#xff0c;在iOS平台上&#xff0c;很多用户会更快地升级到最新版本的iOS系统&#xff0c;而在Android平台上&a…

Apache ECharts数据可视化技术

介绍 官方地址:Apache ECharts 快速入门案例echarts.init //初始化方法 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src"echart…