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. python ( 进阶 第一部 )

    目录 列表的相关操作与函数 字符串的相关操作与函数 集合相关操作与函数 字典相关操作与函数 深浅拷贝 文件操作 列表的相关操作 列表的拼接 lst1 = [1,2,3] lst2 = [4,5,6,6 ...

  2. elasticsearch 安装与配置

    一.JAVA 与 elasticsearch 的版本对应 个人实测能够对应起来的版本: elasticsearch-rtf-2.2.1 需要 JDK7 或更低的版本,推荐使用 7 elasticsea ...

  3. 两张表合并到一个VO里面

    @Overridepublic List<TbRemouldAirELe> findAll() { List<TbRemouldAirELe> list = new Array ...

  4. .Net简单使用了一下Redis

    书接上回!!! 创建控制台应用 管理NuGet程序包 下载ServiceStack.Redis 最后写代码 1 class Program 2 { 3 static RedisClient redis ...

  5. 基于GPU 显卡在k8s 集群上实现hpa 功能

    前言 Kubernetes 支持HPA模块进行容器伸缩,默认支持CPU和内存等指标.原生的HPA基于Heapster,不支持GPU指标的伸缩,但是支持通过CustomMetrics的方式进行HPA指标 ...

  6. 解读gitee上的vue3开源项目,并记录不熟悉的API

    1.vue中的getCurrentInstance: 在Vue3中,getCurrentInstance()可以用来获取当前组件实例: 2.vue中使用mitt实现兄弟组件传值: 在vue3中$on, ...

  7. task 子线程添加数据到主线程 winfrom

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Unity UI 识别画圆手势

    最近做了一个项目,需要打开一个编辑UI,平时不显示,如果在UI界面上做一个按钮,感觉很丑,就想到了Reporter_Logs的画圆触发. 识别到你在界面上画了一个圆 (可用于 Windows 和 An ...

  9. (app笔记)Appium如何开启、配置、启用

    1.安装adb 2.打开手机调试 3.连接手机 4.appium运行前,手机需要io.appium.uiautomator2.server 和 Appium Settings. 5.appium操作: ...

  10. iOS开发之权限申请说明key

    我们申请不同的权限需要对应的key,在info.plist内加上对用户的提示语 麦克风权限 NSMicrophoneUsageDescription 相机权限 NSCameraUsageDescrip ...