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 ...