奇葩問題天天有 今天要做一個柱形圖和折線圖在一個坐標軸上
先上個參考的地址
大佬地址
唔 為什么別人有了還要再寫呢 1是以后好找 ；2是研究過的才是自己的
先上個圖片

然后上代碼

這個也是扒過來的 尷尬上圖地址
html

<!--引入在尾部--> <th:block th:include="include :: echarts-js"/><div class="ibox float-e-margins col-sm-12"><div class="ibox-content "><div class="echarts " style="height: 550px;" id="echarts-line-chart"></div></div></div>

script

function save(param) {var selectZhu = {type: "post",url: "/reports/echartData",data: param,success: function (r) {var lineChart = echarts.init(document.getElementById("echarts-line-chart"));var lineoption = {title: {text: "訪問數據統計",textStyle: {color: "#000",fontSize: 26},},tooltip: {trigger: "axis",},grid: {top: "25%",right: "45",bottom: "20",left: "30"},legend: {data: r.dataY,top: "0%",textStyle: {color: "black" //圖例文字}},xAxis: [{type: "category",data: r.dataX,axisLine: {lineStyle: {color: "#939495"}},axisLabel: {textStyle: {color: "#939495", fontSize: "14"}}}],yAxis: [{type: "value",name: "訪問數",splitLine: {show: false},axisLabel: {show: true,fontSize: 14,color: "#939495"},axisLine: {min: 0,max: 10,lineStyle: {color: "#939495"}} //左線色},{type: "value",name: "",show: true,axisLabel: {show: true,fontSize: 14,formatter: r.dataX,color: "#939495"},axisLine: {lineStyle: {color: "#939495"}}, //右線色splitLine: {show: false,lineStyle: {color: "#939495"}} //x軸線}],series: [{name: '訪問次數',type: 'bar',data: “x軸數據”,itemStyle: {normal: {color: '#4ad2ff'}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '訪問次數'}]}}, {name: '訪問次數',type: 'line',data: “y軸數據”,itemStyle: {normal: {color: 'orange'}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '訪問次數'}]}}]};lineChart.setOption(lineoption);window.onresize = lineChart.resize;}}$.ajax(selectZhu)}

要想直接進入就出現

$(function () {save(null);})

后臺返回的數據是兩個list 一個是x軸一個是y軸

css

.ibox h3 {float: left;color: #000;font-size: 24px;}.ibtn h3 {color: #000;font-size: 24px;border-bottom: 1px solid #e7eaec;padding-bottom: 10px;}.ibox button {float: right;width: 100px;height: 30px;line-height: 30px;text-align: center;color: #744dfe;border: 0;background: #ede8fe;outline: none;border-radius: 5px;font-size: 16px;}.top div {width: 24%;float: left;margin: 30px 1% 0 0;padding: 40px 50px;border-radius: 10px;color: #ffffff;font-size: 24px;}.top div span {font-size: 40px;display: block;margin-top: 20px;padding-left: 10px;}.top div:nth-child(4) {margin-right: 0;}.ibox {float: left;box-shadow: 5px 5px 15px #eeeeee;border-radius: 10px;background: #ffffff;padding: 30px;margin-top: 10px;height: 725px;}.ibox-content {height: 500px;}.ibtn button img {height: 130px;}.ibtn button span {padding: 0 10px;}.ibtn button {width: 40%;margin: 30px 1% 10px 4%;height: 120px;line-height: 120px;border: 0;background: #f9f9f9;color: #000000;font-size: 24px;border-radius: 10px;}.ibtn button:nth-child(1) {margin-left: 7%;}

又是努力的一天
加油！！！

總結

以上是生活随笔為你收集整理的柱形图和折线图在一个坐标轴ECharts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。