Echarts中dataZoom动态赋值参数

chenfairy

已于 2022-02-22 09:59:18 修改

阅读量1.7k

点赞数

分类专栏： Echarts 文章标签： echarts

于 2022-02-21 15:21:52 首次发布

本文链接：https://blog.csdn.net/chenfairy/article/details/123047876

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts官网参考

Examples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/editor.html?c=bar-large案例:

dataZoom动态赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #air_echarts_container{
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="air_echarts_container"></div>
</body>
// 需要引入echarts.min.js加载图表
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
    $(function(){
        showTargetAirContrast('air_echarts_container','传入的数据');
    })
     function showTargetAirContrast(id, data) {
        var chartDom = document.getElementById(id);
        chart = echarts.init(chartDom);
        let xTime = [];
        for (let i = 0; i < data.length; i++) {
            xTime.push(data[i].name)
        }
        /* 
            1.先获取到后端返回的数据个数
            2. 判断数据的个数
               2.1. 大于20(长度可以根据项目而定) 就只显示后面两个数据
               2.2.  否则显示全部数据
         */
        var startValue, endValue;
        if (xTime.length >= 20) {
            startValue = xTime.length - 2 * 10;//数据窗口范围的起始数值
            endValue = xTime.length - 1 * 10;
        } else {
            startValue = 0
            endValue = 100
        }
        var fontColor = '#fff';
        var option = {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '13%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff',
                    fontSize: '2rem',
                    padding: [5, 0, 0, 0]
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    }
                },
                data: xTime
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff',
                        fontSize: '2rem'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    //start:0,
                    //end:30,
                    startValue: startValue,                           //数据窗口范围的起始数值
                    endValue: endValue
                },
                {
                    height: 12,
                    textStyle: {
                        color: "#fff",
                    }
                }
            ],
            series: [
                {
                    name: 'name',
                    type: 'line',
                    showSymbol: true,
                    color: "#FF0404",     //设定实线点的颜色
                    symbol: 'circle',     //设定为实心点
                    symbolSize: 20,   //设定实心点的大小
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: "#FF0404", //设置实线的颜色
                        },
                    }
                }
            ]
        };
        chart.setOption(option);
        chart.on('datazoom', function (params) {
            listLoad = false
            if (params.end == 100) {
                listLoad = true
            }
        })
    }
</script>
</html>