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轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
随机推荐
- Zabbix监控多个JVM进程
一.场景说明: 我们这边的环境用的是微服务,每个程序都是有单独的进程及单独的端口号,但用jps查询出来的结果有些还会有重名的情况,所以某些脚本不太适用本场景: 二.需求说明: 需使用Zabbix- ...
- javascript之DOM(三Element类型)
Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...
- 项目1:ATM+购物商城项目
项目1:ATM+购物商城 1.项目介绍 项目需求: # 项目需求如下:'''- 额度 15000或自定义- 实现购物商城,买东西加入购物车,调用信用卡接口结账- 可以提现,手续费5%- 支持多账 ...
- Andriod Studio安装及使用
创建Andriod项目 1.下载最新版的Andriod studio 2.在 Welcome to Android Studio 窗口中,点击 Start a new Android Studio p ...
- Scrapy笔记04- Selector详解
Scrapy笔记04- Selector详解 在你爬取网页的时候,最普遍的事情就是在页面源码中提取需要的数据,我们有几个库可以帮你完成这个任务: BeautifulSoup是python中一个非常流行 ...
- docker概述和安装及基本操作
一:概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用 ...
- ESA2GJK1DH1K基础篇: Android实现SmartConfig简单Demo
下载源码去 百度安信可 导入源码 等待加载完 我的提示更新下软件 ,我就更新下 安装完成以后重新导入工程 安装到手机 注意,由于Android 9.0 以后的获取WIFI名称需要打开GPS,所以如果提 ...
- 【LG2567】[SCOI2010]幸运数字
[LG2567][SCOI2010]幸运数字 题面 洛谷 题目大意: 问你区间\([L,R](1\leq L\leq R\leq 10^{10})\)中有几个数是仅由\(6,8\)组成的数的倍数. 题 ...
- PATA1005Spell It Right
考虑输入为0的特殊情况 参考代码: #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<cstring> #in ...
- Java 解压 zip 文件
代码如下 package test_java; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...