标签：name setInterval value 动态效果 图例 设置 data Echarts color
<!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文件
标签：name,setInterval,value,动态效果,图例,设置,data,Echarts,color 来源： https://www.cnblogs.com/Hello-Yun/p/16060437.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。