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 ...
随机推荐
- ftpget
Usage: ftpget [OPTIONS] HOST [LOCAL_FILE] REMOTE_FILE ftpget -u user -p passwd ip LOCAL_FILE REMOTE_ ...
- fabric学习笔记11
fabric学习笔记10 20201303张奕博 2023.1.23 测试实践2 导入链码依赖包 package main import ( "github.com/hyperledger/ ...
- 【C学习笔记】day5-1 完成猜数字游戏
#include <stdio.h> #include <stdlib.h> int main() { int s = 0; srand((unsigned)time(NULL ...
- linux升级系统内核
1. 查看老版本系统内核 2. 升级内核 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www. ...
- 如何使用新版bing(支持ChatGPT)
就在今天,2023年2月8日,微软正式将ChatGPT引入Bing 搜索引擎迎来新时代 如何体验支持ChatGPT的新版bing? 一.重要说明 请自备TiZi 本文以PC端为例 目前,新版 Bing ...
- Linux Conda 使用activate无法进入环境,但list中有环境的路径
安装OpenFace时装了个miniconda,之后就进不去anaconda的其它环境了: (pfld) .....$ conda env list # conda environments: # / ...
- postman-增加全局环境变量
var jsonData = pm.response.json(); var accessTokenForMip = jsonData.data.access_token; //tests[acces ...
- apollo兼容mysql的时候报错Table 'apolloportaldb.hibernate_sequence' doesn't exist
解决方案: 配置文件里加: spring.jpa.properties.hibernate.hbm2ddl.auto=update
- win10 优化关键字
powercfg -duplicatescheme e9a42b02-d5df-448d-aa00-03f14749eb61 通知和操作 自动维护 存储 个性化 透明效果 启动 登录选项 更新或重启后 ...
- 1. mongodb基础:cursor.forEach使用
mongosh下载地址: https://downloads.mongodb.com/compass/mongodb-mongosh-shared-openssl3-1.6.0.x86_64.rpm? ...