echat 图表动态数据生成，渲染，自定义Y轴坐标值

小鱼儿 2022-12-05 01:36 439阅读 0赞

![在这里插入图片描述][2020090817292351.gif_pic_center]

## 重点： 后台返回的是数组，获取返回字符串，封装成js数组对象，否则echat数据无效 ##

## 自定义Y轴坐标，Y轴的比例数组跟，柱状图的MAX值与MIX值，必须设置，否则图标无效 ##

//Y轴比例数组
        var scaleArr=new Array([10, 20, 30, 40, 50, 60, 70, 80]);
        //柱状图最大值
        var scaleMaxY=80;
        //柱状图刻度值
        var scaleSplitNumber=9;
        
     //环比查询
        function momDateList(id,searchDate) { 
            //环比的Id
            var 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} ({d}%)'
                                },
                                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);
    
    
    
    
                    }
                }
    
            })
    
        }

[2020090817292351.gif_pic_center]: /images/20221123/965f64634e6f4308b5c37341b5e38031.png