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轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
随机推荐
- pod install/update失败:Failed to connect to 127.0.0.1 port 1080: Connection refused
出现这类错误,通常是因为代理发生的,取消代理即可! 1.查看有无相关代理: git config --global http.proxy git config --global https.proxy ...
- 【JSTL】JSTL标签库的常用标签
一.JSTL技术 1.JSTL概述 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样 ...
- 目标检测论文解读8——YOLO v3
背景 要在YOLO v2上作出改进. 方法 (1)分类器改变.从softmax loss改变为logistic loss,作用是处理符合标签,softmax loss只能用来预测只有一种类别的目标,l ...
- 在CentOS7.5上安装Docker,在Docker中拉取CentOS7.5镜像并安装SSH服务
# 安装docker yum install -y docker # 启动docker systemctl start docker # 加入开机启动 systemctl enable docker ...
- mysql解析binlog日志
binlog日志用于记录所有更新了数据或者已经潜在更新了数据(例如,没有匹配任何行的一个DELETE)的所有语句.语句以“事件”的形式保存,它描述数据更改.因为有了数据更新的binlog,所以可以用于 ...
- views视图
1.request.POST.get('.......') --radio 单选框 get()方法 从HTML中提取发过来的数据 1. 2. 3. 4. 2.request.POS ...
- 费马平方和定理&&斐波那契恒等式&&欧拉四平方和恒等式&&拉格朗日四平方和定理
费马平方和定理 费马平方和定理的表述是:奇素数能表示为两个平方数之和的充分必要条件是该素数被4除余1. 1. 如果两个整数都能表示为两个平方数之和的形式,则他们的积也能表示为两个平方数之和的形式. $ ...
- LeetCode 1034. Coloring A Border
原题链接在这里:https://leetcode.com/problems/coloring-a-border/ 题目: Given a 2-dimensional grid of integers, ...
- 安装服务器pve虚拟系统(可以通过web管理物理机集群资源与虚拟机)
做此系统前,可以先进入bios,设置一下ipmi的网络地址.可以远程管理服务器 输入服务器的ipmi里面配置的ip 默认账号与密码admin 点击launch 会自动下载认证文件 下载好java软件环 ...
- restql 学习二 几种查询模式
restql 提供了比较强大的查询处理. 支持的几种查询模式 基本查询,主要是单一映射资源的查询,(from,with,only,header,cache...) 并行查询,多个资源的同时查询,(对于 ...