根据x坐标选择一段echarts显示（移动滑块）/截取一段

最新推荐文章于 2024-05-21 10:20:19 发布
最新推荐文章于 2024-05-21 10:20:19 发布
阅读量875 收藏
点赞数
分类专栏： 个人学习_本科生 html/css 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45128278/article/details/103553069
版权

定位和截取都完成啦
java_index.js

//动态添加option
var SVG_NS = 'http://www.w3.org/2000/svg';
var wholepanel = document.getElementById("wholezoom");
var zoom_num = document.getElementById("zoom_num");
var bjtime=5000;//5s  报警时长
var i=3;//全局变量，id值不断增大

//删除option元素

//前端增加数据并提交
function add_shuju(){
    // var select_cs=$("#attr_select").val();//拿到参数名的内容
    var options=$("#attr_select option:selected");
    var diqu=options.val();//拿到数据的值  比如地区1 地区2
    var shuju1=$("#shuju1").val();//拿到数据的内容
    var shuju2=$("#shuju2").val();//拿到数据的内容
    var shuju3=$("#shuju3").val();//拿到数据的内容
    var shuju4=$("#shuju4").val();//拿到数据的内容
    var shuju5=$("#shuju5").val();//拿到数据的内容
    $.ajax({
        url: "/add_data",
        data:{
            diqu:diqu,
            shuju1:shuju1,
            shuju2:shuju2,
            shuju3:shuju3,
            shuju4:shuju4,
            shuju5:shuju5
        },
        dataType: "json",//数据格式
        type: "post",//请求方式
        async: false,//是否异步请求
        success: function (data) {   //如果请求成功，返回数据。
            alert("添加成功!");
            if(diqu=="地区1") {trandata(1);}if(diqu=="地区2") {trandata(2);}if(diqu=="地区3") {trandata(3);}
            if(diqu=="地区4") {trandata(4);}if(diqu=="地区5") {trandata(5);}

        },
        error : function(data) {
            alert("添加失败"+data.responseText);
        }

    })

}

//创建折线图

var rownum;
var columnnum;
var title;
function bld_echarts(id) {
    var gid=id;
    var sid;
//设置标题
    if(gid==("c1")){ title="地区1"; }
    else if(gid==("c2")) { title="地区2"; }else if(gid==("c3")) { title="地区3"; }else if(gid==("c4"))
    { title="地图4"; }else if(gid==("c5")) { title="地区5"; }else { title="error"; }
    if(gid==("c1"))
    {
        var myChart = echarts.init(document.getElementById("show_e1"));
        sid=document.getElementById("show1");
    }else if(gid==("c2"))
    {
        var myChart = echarts.init(document.getElementById("show_e2"));
        sid=document.getElementById("show2");
    }else if(gid==("c3"))
    {
        var myChart = echarts.init(document.getElementById("show_e3"));
        sid=document.getElementById("show3");
    }else if(gid==("c4"))
    {
        var myChart = echarts.init(document.getElementById("show_e4"));
        sid=document.getElementById("show4");
    }else if(gid==("c5"))
    {
        var myChart = echarts.init(document.getElementById("show_e5"));
        sid=document.getElementById("show5");
    } else alert("弹出错误");
    if(sid.style.display=="none"){
        // $("#show1").css("width",wid);
        // $("#show1").css("height",hei);
        sid.style.display="block";//显示div
    }
    else if(show1.style.display=="block"){
        sid.style.display="none";//隐藏div
    }

}

