Echarts;雷达图；setInterval()；动态效果

本文主要是介绍Echarts;雷达图；setInterval()；动态效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>

</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        // 数据项目配置，日期（String）,数据以二维数组形式保留列数代表维度
        // 日期行数要和数据行数保持一致
        var i = 0;
        var name_list = ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
        var data_list = [[77.7, 42.6, 28.7], [79.7, 43.6, 34.9],
        [79.7,43.6,34.9], [81.8, 44.1, 43.3],
        [86.6, 47.8, 46.7], [90.8, 50.3, 49.9],
        [92.6, 49.8, 51.0], [93.7, 51.5, 48.6],
        [94.3, 50.7, 46.1],[96.5,80.4,50.2],
        [98.7,87.5,52.1],[98.3,88.9,51.4],
        [98.3,88.4,49.7],[98.3,91.2,55.1],
        [98.0,95.1,55.3],[98.2,94.1,54.3],
        [98.7,93.7,53.9],[98.8,94.9,55],
        [99.1,95.2,55.3],[99.5,94.5,55.4],
        [99.5,95.7,56.6]];
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {  //指定图表的配置项和数据
            backgroundColor: 'rgba(204,204,204,0.7)',  //配置背景色，默认无背景
            title: {  //配置标题组件
                text: '各级学校毕业生升学率',
                target: 'blank', top: '10', left: '160', textStyle: { color: 'blue', fontSize: 18, }
            },
            legend: {  //配置图例组件
                show: true,  //设置是否显示图例
                icon: 'rect',  //icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
                bottom: '15',  //设置图例距离顶部边距
                // left: 230,  //设置图例距离左侧边距
                itemWidth: 10,  //设置图例标记的图形宽度
                itemHeight: 10,  //设置图例标记的图形高度
                itemGap: 30,  //设置图例每项之间的间隔
                orient: 'horizontal',  //设置图例列表的布局朝向，'horizontal'|'vertical'
                textStyle: { fontSize: 15, color: '#fff' }, //设置图例的公用文本样式
                data: [  //设置图例的数据数组，数组项通常为字符串，每项代表一个系列name
                    //设置图例项的文本样式
                    {
                        name: '2000', icon: 'rect',
                        textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' }
                    }  //'normal'|'bold'|'bolder'|'lighter'
                ],
            },
            tooltip: {  //配置详情提示框组件
                //设置雷达图的tooltip不会超出div，也可设置position属性
                //设置定位不会随着鼠标移动而变化
                confine: true,  //设置是否将tooltip框限制在图表的区域内
                enterable: true,  //设置鼠标是否可以移动到tooltip区域内
            },
            visualMap: { top: '47%', right: 5, max: 100, color: ['red', 'blue'], calculable: true },
            radar: [{  //配置雷达图坐标系组件，只适用于雷达图
                center: ['50%', '56%'],  //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
                radius: 160,  //设置圆的半径，数组的第一项是内半径，第二项是外半径
                startAngle: 90,  //设置坐标系起始角度，也就是第一个指示器轴的角度
                name: {  //设置（圆外的标签）雷达图每个指示器名称
                    formatter: '{value}',
                    textStyle: { fontSize: 15, color: '#000' }
                },
                nameGap: 2,  //设置指示器名称和指示器轴的距离，默认为15
                splitNumber: 2,  //设置指示器轴的分割段数，default
                //shape:'circle',  //设置雷达图绘制类型，支持'polygon','circle'
                //设置坐标轴轴线设置
                axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
                //设置坐标轴在grid区域中的分隔线
                splitLine: { lineStyle: { color: '#fff', width: 1, } },
                splitArea: {
                    show: true,
                    areaStyle: { color: ['#abc', '#bca', '#abc', '#bca'] }
                },  //设置分隔区域的样式
                indicator: [  //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
                    { name: '小学升初中', max: 100, color: 'red'}, { name: '初中升高中', max: 100, color: 'green' },
                    { name: '高中升高等', max: 100 , color:'blue'}]
            }],
            series: [{
                name: '雷达图',  //系列名称，用于tooltip的显示，图例筛选
                type: 'radar',  //系列类型: 雷达图
                //拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
                symbol: 'triangle',
                itemStyle: {  //设置折线拐点标志的样式
                    normal: { lineStyle: { width: 1 }, opacity: 0.2 },  //设置普通状态时的样式
                    emphasis: { lineStyle: { width: 5 }, opacity: 1 }  //设置高亮时的样式
                },
                data: [  //设置雷达图的数据是多变量(维度)
                    {   //设置第1个数据项
                        name: '2001',  //数据项名称
                        value: [77.7, 42.6, 28.7],  //value是具体数据
                        symbol: 'triangle',
                        symbolSize: 5,  //设置单个数据标记的大小
                        //设置拐点标志样式
                        itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
                        //设置单项线条样式
                        // lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } },
                        //areaStyle: {normal:{color:'red'}}  //设置单项区域填充样式
                    }
                ]
            },]
        };
        //使用刚指定的配置项和数据显示图表
        setInterval(function () {
            let name_0 = option.legend.data[0].name;
            let value_0 = option.series[0].data[0].value;
            let data_name_0 = option.series[0].data[0].name;
            // let value_1 = option.series[1].data[0].value;
            // let value_2 = option.series[2].data[0].value;
            // let value_3 = option.series[3].data[0].value;
            //作用：控制循环
            if(data_list.length == i){
                i = 0;
            }

            value_0 = data_list[i];
            name_0 = name_list[i];
            data_name_0 = name_list[i];

            option.series[0].data[0].value = value_0;
            option.legend.data[0].name = name_0;
            option.series[0].data[0].name = data_name_0;

            console.log(value_0);
            console.log(name_0);
            console.log(name_list[i]);
            // console.log(data_list.length)
            // for (i = 0; i < fLen; i++) {
            //     text += "<li>" + fruits[i] + "</li>";
            // }
            myChart.setOption(option, true);
            i = i + 1;
        }, 1500);  //每间2秒重新渲染一次，以实现动态效果
    </script>
</body>

</html>
需引入echarts.js文件
这篇关于Echarts;雷达图；setInterval()；动态效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
C/C++教程

Echarts;雷达图；setInterval()；动态效果

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯
