JS制作没有Y轴的柱状图

因为疫情的原因，好久都没有更新博客了，今天来一篇。直接先看一下效果吧：

实现逻辑：


<!DOCTYPE html>
<html>
<header><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
</header>
<body><!-- 为 ECharts 准备一个具备大小（宽高）的Dom --><div id="main" style="width: 100%;height:250px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {barWidth:30,//条形的宽的为30tooltip: {},grid: {  left: '0',  right: '0',  bottom: '1%',  containLabel: true  },toolbox: {feature : {mark : {show: false},//控制辅助线}},legend: {//说明//orient: 'vertical', //说明显示在的位置所在// center: 'center ',//说明的位置居中显示 默认居中横排显示data:['累积', '新增']//数据说明},xAxis: {//X轴上的内容type : 'category',splitLine:{show:false},splitNumber:0,axisLabel:{//横坐标上的文字斜着显示 文字颜色 begininterval:0,rotate:0,margin:0,textStyle:{color:"#333" }//横坐标上的文字换行显示 文字颜色end},type : 'category',data: ['1k&1V3', '2k&1V3', '','1k&1V3', '4k&1V5', '','3k&1V3'].map(function (str) {return str.replace('&', '\n')}),},yAxis: {//Y轴上的内容type : 'value',show : false,splitLine:{show:false},axisLabel : {formatter: function(){return "";}}},series: [//第二条数据 begin    {type: 'bar',
//                     name:'新增',barWidth:40,barGap:'10%',barCategoryGap:'10%',data: [510, 400, 300, 200, 100,300,200],//柱状条颜色的设置为#eb6768 beginitemStyle: {normal: {color: '#3b8ede',shadowBlur: 2,shadowColor: 'rgba(3, 3, 4, 0.5)'}}//柱状条颜色的设置为#eb6768  end    }  ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

JS制作没有Y轴的柱状图相关推荐

d3.js多个x轴y轴canvas柱状图
d3.js多个x轴y轴canvas柱状图最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
python之matplotlib制作双Y轴图含详细代码解释
前言:好久没更新啦,最近在参加OCALE全国跨境电商大赛,今天更新的内容是python制作双Y轴图片. 目录一.函数介绍二.实际应用 2.1 实验数据展示 2.2 代码实现: 2.3 最终结果显示 ...
Excel 2007 制作双Y轴图形
老是忘记excel的双Y轴图如何制作,今天特地将其记录下来,用以备忘. 1.基础数据如下: 月份 A B B/A 一月 1003882353 773056409 77.01% 二月 798266517 ...
实现正负值及多条Y轴 Echarts柱状图
正负值及多条Y轴话不多说,直接上代码 let xData = ['语文', '数学', '英语', '地理', '物理', '化学', '生物'] let yData = [320, 302, -3 ...
python 并列柱状图双y轴
效果: 代码: import matplotlib.pyplot as pltsimilarity = [0.651, 0.802, 0.86] # similarity of action dive ...
【科研绘图Origin】制作一个双Y轴曲线图
制作双Y轴曲线图 2022/04/29更新最终效果图 1.导入数据 2.设置上轴 3.设置右轴 4.将曲线对应两个图层 5.修改图例 6.美化坐标轴曲线图例最终结果 2022/04/29更新 ...
origin做双Y轴折线图的具体步骤
1.导入数据: file-->Open excel 选择自己的数据集 2.插入图表 :plot-->Line-->Line,这是会弹出一个对话框: 3.通过导入的数据进行建图, 选择 ...
echarts y轴只显示5个刻度_Echarts 双Y轴刻度不一致
项目中使用了百度Echarts 根据项目需要,要实现双Y轴展示柱状图最终的样子是这样的最终效果实现过程中遇到的问题一开始是这个样子的(因为没有设置max min,天真的以为只要有数据,就会系 ...

JS制作没有Y轴的柱状图

JS制作没有Y轴的柱状图相关推荐

最新文章

热门文章