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. Zabbix监控多个JVM进程

    一.场景说明:   我们这边的环境用的是微服务,每个程序都是有单独的进程及单独的端口号,但用jps查询出来的结果有些还会有重名的情况,所以某些脚本不太适用本场景: 二.需求说明: 需使用Zabbix- ...

  2. javascript之DOM(三Element类型)

    Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...

  3. 项目1:ATM+购物商城项目

    项目1:ATM+购物商城 1.项目介绍 项目需求: # 项目需求如下:'''- 额度 15000或自定义​- 实现购物商城,买东西加入购物车,调用信用卡接口结账​- 可以提现,手续费5%​- 支持多账 ...

  4. Andriod Studio安装及使用

    创建Andriod项目 1.下载最新版的Andriod studio 2.在 Welcome to Android Studio 窗口中,点击 Start a new Android Studio p ...

  5. Scrapy笔记04- Selector详解

    Scrapy笔记04- Selector详解 在你爬取网页的时候,最普遍的事情就是在页面源码中提取需要的数据,我们有几个库可以帮你完成这个任务: BeautifulSoup是python中一个非常流行 ...

  6. docker概述和安装及基本操作

    一:概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用 ...

  7. ESA2GJK1DH1K基础篇: Android实现SmartConfig简单Demo

    下载源码去 百度安信可 导入源码 等待加载完 我的提示更新下软件 ,我就更新下 安装完成以后重新导入工程 安装到手机 注意,由于Android 9.0 以后的获取WIFI名称需要打开GPS,所以如果提 ...

  8. 【LG2567】[SCOI2010]幸运数字

    [LG2567][SCOI2010]幸运数字 题面 洛谷 题目大意: 问你区间\([L,R](1\leq L\leq R\leq 10^{10})\)中有几个数是仅由\(6,8\)组成的数的倍数. 题 ...

  9. PATA1005Spell It Right

    考虑输入为0的特殊情况 参考代码: #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<cstring> #in ...

  10. Java 解压 zip 文件

    代码如下 package test_java; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...