var data = {
data: [[320], [120], [220], [150]],
legend: ['华为', '中兴', '烽火', '瑞斯'],
} var option; var colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD']; option = {
color: colors,
legend: {
top: '35%',
left: '30%',
data: data.legend
},
grid: {
left: '15%'
},
xAxis: {
type: 'value',
show: false,
minorSplitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['各厂商端口占比'],
// 去除网格线
axisLine: {
show: false
},
// 去除刻度线
axisTick: {
show: false
}
},
series: [], };
for (var i = 0; i < data.data.length; i++) {
option.series.push({
name: data.legend[i],
type: 'bar',
stack: 'total',
barWidth: '30px',
label: {
show: true,
},
emphasis: {
focus: 'series'
},
data: data.data[i]
})
}

echarts——横向柱状堆叠图的更多相关文章

  1. java项目使用Echarts 做柱状堆叠图,包含点击事件

    基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...

  2. highchart柱状堆叠图动态数据请求

    $(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...

  3. Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题

    今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:

  4. 柱状堆积图Echarts

    Map<String,Object> map = new HashMap<String, Object>(); //图例的千人.双百 HashMap<String, St ...

  5. ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  6. highcharts 柱形堆叠图

    <!doctype html> <html lang="en"> <head> <script type="text/javas ...

  7. 可视化操作,实现横向柱形echart图 无边框

    图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  8. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  9. 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  10. 使用WinForm Chart控件 制作饼装,柱状,折线图

    http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...

随机推荐

  1. SQL Server迁移数据库文件(ldf&amp;mdf文件)到其他盘

    为什么 SQL Server安装时,默认都安装在C盘,包括数据库文件的默认位置也是C盘 一般路径是C:/Program Files/Microsoft SQL Server/MSSQL14.MSSQL ...

  2. rust vec排序

    一.sort let mut v = vec![4,3,3,1,2]; println!("{:#?}",v); v.sort(); println!("{:#?}&qu ...

  3. Min_25 Sieve 学习笔记

    这个东西不是人想的. 解决问题:积性函数前缀和. 适用条件:可以快速计算 \(f(p)\) 的前缀和,\(f(p^k)\) 可以被表示成若干完全积性函数的线性组合(指对应项可以快速组合出来). 时空复 ...

  4. gcc 内联汇编简介

    啊 啊 在内联汇编中,标识寄存器的一个%变成了两个% 啊 如图是内联汇编的模板 assembler template 是汇编代码 output operands TODO input operands ...

  5. K8s集群安全机制

    安全机制说明 k8s作为一个分布式集群管理的工具,保证集群的安全性是其一个重要的任务.API Server是集群内部各个组件通信的中介,也是外部控制的入口,,所以K8s的安全机制就是围绕保护API S ...

  6. shell脚本程序的撰写

    一.让我们浏览一下整体步骤第一步,你要先用ll命令来列出该目录中都包含那些文件(目的是为了防止文件重名不利于查找等等).第二步 ,使用命令touch来建立一个shell脚本文件 , 后缀名为.sh : ...

  7. VUE学习-过渡 & 动画

    过渡 & 动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScrip ...

  8. CSS3图片自适应各种尺寸的屏幕

    img {    max-width: 100%;    height: auto;} 设置最大宽度,高度自适应.

  9. SQL语句中索引失效的原因

    SQL语句中索引失效的情况. 总结如下: 1. 索引字段进行判空查询时.也就是对索引字段判断是否为NULL时.语句为is null 或is not null. select * from 表一 whe ...

  10. 力扣(leetcode)题库0001-python3

    试一下leetcode的题库,不知道对于我这种小白要多长时,但是目标已经种下,去做就是了.You can do anything you set your mind to. 题目:题库链接 中:给定一 ...