常见的几种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.hqwc.cn/news/517624.html

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

相关文章

ES单节点部署

ES单节点部署

ES 拉取镜像 docker pull elasticsearch:7.10.1启动容器 docker run -d -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e "ES_JAVA_OPTS-Xms1g -Xmx1g" -v /es_data:/usr/share/elasticsearch/data --name es 558380375f1a注&#xff1a…
阅读更多...
Python爬虫——Scrapy-1

Python爬虫——Scrapy-1

目录 简介 安装 基本使用 1. 创建爬虫的项目 2. 创建爬虫文件 3. 运行爬虫代码 scrapy项目组成 scrapy工作原理 ​编辑 58同城 scrapy架构组成 汽车之家 总结 简介 Scrapy 是一个基于 Python 的开源网络爬虫框架，它可以帮助开发者快速、高效地构…
阅读更多...
一个系列很多样式的wordpress外贸建站模板

一个系列很多样式的wordpress外贸建站模板

菌菇干货wordpress跨境电商模板 食用菌、羊肚菌、牛肝菌、香菇、干黄花菜、梅干菜、松茸wordpress跨境电商模板。 https://www.jianzhanpress.com/?p3946 餐饮调味wordpress跨境电商模板 豆制品、蛋黄糖、烘焙、咖啡、调料、调味酱、餐饮调味wordpress跨境电商模板。 http…
阅读更多...
【python】成功解决ModuleNotFoundError: No module named ‘tensorboardX‘

【python】成功解决ModuleNotFoundError: No module named ‘tensorboardX‘

【python】成功解决ModuleNotFoundError: No module named ‘tensorboardX’ 🌈 个人主页：高斯小哥 🔥 高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f…
阅读更多...
【EI会议征稿通知】第二届电力、电网与储能国际学术会议(PGES 2024)

【EI会议征稿通知】第二届电力、电网与储能国际学术会议(PGES 2024)

第二届电力、电网与储能国际学术会议(PGES 2024) 2024 2nd International Conference on Power, Grid and Energy Storage (PGES 2024) 第二届电力、电网与储能国际学术会议(PGES 2024)将于2024年6月21-23日于中国昆明召开。会议将围绕电力、电网与储能等领域中的最新研究成果…
阅读更多...
FPGA——三速自适应以太网设计（1）基本模块

FPGA——三速自适应以太网设计（1）基本模块

FPGA——以太网设计（1）基本模块 1. 协议解析（1）MAC层（2）IP层 和 ARP层（3）UDP层 和 ICMP层 2.1 MAC接收模块2.2 MAC发送模块3.1 IP接收模块3.2 IP发送模块4.1 UDP接收模块4.2 UDP发送…
阅读更多...
SpringCloud 微服务架构编码构建

SpringCloud 微服务架构编码构建

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅，从传统的模块之间调用，一步步的升级为 SpringCloud 模块之间的调用，此篇文章为第一篇，即不使用 SpringCloud 组件进行模块之间的调用，后续会有很多的文章循序渐…
阅读更多...
像SpringBoot一样使用Flask - 4.拦截器

像SpringBoot一样使用Flask - 4.拦截器

接上文《像SpringBoot一样使用Flask - 3.蓝图路由Blueprint》，我们已经整理了一个干净的"启动类"，现在要加入一些拦截器，为了方便统一管理。 一、常用的拦截器 # 拦截器 app.before_request def handle_before_request():"&qu…
阅读更多...
three.js如何实现简易3D机房？（四）点击事件+呼吸灯效果

three.js如何实现简易3D机房？（四）点击事件+呼吸灯效果

接上一篇： three.js如何实现简易3D机房？（三）显示信息弹框/标签：http://t.csdnimg.cn/5W2wA 目录 八、点击事件 1.实现效果 2.获取相交点 3.呼吸灯效果 4.添加点击事件 5.问题解决 八、点击事件 1.实现效果 2.…
阅读更多...
现代重工业如何避免短路危害的发生

现代重工业如何避免短路危害的发生

短路是电路中一部分被短接的现象，其危害主要表现在以下几个方面： 产生大电流与高热量：短路会导致电路中产生极大的电流，有时可达上万甚至十几万安培。这种大电流会产生大量的热量，不仅会使设备过热，还可能…
阅读更多...
Cyber RT 开发工具

Cyber RT 开发工具

在Cyber RT中还提供了一些工具，这些工具可以拓展Cyber RT功能、提高开发调试效率，本章主要介绍这些工具的使用。 本章内容: 1.cyber record工具的应用； 2.常用命令工具的使用； 学习收获: 1.可以通过cyber record将发布的话题消息…
阅读更多...
Service Mesh：重塑微服务市场

Service Mesh：重塑微服务市场

摘要 今天我们不谈技术，不谈架构，也不谈具体的产品，我们来聊一聊在未来一两年之内，Service Mesh技术会在微服务相关的市场带来什么样的变化？ 大家好，我是敖小剑，今天给大家带来的这个主题叫做…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023