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. 多个mysql版本并行运行

    mysql管理工具:mysql服务器需要客户端连接到服务器上进行管理.客户端有可能是个软件,也有可能是个java程序 安装mysql启用服务起别名+登录账号①mysqld install -m8;ne ...

  2. python命令行开发--click

    目录 前言 安装 快速上手 参考文档 前言 按照官方的介绍:Click 是一个利用很少的代码以可组合的方式创造优雅命令行工具接口的 Python 库. 它是高度可配置的,但却有合理默认值的" ...

  3. 蓝桥杯题目——翻硬币无需修改‘*’与’o‘的特殊解法及其所包含的思想

    前言 本文介绍蓝桥杯题目--翻硬币的一种无需对字符串进行操作的解法及该解法所包含的思想. 题目信息 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可 ...

  4. SQL group by date (hour),数据库按小时分组统计数据量

    SELECT COUNT(1), TRUNC(BEGINTIME, 'HH24') FROM TASK -- WHERE BEGINTIME > '2022-03-01' GROUP BY TR ...

  5. thymeleaf checkbox的回显

    最近用到了一些thymeleaf 的界面,有写问题一并写出来,如果这篇文章能给你带来帮助不胜荣幸,如果有问题,也请予以批评和改正 第一就是涉及到复选框的一个回显:例如我是单个复选框的是否选中 在< ...

  6. plugin的原理

    plugin插件的原理 扩展webpack, 加入自定义的构建行为 webpack内部的钩子 hooks tap: 可以注册同步钩子和异步钩子 tapAsync: 回调方式注册异步钩子 tapProm ...

  7. node版本和用的包不兼容问题,头疼

    经常遇到node版本和包不兼容的问题,在茫茫大海中学习的时候发现一个nvm,可以随时切换node版本,简直不要太开心,附上流程 环境windows 首先:下载一个nvm包https://github. ...

  8. C# 调用Web Api通用方法

    1.通用方法 public class GetDataByWebApi { /// <summary> /// 通过web api获取数据的方法 /// </summary> ...

  9. jekins+shell

    1.安装jekins,常规的有直接下载war包,或者安装docker版本的安装. 2.启动命令 #war版本启动 nohup java -jar jenkins.war --ajp13Port=-1 ...

  10. 反射的学习笔记--sql语句生成

    学生实体类 public class Student { public int Id { get; set; } public string Name { get; set; } public int ...