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. dismount ASM磁盘组,影响未使用的其它ASM磁盘组

    # 问题概述登录数据库,查看活动会话,发现大量library cache lock ,log file switch (archiving needed),归档失败,redo log无法重用.# 问题 ...

  2. TP3.2 I('post.') 获取到的参数特殊字符被自动转义

    eg:原数据 :&这是一条测试数据 被转义后的数据:&nbmp;  这是一条测试数据 解决办法: $input = json_encode(I('post.'));$input = h ...

  3. LP1-5:测试设计

    在接到产品需求进行开发前,怎么样才能最大程度的降低开发错误或明显bug的情况? 答案是在「开发前做设计」. 通常,一个功能的设计要包含几个方面: 1.已有功能情况 2.需求情况 3.数据库设计 4.接 ...

  4. 解决linux conda 命令行环境提示消失的方法

    之前不知道这么搞的,一不小心改了conda的默认设置,后面再登录的时候发现环境名字看不见了,用着很难受,为了解决这个问题,后面发现,应该是我改了changeps1这个设置,他默认是开着的,可以用下面的 ...

  5. npm install报错C:\Users\Guyang\AppData\Roaming\npm-cache\_logs\xxx-14T01_06_33_159Z-debug-0.log

    先看报错 可以看到报错提示,给了个日志路径 有的兄弟看到其他博客给了一个命令 npm cache clean --force 或者 npm config set strict-ssl false 说是 ...

  6. 一、100ASK_IMX6ULL嵌入式裸板学习_LED实验(中)

    以C语言方式驱动(例程与代码分析) 韦东山的例程: start.s部分: .text .global _start @全局标号 _start: //设置栈 ldr sp,=0x80200000 @设置 ...

  7. shell_Day04

    grep程序 Linux下有文本处理三剑客 -- grep sed awk grep:文本 行过滤工具 sed: 文本 行编辑器(流编辑器) awk:报告生成器(做文本输出格式化) grep 包含三个 ...

  8. Pycharm报错:Error running ‘‘: Cannot run program “\python.exe“ (in directory ““)系统找不到指定文件夹?已解决!

    问题报错 报错原因:我修改的工程的名称/或者移动了工程位置,运行导致找不到之前的运行路径 解决办法1.在该项目文件夹下找到一个叫.idea的文件夹.(若没有,选择显示隐藏项目,可能被隐藏了)PyCha ...

  9. sxt_(008_011)_servlet

    一.servlet简介 Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于 ...

  10. 字符串内特殊字符的替换处理,如对\n的替换

    一.对于字符串特殊字符的替换 对于字符串内,\n的处理,如何去掉 s='123,456\n' s1=s.strip('\n') s2=s.replace('\n','') print(s) print ...