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 ...
随机推荐
- 多个mysql版本并行运行
mysql管理工具:mysql服务器需要客户端连接到服务器上进行管理.客户端有可能是个软件,也有可能是个java程序 安装mysql启用服务起别名+登录账号①mysqld install -m8;ne ...
- python命令行开发--click
目录 前言 安装 快速上手 参考文档 前言 按照官方的介绍:Click 是一个利用很少的代码以可组合的方式创造优雅命令行工具接口的 Python 库. 它是高度可配置的,但却有合理默认值的" ...
- 蓝桥杯题目——翻硬币无需修改‘*’与’o‘的特殊解法及其所包含的思想
前言 本文介绍蓝桥杯题目--翻硬币的一种无需对字符串进行操作的解法及该解法所包含的思想. 题目信息 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可 ...
- SQL group by date (hour),数据库按小时分组统计数据量
SELECT COUNT(1), TRUNC(BEGINTIME, 'HH24') FROM TASK -- WHERE BEGINTIME > '2022-03-01' GROUP BY TR ...
- thymeleaf checkbox的回显
最近用到了一些thymeleaf 的界面,有写问题一并写出来,如果这篇文章能给你带来帮助不胜荣幸,如果有问题,也请予以批评和改正 第一就是涉及到复选框的一个回显:例如我是单个复选框的是否选中 在< ...
- plugin的原理
plugin插件的原理 扩展webpack, 加入自定义的构建行为 webpack内部的钩子 hooks tap: 可以注册同步钩子和异步钩子 tapAsync: 回调方式注册异步钩子 tapProm ...
- node版本和用的包不兼容问题,头疼
经常遇到node版本和包不兼容的问题,在茫茫大海中学习的时候发现一个nvm,可以随时切换node版本,简直不要太开心,附上流程 环境windows 首先:下载一个nvm包https://github. ...
- C# 调用Web Api通用方法
1.通用方法 public class GetDataByWebApi { /// <summary> /// 通过web api获取数据的方法 /// </summary> ...
- jekins+shell
1.安装jekins,常规的有直接下载war包,或者安装docker版本的安装. 2.启动命令 #war版本启动 nohup java -jar jenkins.war --ajp13Port=-1 ...
- 反射的学习笔记--sql语句生成
学生实体类 public class Student { public int Id { get; set; } public string Name { get; set; } public int ...