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) {
        //环比的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);




                }
            }

        })

    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【资源说明】 基于spark+echarts实现的互联网行业数据大屏分析源码+项目说明(数据来源于前程无忧).zip 基于spark+echarts实现的互联网行业数据大屏分析源码+项目说明(数据来源于前程无忧).zip 基于spark+echarts实现的互联网行业数据大屏分析源码+项目说明(数据来源于前程无忧).zip 1、该资源内项目代码都是经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能。 数据分析基于Hadoop+Spark平台,数据大屏基于Echarts 数据源 基于多线程爬取。各个城市的精度data/BaiduMap_cityCenter.txt来源于百度地图开放平台,crawler/cityInfo.py含爬取前程无忧各个城市的编号,爬取的岗位关键字在data/job.csv,爬取代码crawler/qcwy.py,结果为/data/data.csv 数据分析 数据分析是基于spark平台,数据储存在hdfs上,开发环境是Jupyter,由于我的分布式平台是在虚拟机搭建的,所以本项目的各个模块(爬虫、数据分析、数据大屏)是分离的,将/data/data.csv上传至hdfs,分析代码位于/visual.ipynb,分析结果保存为json文件,将分析结果文件保存至data/。 数据大屏 因为数据均保存为静态数据,因此可以忽略数据爬取和数据分析这一部分代码,直接打开visual/index.html

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值