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. Nginx 同一个域名自动识别 pc h5

    首先设置环境变量 我们先设置变量,通过判断来改变变量的值(注: 我写在server中) set $is_mobile false; # 初始值 if ( $http_cookie ~* "A ...

  2. KCL 语言和 YAML 字符串的区别是什么?一文完全解答

    什么是 YAML YAML 是一种数据序列化语言,通常用于编写配置文件.YAML 代表另一种标记语言或YAML 不是标记语言(递归首字母缩写词),YAML 通常用于数据,而不是文档.YAML 还是一种 ...

  3. sd 买送服务,自动带出销售订单行项目

    需要先配置自动带出一行行项目,然后增强代码里去修改带出来的数量,注意事务码的判断,不然影响程序效率 FV45PF0N_NATRAB_SELECTION IF SY-TCODE = 'VA03'. EL ...

  4. 微信小程序(开发某些方式)

    1.开发工具:微信小程序开发工具(需要appid登录)2.调试:可使用微信开发者工具预览(用真机测试)3.真机调试:微信开发者工具真机调试(可打印以及查看网络等)4.扫一扫功能:   1.小程序里面可 ...

  5. 在ubuntu的docker中apt-get update更新失败:GPG error: https://developer.download.nvidia.cn/compute/cuda/repos/ubuntu180,,,,,

    在ubuntu的docker中执行apt-get update时报错 : W: GPG error: https://developer.download.nvidia.cn/compute/cuda ...

  6. ibatis批量数据入库sql

    ibaits 批量数据入库sql <insert id="waiter.insertBatch" parameterClass="java.util.List&qu ...

  7. 蓝牙mesh组网实践(节点功能介绍)

    目录 未配网设备在配好网,被纳入网络后,可称之为节点. 蓝牙mesh网络中,节点可以有选择地支持四大功能--朋友.低功耗.转发.代理功能,可以复用多个功能(由于单片机硬件限制,ch582除了复用转发功 ...

  8. for/in 语句用于循环对象属性

    for/in 语句用于循环对象属性. 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in  ...

  9. 4、Normal Equation 的向量投影解法与几何和直觉解释

    参考:https://zhuanlan.zhihu.com/p/269232332 在线性回归的正交方程 ( Normal Equation )推导一文中提到使用 向量投影 的方法一步就能推导出 正交 ...

  10. mybatis判断是否为空或null

    <if test="catagoryCode != null and catagoryCode != ''"> AND train.CATAGORY_CODE = #{ ...