echarts——横向柱状堆叠图

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——横向柱状堆叠图的更多相关文章
- java项目使用Echarts 做柱状堆叠图,包含点击事件
基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...
- highchart柱状堆叠图动态数据请求
$(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...
- Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题
今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:
- 柱状堆积图Echarts
Map<String,Object> map = new HashMap<String, Object>(); //图例的千人.双百 HashMap<String, St ...
- ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图
作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...
- highcharts 柱形堆叠图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- 可视化操作,实现横向柱形echart图 无边框
图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- 使用WinForm Chart控件 制作饼装,柱状,折线图
http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...
随机推荐
- dismount ASM磁盘组,影响未使用的其它ASM磁盘组
# 问题概述登录数据库,查看活动会话,发现大量library cache lock ,log file switch (archiving needed),归档失败,redo log无法重用.# 问题 ...
- TP3.2 I('post.') 获取到的参数特殊字符被自动转义
eg:原数据 :&这是一条测试数据 被转义后的数据:&nbmp; 这是一条测试数据 解决办法: $input = json_encode(I('post.'));$input = h ...
- LP1-5:测试设计
在接到产品需求进行开发前,怎么样才能最大程度的降低开发错误或明显bug的情况? 答案是在「开发前做设计」. 通常,一个功能的设计要包含几个方面: 1.已有功能情况 2.需求情况 3.数据库设计 4.接 ...
- 解决linux conda 命令行环境提示消失的方法
之前不知道这么搞的,一不小心改了conda的默认设置,后面再登录的时候发现环境名字看不见了,用着很难受,为了解决这个问题,后面发现,应该是我改了changeps1这个设置,他默认是开着的,可以用下面的 ...
- 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 说是 ...
- 一、100ASK_IMX6ULL嵌入式裸板学习_LED实验(中)
以C语言方式驱动(例程与代码分析) 韦东山的例程: start.s部分: .text .global _start @全局标号 _start: //设置栈 ldr sp,=0x80200000 @设置 ...
- shell_Day04
grep程序 Linux下有文本处理三剑客 -- grep sed awk grep:文本 行过滤工具 sed: 文本 行编辑器(流编辑器) awk:报告生成器(做文本输出格式化) grep 包含三个 ...
- Pycharm报错:Error running ‘‘: Cannot run program “\python.exe“ (in directory ““)系统找不到指定文件夹?已解决!
问题报错 报错原因:我修改的工程的名称/或者移动了工程位置,运行导致找不到之前的运行路径 解决办法1.在该项目文件夹下找到一个叫.idea的文件夹.(若没有,选择显示隐藏项目,可能被隐藏了)PyCha ...
- sxt_(008_011)_servlet
一.servlet简介 Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于 ...
- 字符串内特殊字符的替换处理,如对\n的替换
一.对于字符串特殊字符的替换 对于字符串内,\n的处理,如何去掉 s='123,456\n' s1=s.strip('\n') s2=s.replace('\n','') print(s) print ...