//页面刚加载完时给每个区域都显示好并隐藏。
window.onload= function () {
   trandata(1);trandata(2);trandata(3);trandata(4);trandata(5);
}

    function trandata(diquid){
    var myChart = echarts.init(document.getElementById("show_e"+diquid));
    $.ajax({
        url: "/ech_data",
        data:{
            diquid:diquid,
        },
        dataType: "json",//数据格式
        type: "post",//请求方式
        async: false,//是否异步请求
        success: function (data) {   //如果请求成功，返回数据。
            // alert(JSON.stringify(data.data1));
            // alert(JSON.stringify(data.x_data));
            var titleup="地区"+diquid;
            myChart.setOption({
                title: {
                    text: titleup,
                },tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    right: '20px',

                    feature: {
                        dataView: {
                            show: true,
                            title: '数据视图',
                            //readOnly: true, //设置只读，会隐藏刷新按钮。
                            lang: ['数据视图', '关闭', '导出Excel'],
                            contentToOption: function (opts) {
                                $("#tableExcel_Day").table2excel({
                                    exclude: ".noExl", //过滤位置的 css 类名
                                    filename: data.title + ".xls", //文件名称
                                    name: "Excel Document Name.xls",
                                    exclude_img: true,
                                    exclude_links: true,
                                    exclude_inputs: true
                                });
                            },
                            optionToContent: function (opt) {
                                // console.log(opt);

                                var axisData = opt.xAxis[0].data; //坐标数据
                                var series = opt.series; //折线图数据
                                var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
                                var tdBodys = ''; //表数据
                                //组装表头
                                var nameData = new Array('温度', '湿度', '风力', 'PM2.5质量','人口密度');

                                for (var i = 0; i < nameData.length; i++) {
                                    tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                                }
                                var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                                //组装表数据
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    for (var j = 0; j < series.length ; j++) {
                                        var temp = series[j].data[i];
                                        if (temp != null && temp != undefined) {
                                            tdBodys += '<td>' + temp.toFixed(2) + '</td>';
                                        } else {
                                            tdBodys += '<td></td>';
                                        }
                                    }
                                    table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                    tdBodys = '';
                                }
                                table += '</tbody></table>';
                                // console.log(table);
                                return table;

                            }
                        },
                        dataZoom: { show: true, title: { zoom: '区域缩放', back: '区域缩放还原' } },
                        saveAsImage: { show: true }
                    }
                },
                legend:{data: ['温度', '湿度','风力','PM2.5质量','人口密度']
                    // data: ['一级保护区', '二级保护区','准保护区']
                },grid:{
                    x2:85,
                    x:55,
                    y2:70,
                },dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    bottom: 22,
                    start: (100-Math.floor(1000/data.rownum)),
                    height:14,
                    end:100 ,//初始化滚动条
                    realtime:true,
                }],
                xAxis: {
                    type: 'category',
                    data: data.x_data,
                    boundaryGap:true,
                    show:true,
                    axisLabel:{
                        interval:0,
                        alignWithLabel:true,
                        formatter: function(value, index){
                            if (index  %  2  !=  0)  {
                                return  '\n'  +  value;
                            }
                            else  {
                                return  value;
                            }
                    }   }
                },
                yAxis: [
                    {
                        name:'温度',
                        position: "left",
                        type: 'value',
                        min:0, splitNumber: 10, // Y 轴分隔格数
                        axisLabel:{
                            rotate:20,
                                     },
                        nameRotate: 30,
                    },{
                        name:'湿度',
                        position:'left',
                        type: 'value',
                        min:0,
                        max:100,
                        offset:25, splitNumber: 10, // Y 轴分隔格数
                        axisLabel:{
                            rotate:20,
                        },
                        nameRotate: 30,

                    },{
                        name:'风力',
                        position:'right',
                        type: 'value',
                        min:0,
                        max:12, splitNumber: 10, // Y 轴分隔格数
                        axisLabel:{
                            rotate:20,
                        },
                        nameRotate: 30,
                    },{
                        name:'PM2.5质量',
                        position:'right',
                        type: 'value',
                        offset:23,
                        splitLine: {
                            show: false
                        },
                        scale:true,
                        min:0,boundaryGap: true, splitNumber: 10, // Y 轴分隔格数
                        axisLabel:{
                            rotate:20,
                        },
                        nameRotate: 30,
                    },{
                        name:'人口密度',
                        position:'right',
                        type: 'value',
                        splitNumber: 10, // Y 轴分隔格数
                        splitLine: {
                            // Y 轴分隔线样式
                            show: false,
                            lineStyle: {
                                color: ["#f3f0f0"],
                                width: 2,
                                type: "solid"
                            }
                        },offset:46,scale:true,boundaryGap: true,axisLabel:{
                            rotate:20,
                        },
                        nameRotate: 30,

                    },
                ],
                series: [{name: '温度', data: data.data1, type: 'line',yAxisIndex:0,},{name: '湿度', data: data.data2, type: 'line',yAxisIndex:1,},{name: '风力', yAxisIndex:2,data: data.data3, type: 'line'}
                    ,{name: 'PM2.5质量', data: data.data4, type: 'line',yAxisIndex:3,},{name: '人口密度', data: data.data5, type: 'line',yAxisIndex:4,}]
                //例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
                //  [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]
                //[5, 20, 36, 10, 10, 20]

            });
            //判断最新一行的数据在哪个范围并改变颜色
            //风力有0-12级，假设0-6为绿色，7-9为黄色，大于10级为红色；温度范围，假设0-28为绿色，29-35为黄色，大于36红色；
