前言

有一种情况需要在一个dom元素中画出多个上下排列的柱状图

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现的效果

二、参数代码

const datas = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];const dateList = datas.map(function (item) {return item[0];
});
const valueList = datas.map(function (item) {return item[1] > 90 ? 0 : 1;
});
const valueList1 = [...valueList].reverse();const titleNameY = ['净化器', '净水器'];
const titleName = ['图表1', '图表2'];
const colors = ['#EE6666', '#91CC75', '#5470C6', '#80FFA5', '#00DDFF', '#37A2FF', '#FFBF00','#000'];option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},axisPointer: { // 同时出现提示竖线link: { xAxisIndex: 'all' }},xAxis: [{show:false,data: dateList,name: '时间',axisLine: {show: true,symbol: ['none', 'arrow'], // 显示箭头的位置symbolOffset: [0, 12], // 箭头位置的偏移量lineStyle: {color: colors[7]}}}, {data: dateList,name: '时间',axisLine: {// show: true,// symbol: ['none', 'arrow'], // 显示箭头的位置// symbolOffset: [0, 12], // 箭头位置的偏移量lineStyle: {color: colors[7]}},gridIndex: 1}],yAxis: [{name: titleNameY[0],nameRotate: '0',nameLocation: 'center',nameGap: 30,  // 表现为上下位置nameTextStyle: {padding: [0,0,0,35]},axisLine: {show: false,symbol: ['none', 'arrow'],lineStyle: {color: colors[5]}},axisLabel: {show: false,},splitLine:{ // 不显示网格线show:false},}, {name: titleNameY[1],nameRotate: '0',nameLocation: 'center',nameGap: 30,  // 表现为上下位置nameTextStyle: {padding: [0,0,0,35]},axisLine: {show: false,lineStyle: {color: colors[5]}},axisLabel: {show: false,},splitLine:{ // 不显示网格线show:false},gridIndex: 1}],grid: [{ // 调整每个图表的位置top: '10%',bottom: '50%',}, {top: '51%',bottom: '10%',}],series: [{name: titleName[0],type: 'bar',barCategoryGap:'5%', // 设置柱柱子之间的间距showBackground: true,areaStyle: {},itemStyle: {color: colors[4]},lineStyle: {color: colors[4],width: 3},showSymbol: false,data: valueList,}, {name: titleName[1],type: 'bar',barCategoryGap:'5%',showBackground: true,showSymbol: false,data: valueList1,itemStyle: {color: colors[4]},lineStyle: {color: colors[4],width: 3},xAxisIndex: 1,yAxisIndex: 1}]
};

总结

如果这边文章有表述不清楚的地方，请小伙伴留言或评论指出。

Echarts 实现在一个画布中画出多个上下排列柱状图相关推荐

python如何画出多个独立的图片_python实现在一个画布上画多个子图
matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. 均匀画图使用import导入matplotlib.pyplot模块, 并简写成plt. 使 ...
python创建画布与子图_python实现在一个画布上画多个子图
今天小编就为大家分享一篇python实现在一个画布上画多个子图,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. ...
学术大咖教你一个轻松在论文中画出漂亮插图的方法
在撰写论文的过程中,一张精美的论文配图是你的加分项.俗话说:"好马配好鞍",一张规范的高质量配图也是发表高水平论文的必备条件,使用得当的话一定能让你的论文如虎添翼.当我们仔细分析那 ...
R语言可视化包ggplot2在一张图中画出两条线实战
R语言可视化包ggplot2在一张图中画出两条线实战目录 R语言可视化包ggplot2在一张图中画出两条线实战
如何在科研论文中画出漂亮的插图？（附代码）
来源:机器学习实验室本文约3300字,建议阅读5分钟. 本文给大家推荐几种在论文中画出漂亮的插图的方法. 方法一强烈推荐 Python 的绘图模块 matplotlib: python plott ...
python画三维立体图-如何在论文中画出漂亮的插图？
----2020.08.07增---- 看到评论区有人说"没代码没教程所以没帮助"-- 好吧,我寻思链接.参考资料都在回答中给出来了呀(可能不够明显?) 于是,重新整理.注释了一下 ...
python求近似值_python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配...
已知一个元素,在一个list中找出相似的元素使用场景: 已知一个其它来源的字符串, 它有可能是不完全与我数据库中相应的字符串匹配的,因此,我需要将其转为适合我数据库中的字符串使用场景太绕了, 直接 ...
python画笔的尺寸_Matplotlib 常用画图命令总结：使用 Python 在论文中画出一手漂亮的数据图...
介绍本文不是一篇详尽的.从简到繁的 Maplotlib 画图教程,而是用各种例子快速直观地让读者上手 Matplotlib 画图中的一些常用的.基础的操作.本文不对各种数据图(折线图.柱状图等)作介 ...
用python绘制y=x,y=1+sinx,编写Python程序，使用numpy、pandas、matplotlib三个扩展库在一个画布中绘制4个子图.
目录 1.编写Python程序绘制y=x图. 2.绘制表达式为1+sin(x)的图. 3.编写Python程序,使用numpy.pandas.matplotlib三个扩展库在一个画布中绘制4个子图,分 ...

Echarts 实现在一个画布中画出多个上下排列柱状图

文章目录

前言

一、实现的效果

二、参数代码

总结

Echarts 实现在一个画布中画出多个上下排列柱状图相关推荐

最新文章

热门文章