设置高亮：
Symbol:'triangle', //拐点样式
itemStyle:{ //设置拐点样式
normal: {lineStyle:{width:1},opacity:0.2}, //普通状态的样式
emphasis:{lineStyle:{width:5},opacity:1} //高亮时
添加滚动条：
type:"scroll",
一.
var option={
backgroundColor:'rgba(204,205,206,0.7)',
title:{
text:'浏览器占比变化',
textStyle:{
color:'blue'
},
top:20,left:30
},
tooltip:{
trigger:'item',backgroundColor:'rgba(0,0,250,0.7)'
},
legebd:{
type:'scroll',
bottom:15,
data:(function(){
var list = [];
for(var i=1;i<=28;i++){
list.push(i+2000+'');
}
return list;
}
)()
},
visualMap:{top:'47%',right:20,color:['red','yellow'],calculable:true},
radar:{
nameGap:2,
indicator:[
{text:'IE8-',max:400, color:'green'},
{text:'IE9+',max:400, color:'green'},
{text:'Safari',max:400, color:'bule'},
{text:'Firefox',max:400, color:'bule'},
{text:'Chrome',max:400, color:'red'},
]
},
series:(function(){
var series =[];
for(var i=1; i<=28;i++){
series.push({
name:'浏览器(数据虚构)',type:'radar',Symbol:'none',
lineStyle:{width:1},
emphasis:{areaStyle:{color:'rgba(0,250,0,0.3)'}},
data:[
{
value:[
(40-i)*10,
(38-i)*4+60,
i*5+10,
i*9,
i*i/2
],
name:i+2000+''
}
]
});
}
return series;
})()
};
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
option = {
// 图表标题配置
title: {
text: 'Multiple Radar' // 图表标题文本
},
// 提示框组件配置
tooltip: {
trigger: 'axis' // 触发类型为'axis'，即坐标轴触发
},
// 图例组件配置
legend: {
left: 'center', // 图例组件在左侧居中显示
data: [ // 图例数据数组
'A Software', // 图例项1
'A Phone', // 图例项2
'Another Phone', // 图例项3
'Precipitation', // 图例项4
'Evaporation' // 图例项5
]
},
// 雷达图配置
radar: [
{
// 雷达图的指示器配置数组
indicator: [
{ text: 'Brand', max: 100 }, // 指示器1，文本为'Brand'，最大值为100
{ text: 'Content', max: 100 }, // 指示器2，文本为'Content'，最大值为100
{ text: 'Usability', max: 100 }, // 指示器3，文本为'Usability'，最大值为100
{ text: 'Function', max: 100 } // 指示器4，文本为'Function'，最大值为100
],
center: ['25%', '40%'], // 雷达图的中心点位置，横坐标和纵坐标分别为'25%'和'40%'
radius: 80 // 雷达图的半径为80
},
{
indicator: [ // 第一个雷达图的指示器数组
{ text: 'Look', max: 100 }, // 指示器1，文本为'Look'，最大值为100
{ text: 'Photo', max: 100 }, // 指示器2，文本为'Photo'，最大值为100
{ text: 'System', max: 100 }, // 指示器3，文本为'System'，最大值为100
{ text: 'Performance', max: 100 }, // 指示器4，文本为'Performance'，最大值为100
{ text: 'Screen', max: 100 } // 指示器5，文本为'Screen'，最大值为100
],
radius: 80, // 雷达图的半径为80
center: ['50%', '60%'] // 雷达图的中心点位置，横坐标和纵坐标分别为'50%'和'60%'
},
{
indicator: (function () { // 第二个雷达图的指示器数组，通过函数生成
var res = []; // 初始化一个空数组用于存储指示器对象
for (var i = 1; i <= 12; i++) { // 循环12次，生成12个月的指示器
res.push({ text: i + '月', max: 100 }); // 将每个月的指示器对象添加到数组中
}
return res; // 返回生成的指示器数组
})(), // 立即执行函数表达式，并将结果作为indicator的值
center: ['75%', '40%'], // 雷达图的中心点位置，横坐标和纵坐标分别为'75%'和'40%'
radius: 80 // 雷达图的半径为80
}
],
// 数据系列配置数组
series: [
{
type: 'radar', // 数据类型为雷达图
tooltip: { // 提示框组件配置
trigger: 'item' // 触发类型为'item'，即数据项触发
},
areaStyle: {}, // 区域填充样式配置，这里为空对象，表示不特别设置样式
data: [ // 数据数组
{
value: [60, 73, 85, 40], // 数据值数组，与第一个雷达图的指示器对应
name: 'A Software' // 数据项名称
}
]
},
{
type: 'radar', // 数据类型为雷达图
radarIndex: 1, // 指定使用第二个雷达图的配置（数组索引从0开始）
areaStyle: {}, // 区域填充样式配置
data: [ // 数据数组
{
value: [85, 90, 90, 95, 95], // 数据值数组，与第二个雷达图的指示器对应
name: 'A Phone' // 数据项名称
},
{
value: [95, 80, 95, 90, 93], // 另一个数据项的值数组
name: 'Another Phone' // 另一个数据项名称
}
]
},
{
type: 'radar', // 数据类型为雷达图
radarIndex: 2, // 指定使用第三个雷达图的配置（数组索引从0开始）
areaStyle: {}, // 区域填充样式配置
data: [ // 数据数组
{
name: 'Precipitation', // 数据项名称
value: [ // 数据值数组，与第三个雷达图的指示器（月份）对应
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Evaporation', // 另一个数据项的名称
value: [ // 另一个数据项的值数组
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3
]
}
]
}
]
三.雷达图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
option = { //图标标题
title:{
text: "雷达图" //标题名称
},
tooltip:{ //提示框组件
trigger: 'axis' // 触发类型为'axis'，即坐标轴触发
},
// 图例组件配置
legend: {
left: 'center', // 图例组件在左侧居中显示
data: ['王斌','刘倩','袁波'] // 图例数据数组
},
radar: // 雷达图配置
{ // 雷达图的指示器配置数组
indicator: [{ name: '销售', max: 100 }, // 指示器1，文本为'Brand'，最大值为100
{ name: '沟通', max: 100 }, // 指示器2，文本为'沟通'，最大值为100
{ name: '服务', max: 100 }, // 指示器3，文本为'服务'，最大值为100
{ name: '协作', max: 100 }, // 指示器4，文本为'协作'，最大值为100
{ name: '培训', max: 100 } // 指示器5，文本为'培训'，最大值为100
]
},
tooltip:{ //详情提示框
confine:true, //是否将tiilip框限制在图表内
enterable:true, //鼠标可以移动到tooltip区域内
},
series: [ // 数据系列配置数组
{
name:'雷达图',
type: 'radar', //数据类型：雷达图
Symbol:'triangle', //拐点样式
itemStyle:{ //设置拐点样式
normal: {lineStyle:{width:1},opacity:0.2}, //普通状态的样式
emphasis:{lineStyle:{width:5},opacity:1} //高亮时
},
data:[
{
value: [87.50,87.50,90.00,91.25,85.00],
name: '王斌'
},
{value: [90.00,88.75,85.00,87.50,88.75],
name: '刘倩'
},
{
value: [92.50,91.25,88.75,92.50,91.25],
name: '袁波'
}
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