//湿度以百分比计，假设有0-100级，0-50为绿色，51-70为黄色，71-100为红色；
//pm2.5质量   0-75为绿色，76-150为黄色，150以上为红色；人口密度 人/平方千米，其中0-25为绿色，26-100为黄色，大于100为红色。
            rownum=data.rownum;
            columnnum=data.columnnum;
            var last =new Array([data.data1[rownum-1],data.data2[rownum-1],data.data3[rownum-1],data.data4[rownum-1],data.data5[rownum-1]]);
            // alert(last[0][0]+"last0");
            //记录五个小灯的状态
            var y1,y2,y3,y4,y5=0;
            //显示当前数字
            // document.getElementById("cnumber"+diquid+"1").innerHTML=last[0][0];
            document.getElementById("rtt"+diquid+"1").innerHTML=last[0][0];
            document.getElementById("rtt"+diquid+"2").innerHTML=last[0][1];
            document.getElementById("rtt"+diquid+"3").innerHTML=last[0][2];
            document.getElementById("rtt"+diquid+"4").innerHTML=last[0][3];
            document.getElementById("rtt"+diquid+"5").innerHTML=last[0][4];

            if(last[0][0]<=28&&last[0][1]>=0)//判断温度
            {
                $("#rc"+diquid+"1").css("fill","green");
            }else if(last[0][0]<=35){
                $("#rc"+diquid+"1").css("fill","yellow");
            }else if(last[0][0]>35){
                y2=1;
                $("#rc"+diquid+"1").css("fill","red");
            }
            if(last[0][1]<=50&&last[0][2]>=0)//判断湿度
            {
                $("#rc"+diquid+"2").css("fill","green");
            }else if(last[0][1]<=70){
                $("#rc"+diquid+"2").css("fill","yellow");
            }else if(last[0][1]>70){
                y3=1;
                $("#rc"+diquid+"2").css("fill","red");
            }
            if(last[0][2]<=6&&last[0][0]>=0)//判断风力
            {
                $("#rc"+diquid+"3").css("fill","green");

            }else if(last[0][2]<=9){
                $("#rc"+diquid+"3").css("fill","yellow");
            }else if(last[0][2]>9){
                y1=1;
                $("#rc"+diquid+"3").css("fill","red");
            }
            if(last[0][3]<=75&&last[0][3]>=0)//判断PM2.5
            {
                $("#rc"+diquid+"4").css("fill","green");
            }else if(last[0][3]<=150){
                $("#rc"+diquid+"4").css("fill","yellow");
            }else if(last[0][3]>150){
                y4=1;
                $("#rc"+diquid+"4").css("fill","red");
            }
            if(last[0][4]<=25&&last[0][4]>=0)//判断人口密度
            {
                $("#rc"+diquid+"5").css("fill","green");
            }else if(last[0][4]<=100){
                $("#rc"+diquid+"5").css("fill","yellow");
            }else if(last[0][4]>100){
                y5=1;
                $("#rc"+diquid+"5").css("fill","red");
            }
            if(y1||y2||y3||y4||y5)
            {
                redgreen(bjtime,diquid);
            }
            //动态添加option值 组装
            var strstart="";var strend="";
            for(var x=1;x<=rownum;x++) {
                //  <option id="0" value="-请选择-">-请选择-</option>
                strstart+= " <option id='"+data.x_data[(x-1)]+"' value='"+x+"'>"+data.x_data[(x-1)]+"</option>"
            }
            strend+=strstart;
            $("#select"+diquid+"1st").append(strstart);
            $("#select"+diquid+"2en").append(strend);

        },
        error: function (e) {
            alert("Error");
            console.log(e.status);
            console.log(e.responseText);
        }
    })
}

function setbaojing() {
    bjtime=($("#baojing").val()*1000);
    alert("保存成功!"+bjtime);
}

