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 ...
随机推荐
- Mogeaver 连接数据库
下载安装Mogeaver是一款开源软件,下载地址如下:https://docs.mogdb.io/zh/mogdb/v3.0/mogeaver-release-notes 根据您的操作系统选择相应的安 ...
- nginx 安全漏洞(CVE-2021-23017) 版本升级
查看当前nginx版本信息 # ./sbin/nginx -V nginx version: nginx/1.20.1 built by gcc 4.8.5 20150623 (Red Hat 4.8 ...
- 测开-面试题-OS、Linux、算法、其他
1 OS 1.1 进程.线程.协程区别? 答: 1.进程是资源分配的单位:2.线程是CPU调度的单位:3.协程是一种比线程更加轻量级的存在,协程不是被操作系统内核所管理,而完全是由程序所控制(也就是在 ...
- cenots7 rpm 包升级ssh
rpm下载地址 也可以自行官网下载 链接: https://pan.baidu.com/s/1S945MehpmZbIriKK6l7Sfw 提取码: y5ua centos7rpm包升级ssh 逻辑思 ...
- MapReduce原理——Shuffle机制
在Map方法之后,Reduce方法之前的数据处理过程称之为Shuffle. Map方法输出的数据会获得对应的分区,进入环形缓冲区(缓冲区一半写索引,另一半写数据).数据达到缓冲区的80%会发生溢写.在 ...
- 如何在Axure RP 8.0 中打开页面指定的动态面板
有时在制作原型的时候,需要打开另一个页面指定的动态面板,研究了一下分享给大家 方法/步骤 1.打开Axure RP 8.0,在index面面中拖出来一个按钮,写上文字"打开page1/sta ...
- js中的加法运算
- 树莓派Raspbian 玩耍
树莓派Raspbian玩耍 把第一次安装树莓派并通过花生壳实现内网穿透的过程记录下来 下载工具 Win32DiskImager v0.9.zip 和 SD Formatter 4.0 for SD/S ...
- 浅谈dfs深度优先搜索
深度优先搜索(Depth First Search)是一种常见的暴力算法 此算法上限和下限较高,容易上手,适用情形多,学习性价比高 下限高于有固定的模板,且时间复杂度明显优于暴力枚举,容易拿到题目部分 ...
- Java笔记_递归回溯之小老鼠出迷宫问题
递归回溯之小老鼠出迷宫问题 直接看代码 /** * @ClassName MiGong01 * @Description TODO * @Author Orange * @Date 2021/4/16 ...