Echarts;雷达图；setInterval()；动态效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js">script>
head>
<body>
<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 += "" + fruits[i] + " ";
// }
myChart.setOption(option, true);
i = i + 1;
}, 1500); //每间2秒重新渲染一次，以实现动态效果
script>
body>
html>
需引入echarts.js文件