function chakan(id) {
    //把数据传给echarts的start和end，改变滑块位置
    var diquid;
    if(id=="sb1"){diquid="1";}if(id=="sb2"){diquid="2";}if(id=="sb3"){diquid="3";}if(id=="sb4"){diquid="4";}if(id=="sb5"){diquid="5";}
    // var start=$("#select"+num+"1st option:selected");//得到选中的文字
    // var end=$("#select"+num+"2en option:selected");

    var startva=$("#select"+diquid+"1st").val();//得到数据所在位置并计算
    var endva=$("#select"+diquid+"2en").val();



    if(startva>=endva){
        var tran;
        tran=startva;
        startva=endva;
        endva=tran;
    }

//重新绘图
    var myChart = echarts.init(document.getElementById("show_e"+diquid));
    $.ajax({
        url: "/ech_data",
        data: {
            diquid: diquid,
        },
        dataType: "json",//数据格式
        type: "post",//请求方式
        async: false,//是否异步请求
        success: function (data) {   //如果请求成功，返回数据。
            var titleup = "地区" + diquid;
            myChart.setOption({
                title: {
                    text: titleup,
                }, tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    right: '20px',

                    feature: {
                        dataView: {
                            show: true,
                            title: '数据视图',
                            //readOnly: true, //设置只读，会隐藏刷新按钮。
                            lang: ['数据视图', '关闭', '导出Excel'],
                            contentToOption: function (opts) {
                                $("#tableExcel_Day").table2excel({
                                    exclude: ".noExl", //过滤位置的 css 类名
                                    filename: data.title + ".xls", //文件名称
                                    name: "Excel Document Name.xls",
                                    exclude_img: true,
                                    exclude_links: true,
                                    exclude_inputs: true
                                });
                            },
                            optionToContent: function (opt) {
                                // console.log(opt);

                                var axisData = opt.xAxis[0].data; //坐标数据
                                var series = opt.series; //折线图数据
                                var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
                                var tdBodys = ''; //表数据
                                //组装表头
                                var nameData = new Array('温度', '湿度', '风力', 'PM2.5质量', '人口密度');

                                for (var i = 0; i < nameData.length; i++) {
                                    tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                                }
                                var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                                //组装表数据
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    for (var j = 0; j < series.length; j++) {
                                        var temp = series[j].data[i];
                                        if (temp != null && temp != undefined) {
                                            tdBodys += '<td>' + temp.toFixed(2) + '</td>';
                                        } else {
                                            tdBodys += '<td></td>';
                                        }
                                    }
                                    table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                    tdBodys = '';
                                }
                                table += '</tbody></table>';
                                // console.log(table);
                                return table;

                            }
                        },
                        dataZoom: {show: true, title: {zoom: '区域缩放', back: '区域缩放还原'}},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['温度', '湿度', '风力', 'PM2.5质量', '人口密度']
                    // data: ['一级保护区', '二级保护区','准保护区']
                }, grid: {
                    x2: 85,
                    x: 55,
                    y2: 70,
                }, dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    bottom: 22,
                    start: Math.floor(100*(startva / data.rownum)),
                    height: 14,
                    end: Math.floor(100*(endva / data.rownum)),
                    realtime: true,
                }],
                xAxis: {
                    type: 'category',
                    data: data.x_data,
                    boundaryGap: true,
                    show: true,
                    axisLabel: {
                        interval: 0,
                        alignWithLabel: true,
                        formatter: function (value, index) {
                            if (index % 2 != 0) {
                                return '\n' + value;
                            } else {
                                return value;
                            }
                        }
                    }
                },
                yAxis: [
                    {
                        name: '温度',
                        position: "left",
                        type: 'value',
                        min: 0, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: '湿度',
                        position: 'left',
                        type: 'value',
                        min: 0,
                        max: 100,
                        offset: 25, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,

                    }, {
                        name: '风力',
                        position: 'right',
                        type: 'value',
                        min: 0,
                        max: 12, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: 'PM2.5质量',
                        position: 'right',
                        type: 'value',
                        offset: 23,
                        splitLine: {
                            show: false
                        },
                        scale: true,
                        min: 0, boundaryGap: true, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: '人口密度',
                        position: 'right',
                        type: 'value',
                        splitNumber: 10, // Y 轴分隔格数
                        splitLine: {
                            // Y 轴分隔线样式
                            show: false,
                            lineStyle: {
                                color: ["#f3f0f0"],
                                width: 2,
                                type: "solid"
                            }
                        }, offset: 46, scale: true, boundaryGap: true, axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,

                    },
                ],
                series: [{name: '温度', data: data.data1, type: 'line', yAxisIndex: 0,}, {
                    name: '湿度',
                    data: data.data2,
                    type: 'line',
                    yAxisIndex: 1,
                }, {name: '风力', yAxisIndex: 2, data: data.data3, type: 'line'}
                    , {name: 'PM2.5质量', data: data.data4, type: 'line', yAxisIndex: 3,}, {
                        name: '人口密度',
                        data: data.data5,
                        type: 'line',
                        yAxisIndex: 4,
                    }]
                //例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
                //  [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]
                //[5, 20, 36, 10, 10, 20]

            });
        },
        error: function (e) {
            alert("Error");
            console.log(e.status);
            console.log(e.responseText);
        }
    });

}

