Echarts X轴多项百分比的展示
app.title = '堆叠柱状图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter:'{b}<br />\
<span style="display:inline-block;margin-right:5px;border-
radius:10px;width:9px;height:9px;background-color:#7ace4c"></span>\
{a0}:{c0}%<br />\
<span style="display:inline-block;margin-right:5px;border-
radius:10px;width:9px;height:9px;background-color:#ffbb44"></span>\
{a1}:{c1}%<br />\
<span style="display:inline-block;margin-right:5px;border-
radius:10px;width:9px;height:9px;background-color:#11a0f8"></span>\
{a2}:{c2}%<br />'
},
legend: {
data:['未完成','已完成','实际完成']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['total','A','B','C','D','E','F']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'未完成',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'已完成',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'实际完成',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
}
]
};

Echarts X轴多项百分比的展示的更多相关文章
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全(解决方案)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
- echarts x轴名称太长
echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 function extension(mychart, type) { let extension = document.getE ...
- echarts Y轴名称显示不全(转载)
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- echarts 让轴自适应数据为小数整数
echarts 让轴自适应数据为小数整数,以解决y轴数值重复的问题 工作中突然遇到这个问题 试了一下用formatter自适应 ok 在yAxis中提阿尼按键属性 axisLabel 1 axis ...
- Chart.js Y轴数据以百分比展示
新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...
- Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
随机推荐
- HDP 3.1.0 集成 Sqoop2 踩坑问题记录
HDP 3.1.0 集成 Sqoop2 踩坑问题记录 本文原始地址:https://sitoi.cn/posts/65261.html 问题一 $ sqoop:000> start job -n ...
- 部署ceph存储集群及块设备测试
集群环境 配置基础环境 添加ceph.repo wget -O /etc/yum.repos.d/ceph.repo https://raw.githubusercontent.com/aishang ...
- Python程序 #!/usr/bin/python 的解释
关于脚本第一行的 #!/usr/bin/python 的解释,相信很多不熟悉 Linux 系统的同学需要普及这个知识,脚本语言的第一行,只对 Linux/Unix 用户适用,用来指定本脚本用什么解释器 ...
- 网络编程socket理论一
网络通信理论 首先说下网络之间的通信流程看图 Socket 层是位于运输层和应用层之间的,封装好的,方便使用 Socket 是什么和工作流程 Socket是应用层与TCP/IP协议族通信的中间软件抽象 ...
- 18-C#笔记-继承
1. 子类可以使用父类的成员和函数. 和C++不同,使用的是一个冒号 2. 不支持多重继承 但是可以通过接口(interface)这种结构实现.后续讲解. using System; namespac ...
- V2X:
一篇文章读懂V2X系列:标准篇 为了提升交通系统的安全性和智能化,智能交通系统的概念正逐渐兴起.智能交通可以利用新一代的通信网络和数据处理能力,提高现有交通系统的整体效率,降低能量损耗,增加运输的安全 ...
- 2019 Nowcoder Multi-University Training Contest 4 E Explorer
线段树分治. 把size看成时间,相当于时间 $l$ 加入这条边,时间 $r+1$ 删除这条边. 注意把左右端点的关系. #include <bits/stdc++.h> ; int X[ ...
- C++各大有名库的介绍——网络通信
ACE是C++库的代表,超重量级的网络通信开发框架.ACE自适配通信环境(Adaptive Communication Environment)是可以自由使用.开放源代码的面向对象框架,在其中实现了许 ...
- awesome-RecSys
https://github.com/jihoo-kim/awesome-RecSys?fbclid=IwAR1m6OebmqO9mfLV1ta4OTihQc9Phw8WNS4zdr5IeT1X1OL ...
- Java 抽象类 抽象方法 接口
#抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化 ...