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. HDP 3.1.0 集成 Sqoop2 踩坑问题记录

    HDP 3.1.0 集成 Sqoop2 踩坑问题记录 本文原始地址:https://sitoi.cn/posts/65261.html 问题一 $ sqoop:000> start job -n ...

  2. 部署ceph存储集群及块设备测试

    集群环境 配置基础环境 添加ceph.repo wget -O /etc/yum.repos.d/ceph.repo https://raw.githubusercontent.com/aishang ...

  3. Python程序 #!/usr/bin/python 的解释

    关于脚本第一行的 #!/usr/bin/python 的解释,相信很多不熟悉 Linux 系统的同学需要普及这个知识,脚本语言的第一行,只对 Linux/Unix 用户适用,用来指定本脚本用什么解释器 ...

  4. 网络编程socket理论一

    网络通信理论 首先说下网络之间的通信流程看图 Socket 层是位于运输层和应用层之间的,封装好的,方便使用 Socket 是什么和工作流程 Socket是应用层与TCP/IP协议族通信的中间软件抽象 ...

  5. 18-C#笔记-继承

    1. 子类可以使用父类的成员和函数. 和C++不同,使用的是一个冒号 2. 不支持多重继承 但是可以通过接口(interface)这种结构实现.后续讲解. using System; namespac ...

  6. V2X:

    一篇文章读懂V2X系列:标准篇 为了提升交通系统的安全性和智能化,智能交通系统的概念正逐渐兴起.智能交通可以利用新一代的通信网络和数据处理能力,提高现有交通系统的整体效率,降低能量损耗,增加运输的安全 ...

  7. 2019 Nowcoder Multi-University Training Contest 4 E Explorer

    线段树分治. 把size看成时间,相当于时间 $l$ 加入这条边,时间 $r+1$ 删除这条边. 注意把左右端点的关系. #include <bits/stdc++.h> ; int X[ ...

  8. C++各大有名库的介绍——网络通信

    ACE是C++库的代表,超重量级的网络通信开发框架.ACE自适配通信环境(Adaptive Communication Environment)是可以自由使用.开放源代码的面向对象框架,在其中实现了许 ...

  9. awesome-RecSys

    https://github.com/jihoo-kim/awesome-RecSys?fbclid=IwAR1m6OebmqO9mfLV1ta4OTihQc9Phw8WNS4zdr5IeT1X1OL ...

  10. Java 抽象类 抽象方法 接口

    #抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化 ...