function chongzhi(id) {
    var diquid;
    if(id=="cz1"){diquid="1";}if(id=="cz2"){diquid="2";}if(id=="cz3"){diquid="3";}if(id=="cz4"){diquid="4";}if(id=="cz5"){diquid="5";}
    trandata(diquid);
}

补充：这是截取数据显示的。

//截断数据!!!!!!!!!!!!!!!
function chakan(id) {
    var diquid;
    if(id=="sb1"){diquid="1";}if(id=="sb2"){diquid="2";}if(id=="sb3"){diquid="3";}if(id=="sb4"){diquid="4";}if(id=="sb5"){diquid="5";}
    // var start=$("#select"+num+"1st option:selected");//得到选中的文字
    // var end=$("#select"+num+"2en option:selected");

    var startva=$("#select"+diquid+"1st").val();//得到数据所在位置并计算
    var endva=$("#select"+diquid+"2en").val();

    if(startva>=endva){
        var tran;
        tran=startva;
        startva=endva;
        endva=tran;
    }

    function computedPosition(length,xArraylength) {
        if(xArraylength>=10){
            return length >= 10 ? this.start = 35 : this.start = (100-Math.floor(1000/xArraylength));
        }else{
            return 0;//小于十条数据显示全部
        }
    }

//重新绘图
    var myChart = echarts.init(document.getElementById("show_e"+diquid));
    var titleup;

    $.ajax({
        url: "/ech_data",
        data: {
            diquid: diquid,
        },
        dataType: "json",//数据格式
        async: false,//是否异步请求
        success: function (data) {   //如果请求成功，返回数据。
            titleup = "地区" + diquid;
            //截断数组.
            myChart.setOption({
                title: {
                    text: titleup,
                }, tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    right: '20px',

                    feature: {
                        dataView: {
                            show: true,
                            title: '数据视图',
                            //readOnly: true, //设置只读，会隐藏刷新按钮。
                            lang: ['数据视图', '关闭', '导出Excel'],
                            contentToOption: function (opts) {
                                $("#tableExcel_Day").table2excel({
                                    exclude: ".noExl", //过滤位置的 css 类名
                                    filename: data.title + ".xls", //文件名称
                                    name: "Excel Document Name.xls",
                                    exclude_img: true,
                                    exclude_links: true,
                                    exclude_inputs: true
                                });
                            },
                            optionToContent: function (opt) {
                                // console.log(opt);

                                var axisData = opt.xAxis[0].data; //坐标数据
                                var series = opt.series; //折线图数据
                                var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
                                var tdBodys = ''; //表数据
                                //组装表头
                                var nameData = new Array('温度', '湿度', '风力', 'PM2.5质量', '人口密度');

                                for (var i = 0; i < nameData.length; i++) {
                                    tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                                }
                                var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                                //组装表数据
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    for (var j = 0; j < series.length; j++) {
                                        var temp = series[j].data[i];
                                        if (temp != null && temp != undefined) {
                                            tdBodys += '<td>' + temp.toFixed(2) + '</td>';
                                        } else {
                                            tdBodys += '<td></td>';
                                        }
                                    }
                                    table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                    tdBodys = '';
                                }
                                table += '</tbody></table>';
                                // console.log(table);
                                return table;

                            }
                        },
                        dataZoom: {show: true, title: {zoom: '区域缩放', back: '区域缩放还原'}},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['温度', '湿度', '风力', 'PM2.5质量', '人口密度']
                    // data: ['一级保护区', '二级保护区','准保护区']
                }, grid: {
                    x2: 85,
                    x: 55,
                    y2: 70,
                }, dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    bottom: 22,
                    start: computedPosition(1,(endva-startva)),
                    height: 14,
                    end: 100,
                    realtime: true,
                }],
                xAxis: {
                    type: 'category',
                    data: (data.x_data).slice((startva-1),endva),
                    boundaryGap: true,
                    show: true,
                    axisLabel: {
                        interval: 0,
                        alignWithLabel: true,
                        formatter: function (value, index) {
                            if (index % 2 != 0) {
                                return '\n' + value;
                            } else {
                                return value;
                            }
                        }
                    }
                },
                yAxis: [
                    {
                        name: '温度',
                        position: "left",
                        type: 'value',
                        min: 0, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: '湿度',
                        position: 'left',
                        type: 'value',
                        min: 0,
                        max: 100,
                        offset: 25, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,

                    }, {
                        name: '风力',
                        position: 'right',
                        type: 'value',
                        min: 0,
                        max: 12, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: 'PM2.5质量',
                        position: 'right',
                        type: 'value',
                        offset: 23,
                        splitLine: {
                            show: false
                        },
                        scale: true,
                        min: 0, boundaryGap: true, splitNumber: 10, // Y 轴分隔格数
                        axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,
                    }, {
                        name: '人口密度',
                        position: 'right',
                        type: 'value',
                        splitNumber: 10, // Y 轴分隔格数
                        splitLine: {
                            // Y 轴分隔线样式
                            show: false,
                            lineStyle: {
                                color: ["#f3f0f0"],
                                width: 2,
                                type: "solid"
                            }
                        }, offset: 46, scale: true, boundaryGap: true, axisLabel: {
                            rotate: 20,
                        },
                        nameRotate: 30,

                    },
                ],
                series: [{name: '温度', data:(data.data1).slice((startva-1),endva),type: 'line', yAxisIndex: 0,}, {
                    name: '湿度',
                    data: (data.data2).slice((startva-1),endva),
                    type: 'line',
                    yAxisIndex: 1,
                }, {name: '风力', yAxisIndex: 2, data: (data.data3).slice((startva-1),endva), type: 'line'}
                    , {name: 'PM2.5质量', data:(data.data4).slice((startva-1),endva), type: 'line', yAxisIndex: 3,}, {
                        name: '人口密度',
                        data:(data.data5).slice((startva-1),endva),
                        type: 'line',
                        yAxisIndex: 4,
                    }]
            });

        },
        error: function (e) {
            alert("Error");
            console.log(e.status);
            console.log(e.responseText);
        }
    });

}
乱搭巴士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】echarts 建立区域渐变折线图
weixin_44746306的博客
05-18 549
echarts 建立渐变表 1. 示例代码及注释 import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { tooltip: { // 鼠标聚焦 trigger: 'axis', axisPointer: { type: 'cross',
echarts x轴文字过长悬浮显示.rar
08-02
x轴文字显示过长会影响柱状图显示不全，需要对文字进行处理，为了美观，限定文字只显示在一行，文字长度为4；当长度大于4时将第四个文字替换为"..."；当鼠标悬浮在"..."时，显示全部内容，其它长度为4的文字正常显示...
动态echarts和滚动条
oxygensunshine的博客
11-15 46
【代码】动态echarts和滚动条。
echarts x轴label formatter截取数据 不影响tooltip时展示完整时间
最新发布
u010234868的专栏
05-21 447
在ECharts中，如果想要在X轴的标签（label）上截取数据但同时保证在tooltip中能够完整显示全部信息，可以使用axisLabel的formatter函数来自定义标签的显示格式。
折线图的选取
cominglately的博客
04-28 489
场景 对后台网站来说，图表是必不可少的功能 解决 1. highcharts `https://www.hcharts.cn/demo/highcharts#line` 优点: . bug少 性能强 . 你要相信 国外的空气质量就是好 2. echarts `http://echarts.baidu.com/echarts2/doc/example.html` ...
echart缩放时获取x轴区域的坐标
weixin_33878457的博客
11-08 1513
2019独角兽企业重金招聘Python工程师标准>>> ...
带滑块的趋势图(slider control in chart)
weixin_30915951的博客
08-23 194
如果没记错的话，好像是第一次在用趋势图显示数据的时候，就遇到过这个问题，当时是在一个趋势图中显示一个月中每天的数据趋势变化，结果就是根本在一张图中显示不下，X轴的文字标注都重叠到一起，当时用的是PB，里面的图形显示功能非常强大，后来好像是将文字直立显示的，避免了标注的重叠。 最近同时好像在搞趋势图，又想起这个问题，就试着在里面加个slider实现拖动以便可以显示“被多出”...
echart x轴标签偏移_移动端H5页面滑动手势X轴实例
weixin_39765869的博客
12-30 470
话不多少，上代码。let touchX = 0 // 默认初始值// 两行注释伪代码，绑定 touchstart 与 touchend 事件// dom.addEvenetListener('touchstart', touchStart)// dom.addEvenetListener('touchend', touchEnd)function touchStart(e) { // 手指触碰时候...
解决echarts中横坐标值显示不全(自动隐藏)问题
10-15
在使用ECharts绘制图表时，有时会遇到横坐标值显示不全的问题，特别是在数据量大或者标签内容较长的情况下，ECharts为了保持图表的清晰度，会自动隐藏部分横坐标标签。本文将详细介绍如何解决这个问题。 首先，...
在Echarts图中给坐标轴加一个标识线markLine
10-15
主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
java 根据坐标截取图片实例代码
08-30
主要介绍了java 根据坐标截取图片实例代码的相关资料,需要的朋友可以参考下
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE完美集成展示Echarts柱状/折线/饼状图，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/124028204 代码不易，略收小费，使用...
Echarts饼状图指示线长度设计 以及只要一段
书包的博客
07-19 2146
series: [ { center: ["50%", "63%"], //折线图中心图的位置调整 normal: { label: { show: true, //展示label formatter: '{d}',//指示线外显示百分比数 position: 'outer', textStyl
【Echarts】折线图/趋势图区间框选计算
wan小小冰的博客
05-18 7642
针对折线图类的趋势图，以时间为横坐标，根据用户图形的区域框选可实时计算框选范围内的均值、总量或其他数据，具体实现代码如下：
echarts datazoom滚动后的数据
weixin_41260876的博客
12-20 506
无
echarts中框选范围并获得框选区域中的坐标
weixin_56581632的博客
02-25 4368
1.首先，在option中设置brush属性， 然后此时图的右上角会出现框选按钮 点击上面的图标之后，即可框选，在框选完成之后，使用brushEnd时间拿到相应的数据 myChart.on('brushEnd', function (params) {}) console.log（params） 里面的coordRanges中的数组就是需要的数据，coordRanges[0]是x轴的index，而coordRanges[1]就是y轴的具体范围。 ...
echarts调整左右滑动滚动条距离横轴（x轴的距离）/调整时间横轴距离底部文字的距离
qq_42859450的博客
06-01 4574
1、 echarts调整左右滑动滚动条距离横轴（x轴的距离） grid: { left: “3%”, right: “4%”, bottom: “12%”, containLabel: true } 2、 调整时间横轴距离底部文字的距离：offset
echarts x轴最后一项显示不全的解决办法
高先生的猫
11-03 6336
xAxis: { axisLabel: { showMaxLabel: true } }
echarts 滚动条
Jimyking的博客
11-24 669
echarts 滚动条
写一段用unity将根据坐标移动的物体移动后的轨迹显示出来的程序
09-03
好的，以下是用Unity实现物体移动并显示移动轨迹的程序： ```csharp using System.Collections.Generic; using UnityEngine; public class MoveWithTrail : MonoBehaviour { public float moveSpeed; public TrailRenderer trailRenderer; private List<Vector3> positions; private Vector3 lastPosition; private void Start() { positions = new List<Vector3>(); lastPosition = transform.position; } private void Update() { float distance = Vector3.Distance(transform.position, lastPosition); if (distance > 0.05f) { positions.Add(transform.position); lastPosition = transform.position; } if (positions.Count > 200) { positions.Remove(positions[0]); } transform.Translate(Vector3.forward * moveSpeed * Time.deltaTime); if (trailRenderer) { trailRenderer.Clear(); trailRenderer.AddPositions(positions.ToArray()); trailRenderer.emitting = true; } } } ``` 你可以在一个空的GameObject上添加这个脚本，然后将想要移动的物体作为它的子物体，设置合适的moveSpeed和TrailRenderer即可。当物体移动时，将一直记录其位置并将其添加到positions列表中，然后将TrailRenderer的位置设置为positions的值即可。这样就可以实现物体移动的轨迹的显示了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值