最基础eacharts图带数字,百分比,tab切换
切换tab按钮通过显示隐藏展示不同charts图
html部分
其中一个charts图,另外两个图,方法类似,就像平时画eacharts图一样,再写两个
var spNum = 5;
var data = [{count:1,name:'故障',status:'1'},{count:2,name:'异常',status:'2'},{count:3,name:'预警',status:'3'},{count:4,name:'正常',status:'4'}]
var honorData4 = [];
var myColor = ["#F25B76","#F4D943","#F6BF60", "#5ECB9B"];
var legendData = [],
honorXAxisData = ['故障','预警','异常','正常'];
var sumData1 = null;
data.map(function(item, y) {
honorData4.push(item.count)
sumData1+=item.count
console.log(sumData1)
});
var isMax =sumData1;
var _max = sumData1;
var bjData1 = [isMax, isMax, isMax, isMax];
var fomatter_fn = function(v) {
console.log(v)
if(v.value==0){
v.value = ''
return (v.value='')
}else{
return (v.value)
}
}
var _label = {
normal: {
show: true,
position: 'inside',
formatter: fomatter_fn,
textStyle: {
color: '#fff',
fontSize: 12
}
}
};
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
},
borderColor: "#ddd",
textStyle: {
fontSize: 14
},
formatter: function(p) {
var relVal = p[0].name;
var sum = 0;
for (var z = 0; z < p.length; z++) {
if (!(p[z].seriesName == 1001 || p[z].seriesName == 1000)) {
sum += p[z].value;
}
}
for (var i = 0; i < p.length; i++) {
if (!(p[i].seriesName == 1001 || p[i].seriesName == 1000)) {
relVal += "<br>" + p[i].marker + p[i].seriesName + " " + p[i].value + " " + "(" + ((100 * parseFloat(p[i].value)) / parseFloat(_max)).toFixed(2) + "%)";
}
}
return relVal;
}
},
backgroundColor: "#f666",
legend: {
show:false,
data: ['正常','故障','预警','异常'],
icon: "rect",
itemWidth: 10,
itemHeight: 10,
selectedMode: false,
textStyle: {
color: "#666666",
fontSize: 14
}
},
grid: {
left: "14%",
right: "10%",
bottom: "5%",
top: "20%",
containLabel: true
},
xAxis: [{
type: "value",
show: false,
splitNumber: spNum,
interval: _max / spNum,
max: _max,
axisLabel: {
show: false,
formatter: function(v) {
var _v = (v / _max * 100).toFixed(0);
return _v == 0 ? _v : _v + '%';
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}
],
yAxis: [{
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#333333",
fontSize: 14,
fontWeight: 400,
interval: 0
},
offset: 20,
data: honorXAxisData
},
{
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#fff",
fontSize: 10,
fontWeight: 300,
interval: 0
}
}
],
series: [
{
name: " ",
type: "bar",
label: _label,
barWidth: 12,
stack: "总量",
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
zlevel: 10,
data: honorData4
},
{
name: "1000",
type: "bar",
barGap: "-100%",
barWidth: 12,
itemStyle: {
normal: {
color: '#efefef'
}
},
xAxisIndex: 0,
// yAxisIndex: 1,
data: bjData1,
emphasis: {
itemStyle: {
color: '#efefef'
}
},
zlevel: 5
}
]
}
转载于:https://www.cnblogs.com/hrr666/p/11477208.html
最基础eacharts图带数字,百分比,tab切换相关推荐
- vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) ...
- Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- uniapp滑动切换tab标签_Web前端,Tab切换,缓存,页面处理的几种方式
前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略)/ ...
- 解决dataTable在element下的tab切换时表头与内容错位问题
项目背景基于第三方为layui开发的老项目,在layui基础上使用element的tab栏,切换下使用dataTable出现表头与内容错位,如下图: 解决办法是: // 处理tab切换后列表样式错乱问 ...
- js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口
JavaScript跳转到指定页面并且到指定的tab切换窗口 案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的 ...
- html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
- Redis之Redis基础、环境搭建、主从切换
Redis基础.环境搭建.主从切换 一.Redis简介 1.引入NoSQL的背景 2.Redis简介 二.环境部署 1.server1源码安装redis,并创建redis实例 2.server2主机, ...
- 使用原生实现tab切换+slideToggle效果
**问题描述:**当tab切换时,由于tab对应的内容不同,导致内容容器的高度的不同. 直接的切换显示内容显得太僵硬了,所以希望内容容器根据内容的多少实现slideToggle效果. **解析问题:* ...
- HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...
最新文章
- finished with exit code -1073740791 (0xC0000409)
- 算法竞赛入门与进阶 (二)单调队列、单调栈
- Linux的chkconfig:对系统服务进行增删改查
- Upload LABS Pass-6
- Java简易开发环境搭建
- 毕业论文计算机设计,计算机设计毕业论文
- H5 video 播放器demo代码
- 国标GB28181协议国标视频平台国标流媒体服务器EasyGBS向上级联多个平台设备及通道选择错位问题解析
- php压缩文件夹(整理最新版)
- CAD二次开发--ZOOM自定义缩放到视口区域,解决SelectCrossingWindow等方法对视口外实体不起作用的问题
- dvm 与 jvm区别
- iphone计算机的声音,苹果电脑如何自定义声音怎么设置
- 编译安装Memcached
- vue updated
- Java集合(十一)TreeSet解读
- Python遥感影像SAR分割裁剪多张小影像
- [KVM应用案例] 湖南电视台高清电视转播车KVM矩阵项目
- php.ini配置文件详解(mac nginx1.8.0 php5.6 )持续更新中
- 用Windows Live Writer写CSDN博客和网易博客
- 杰理之提示音配置【篇】
热门文章
- android导航点自动生成,Android史上最简单的引导页导航点实现方式【原创】
- C语言真题考研pdf,中财信息学院C语言程序设计1999年考研真题.pdf
- html异步 post,Jquery中Ajax/Post同步和异步请求
- jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜
- javascript拖拽之从浏览器外拖拽(drag)
- 网站项目常用JS,CSS等控件插件
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_09-webpack研究-webpack介绍
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-07 Eureka服务注册中心配置控制台问题处理...
- Dockerfile 中的 CMD 与 ENTRYPOINT
- 并不对劲的AC自动机