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轴多项百分比的展示的更多相关文章

  1. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  2. echarts x轴文字显示不全(解决方案)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  3. echarts x轴标签文字过多导致显示不全

    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...

  4. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  5. echarts x轴名称太长

    echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 function extension(mychart, type) { let extension = document.getE ...

  6. echarts Y轴名称显示不全(转载)

    转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...

  7. echarts 让轴自适应数据为小数整数

    echarts 让轴自适应数据为小数整数,以解决y轴数值重复的问题 工作中突然遇到这个问题 试了一下用formatter自适应  ok  在yAxis中提阿尼按键属性 axisLabel 1 axis ...

  8. Chart.js Y轴数据以百分比展示

    新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...

  9. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

随机推荐

  1. 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 ...

  2. 【JSTL】JSTL标签库的常用标签

    一.JSTL技术 1.JSTL概述 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样 ...

  3. 目标检测论文解读8——YOLO v3

    背景 要在YOLO v2上作出改进. 方法 (1)分类器改变.从softmax loss改变为logistic loss,作用是处理符合标签,softmax loss只能用来预测只有一种类别的目标,l ...

  4. 在CentOS7.5上安装Docker,在Docker中拉取CentOS7.5镜像并安装SSH服务

    # 安装docker yum install -y docker # 启动docker systemctl start docker # 加入开机启动 systemctl enable docker ...

  5. mysql解析binlog日志

    binlog日志用于记录所有更新了数据或者已经潜在更新了数据(例如,没有匹配任何行的一个DELETE)的所有语句.语句以“事件”的形式保存,它描述数据更改.因为有了数据更新的binlog,所以可以用于 ...

  6. views视图

    1.request.POST.get('.......')    --radio       单选框 get()方法  从HTML中提取发过来的数据 1. 2. 3. 4. 2.request.POS ...

  7. 费马平方和定理&&斐波那契恒等式&&欧拉四平方和恒等式&&拉格朗日四平方和定理

    费马平方和定理 费马平方和定理的表述是:奇素数能表示为两个平方数之和的充分必要条件是该素数被4除余1. 1. 如果两个整数都能表示为两个平方数之和的形式,则他们的积也能表示为两个平方数之和的形式. $ ...

  8. LeetCode 1034. Coloring A Border

    原题链接在这里:https://leetcode.com/problems/coloring-a-border/ 题目: Given a 2-dimensional grid of integers, ...

  9. 安装服务器pve虚拟系统(可以通过web管理物理机集群资源与虚拟机)

    做此系统前,可以先进入bios,设置一下ipmi的网络地址.可以远程管理服务器 输入服务器的ipmi里面配置的ip 默认账号与密码admin 点击launch 会自动下载认证文件 下载好java软件环 ...

  10. restql 学习二 几种查询模式

    restql 提供了比较强大的查询处理. 支持的几种查询模式 基本查询,主要是单一映射资源的查询,(from,with,only,header,cache...) 并行查询,多个资源的同时查询,(对于 ...