當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS制作没有Y轴的柱状图
生活随笔
收集整理的這篇文章主要介紹了
JS制作没有Y轴的柱状图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
因為疫情的原因，好久都沒有更新博客了，今天來一篇。直接先看一下效果吧：
實現(xiàn)邏輯：
<!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'));// 指定圖表的配置項和數(shù)據(jù)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:['累積', '新增']//數(shù)據(jù)說明},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: [//第二條數(shù)據(jù) 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 } ]};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script> </body> </html>總結
以上是生活随笔為你收集整理的JS制作没有Y轴的柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 腾讯新闻APP怎么赚钱(腾讯视频VIP会
- 下一篇： 一些JS优化小技巧