echat 图表动态数据生成,渲染,自定义Y轴坐标值
生活随笔
收集整理的這篇文章主要介紹了
echat 图表动态数据生成,渲染,自定义Y轴坐标值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
重點: 后臺返回的是數組,獲取返回字符串,封裝成js數組對象,否則echat數據無效
自定義Y軸坐標,Y軸的比例數組跟,柱狀圖的MAX值與MIX值,必須設置,否則圖標無效
<td class="tab-border"><div id="passenger_yoy_main1" style="width: 24vw;height:25vh;"></div></td> //Y軸比例數組var scaleArr=new Array([10, 20, 30, 40, 50, 60, 70, 80]);//柱狀圖最大值var scaleMaxY=80;//柱狀圖刻度值var scaleSplitNumber=9;//環比查詢function momDateList(id,searchDate) {//環比的Idvar searchId=id.replace(/[^0-9]/ig,"");//構建柱狀圖var passengerMomBarChartMainChart = echarts.init(document.getElementById('passenger_mom_barchart_main'+searchId));//構建圖表var passengerMainChart = echarts.init(document.getElementById("passenger_mom_main"+searchId));//加載數據時的圈圈passengerMainChart.showLoading();passengerMomBarChartMainChart.showLoading();var option ={};$.ajax({url: "#(path)/manager/censusManager/dtStatisticBusiness/AA",data: {searchColumn: searchColumn,searchDate: searchDate},type: "POST",success: function (data1) {//隱藏圈圈passengerMainChart.hideLoading();passengerMomBarChartMainChart.hideLoading();if (data1.msg == "success") {var option ={tooltip: {trigger: 'item',//數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。// formatter: '{a} <br/>{b} : {c} (ze8trgl8bvbq%)'},series: [{// name: '訪問來源',type: 'pie',radius: '40%',center: ['50%', '50%'],data: data1.dataList,}]};passengerMainChart.setOption(option);//將總量存到數組中var initBarChatArr=new Array(data1.synthesizeNum);var barChartOption = {grid:{//left:'8%',//right:'0',bottom:'1%',//containLabel:true//常用于『防止標簽溢出』的場景},xAxis: {type: 'category',data: ['Mon'],show:false,//不顯示坐標軸線、坐標軸刻度線和坐標軸上的文字axisTick:{show:false//不顯示坐標軸刻度線},axisLine: {show: false,//不顯示坐標軸線},axisLabel: {show: false,//不顯示坐標軸上的文字}},yAxis: {data: scaleArr, //動態刻度表type: 'value',max: scaleMaxY, //動態設置最大值 一定要設置,否則圖表失效min: 0, //最小值splitNumber:scaleSplitNumber, //9個刻度線,也就是8等分(刻度線data-1)show: false,splitLine: {show: false}},series: [{data: initBarChatArr,type: 'bar',barWidth:20,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'},itemStyle: {normal: {label: {show: true, //開啟顯示position: 'top', //在上方顯示textStyle: { //數值樣式color: 'black',fontSize: 12}}}},}]};passengerMomBarChartMainChart.setOption(barChartOption);}}})} 與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的echat 图表动态数据生成,渲染,自定义Y轴坐标值的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 专科 java转go 翱翔之路(四)协议
- 下一篇: java Poi导入exel表格的数据,