echarts 折柱表混合图（折线，柱状图，表格）
效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div class="chart">
<div id="lineBar" style="width: 100%;height:400px;"></div>
</div>
<script>
var myCharte = echarts.init(document.getElementById('lineBar'));
const colors = ['#5b9bd5', '#ed7d31', '#a5a5a5'];
// 新关注人数
var newData = [2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 2, 4, 7, 23, 25, 76, 135, 162, 32, 20,2, 4, 7, 23, 25, 76, 135, 162, 32, 20]
// 取消关注人数
var cancelData = [1, 2, 2, 10, 6, 12, 30, 30, 18, 18, 1, 2, 2, 10, 6, 12, 30, 30, 48, 18,1, 2, 2, 10, 6, 12, 30, 30, 48, 18]
// 净增关注人数
var addData = [1, 2, 5, 13, 19, 54, 105, 132, 14, 2,1, 2, 5, 13, 19, 54, 105, 132, 14, 2,1, 2, 5, 13, 19, 54, 105, 132, 14, 2,]
// 最大日期数量 0 开始
var maxDate = 29;
// 日期
var dateDay = [];
for (var i=1;i<maxDate+2;i++) {
dateDay.push(`${i}日`)
} option = {
grid: {
x: 130,
y:45,
x2: 40,
y2: 170
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
legend: {
align: "right",
itemGap: 30,
orient: "vertical",
textStyle: {
color: "#000"
},
bottom: 10,
left: 0,
data: ["新关注人数", "取消关注人数", "净增关注人数"]
},
xAxis: [{
type: "category",
max: maxDate,
offset: 8,
interval: Math.ceil(12) / 12,
axisLabel: {
fontWeight: "bold",
show: true,
interval: 0, // 强制显示全部刻度名
textStyle: {
fontSize: "14px"
}
},
lineStyle: {
color: '#f00',
width: 1,
type: 'solid',
},
data: dateDay,
},
{//下方表格的竖线
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 45, // 向下偏移，使分组文字显示位置不与原x轴重叠
axisTick: {
length: -160, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {
color: "#999"
} // 非必须，仅为了演示，明显标示出分组刻度线
},
max: 29,
interval: 2,
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [""]
},
{//下方表格的竖线 第一条线
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 0, // 向下偏移，使分组文字显示位置不与原x轴重叠
axisTick: {
length: -160, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {
color: "#999"
} // 非必须，仅为了演示，明显标示出分组刻度线
},
max: 1,
data: [""]
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 36, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: 30,
axisTick: {
alignWithLabel: true,
},
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 75, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: maxDate,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: newData
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 120, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: maxDate,
interval: Math.ceil(12) / 12,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: cancelData
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 160, // 向下偏移，使分组文字显示位置不与原x轴重叠
max: maxDate,
interval: 0,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {
color: "#f00"
} // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: addData
},
],
yAxis: [{
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
fontSize: "14px"
}
},
axisLine: {
show:false,
},
axisTick:{
show: false
},
},
{
show:false,
}
],
series: [{
name: "新关注人数",
type: "bar",
data: newData,
itemStyle: {
color: colors[0]
}
},
{
name: "取消关注人数",
type: "bar",
data: cancelData,
itemStyle: {
color: colors[1]
}
},
{
name: "净增关注人数",
type: "line",
data: addData,
itemStyle: {
color: colors[2]
},
lineStyle: {
width: 2
}
},
]
};
myCharte.setOption(option);
</script>
</body>
</html>
echarts.js为本地的；
echarts 折柱表混合图（折线，柱状图，表格）的更多相关文章
- echarts 折柱混合图 （绑数据后）
html: <div class="flot-chart-content" id="flot-dashboard-chart"></div&g ...
- echarts折柱混合(图表数据与x轴对应显示)
一天24个小时,每个小时不一定都有对应的数据,所以后台给出的数据,只有每个时间点对应的数据,比如4点,给的是112,5点的242,其他时间没有,则只显示4点,5点时候的数据,那么现在对应的时间点就是后 ...
- echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影
上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始放大,很丑,这个时候我们可以设置其宽高来解决问题,给其设置宽高后,切换的奇怪效果即可消 ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- echarts多条折线图和柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- PHP实现动态生成饼状图、柱状图和折线图(转载)
PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复 ...
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- excel在一个图表内，显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
随机推荐
- HBase对表增查操作 API
public class HBaseDML { //静态属性 public static Connection conn = HBaseConnection2.conn; //添加数据 public ...
- 深度剖析生产工厂用ERP系统进行管理有哪些优势
对于生产制造企业而言,生产现场管理永远是其得以健康发展的重要环节.现场是产品开发和生产的场所,企业要降低成本.按期交付产品,以及产品质量要达到客户所期望的要求和水平,这一切都要在现场实现,企业也正是从 ...
- 【离线数仓环境搭建】安装linux及安装JDK
创建新的虚拟机 配置网络 安装vim sudo yum install -y vim 修改免密 sudo vim /etc/sudoers (执行安装命令的时候,不再需要输入密码) 查看防火墙状态 s ...
- 采样定理与SDM
1.信噪比=6.02N+1.76dB 对于这个经常引用的AD/DA转换器理论信噪比(SNR)公式,代表一个完美的N位ADC的理论性能.下面先计算N位模数转换器(ADC)的理论量化噪声.一旦通过计算均方 ...
- svn 中如何checkout出单个文件
A 通过命令行操作 1.检出目录images svn co --depth=empty http://www.iusesvn.com/project1/images images_work_dir 这 ...
- vue-cli2.0 项目前端不能用IP局域网访问，只能localhost访问
解决办法1.config/index.js 修改 host:'localhost'为'0.0.0.0' 解决办法2.package.json 修改启动配置 -- host 0.0.0.0 优化终端 ...
- Go语言的常用函数方法整理大全-实践总结
文章目录 前言 一.数据类型与相互转化 1.1 常用的数据类型 1.2 常用数据类型的转化 1.2.1 整形转字符串 1.2.2 字符串转整形 1.2.3 浮点转字符串 1.2.4 字符串转浮点 二. ...
- wpf dataGrid 获取单元格，并对单元格中的对象操作
先上图: 要求:对第一行的"选项内容举例..."的控件进行隐藏,如下: 前端代码: <Window x:Class="DataGridPractice.MainWi ...
- 关于服务器选择的chatgpt 的回答
I want to deploy linux as a server with low latency transactions. Which version of the operating sys ...
- mac os 11 Big Sur 根目录无法写入解决办法
本文目的是解决无法在 / 目录下创建目录的问题: 关闭SIP 重启机器,按住 command + R 选择 磁盘工具 在导航栏 窗口 中打开 终端 ,执行如下命令: csrutil status ## ...