ECharts 数据可视化图表

wqqstudy

于 2024-05-13 10:55:21 发布

阅读量797

点赞数 12

文章标签：信息可视化 echarts 前端

本文链接：https://blog.csdn.net/wqqstudy/article/details/138792300

版权

一.绘制雷达图、词云图和矩形树图

雷达图（Radar）又称戴布拉图、蜘蛛网图、蜘蛛图，适用于显示3个或更多维度的变量，如学生的各科成绩分析。而词云图又称文字云，是使用颜色和大小展示文本信息的一种图形。矩形树图又称树状图，适合展现具有层级关系的数据。为了更直观地查看各教育阶段男女人数统计、浏览器占比变化、某软件性能、全球编程语言的TIOBE排名、客户人数等数据，需要在ECharts中绘制基本雷达图、复杂雷达图、多雷达图、词云图和矩形树图进行展示。

1.1 绘制雷达图

雷达图将多个维度的数据映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就成了雷达图。在坐标轴设置恰当的情况下，雷达图所围面积能表现出一些信息量。雷达图把纵向和横向的分析比较方法结合起来，可以展示出数据集中各个变量的权重高低情况，适用于展示性能数据。雷达图不仅对于查看哪些变量具有相似的值、变量之间是否有异常值有效，而且可用于查看哪些变量在数据集内得分较高或较低。此外，雷达图也常用于排名、评估、评论等数据的展示。

1.1.1 绘制基本雷达图

利用各教育阶段男女人数统计数据查看男女学生在各教育阶段的人数高低情况，如图所示。

<html>

<head>

<title>4-11 基本雷达图</title>

</head>

<body>

//基于准备好的DOM，初始化ECharts图表

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, //设置是否显示图例

top: '14', //设置图例距离顶部边距

left: 430, //设置图例距离左侧边距

itemWidth: 10, //设置图例标记的图形宽度

itemHeight: 10, //设置图例标记的图形高度

itemGap: 30, //设置图例每项之间的间隔

orient: 'horizontal', //设置图例列表的布局朝向，'horizontal'|'vertical'

textStyle: { fontSize: 15, color: '#fff' }, //设置图例的公用文本样式

data: [ //设置图例的数据数组，数组项通常为字符串，每项代表一个系列name

{

textStyle: { color: 'rgba(51,0,255,1)', fontWeight: 'bold' }

}, //设置图例项的文本样式

{

textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' }

} //'normal'|'bold'|'bolder'|'lighter'

tooltip: { //配置详情提示框组件

//设置雷达图的tooltip不会超出div，也可设置position属性

//设置定位不会随着鼠标移动而变化

confine: true, //设置是否将tooltip框限制在图表的区域内

enterable: true, //设置鼠标是否可以移动到tooltip区域内

radar: [{ //配置雷达图坐标系组件，只适用于雷达图

center: ['50%', '56%'], //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标

radius: 160, //设置圆的半径，数组的第一项是内半径，第二项是外半径

startAngle: 90, //设置坐标系起始角度，也就是第一个指示器轴的角度

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', '#abc', '#abc', '#abc'] }

}, //设置分隔区域的样式

indicator: [ //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应

{ name: '高中', max: 9000000 }, { name: '专科', max: 5000000 },

{ name: '本科', max: 3500000 }, { name: '硕士', max: 800000 },

//设置指示器的名称，最大值，标签的颜色

{ name: '博士', max: 20000 }]

}],

series: [{

type: 'radar', //系列类型: 雷达图

symbol: 'triangle',

itemStyle: { //设置折线拐点标志的样式

normal: { lineStyle: { width: 1 }, opacity: 0.2 }, //设置普通状态时的样式

emphasis: { lineStyle: { width: 5 }, opacity: 1 } //设置高亮时的样式

data: [ //设置雷达图的数据是多变量(维度)

{ //设置第1个数据项

value: [4400000, 2700000, 1600000, 380000, 7000], //value是具体数据

symbol: 'triangle',

symbolSize: 5, //设置单个数据标记的大小

//设置拐点标志样式

itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },

//设置单项线条样式

lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } },

//areaStyle: {normal:{color:'red'}} //设置单项区域填充样式

{ //设置第2个数据项

symbol: 'circle',

symbolSize: 5, //设置单个数据标记的大小

itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },

lineStyle: { normal: { color: 'blue', width: 1, opacity: 0.9 } },

//areaStyle:{normal:{color:'blue'}} //设置单项区域填充样式

}

]

},]

};

//使用刚指定的配置项和数据显示图表

myChart.setOption(option);

</script>

</body>

</html>

二.绘制单仪表盘动态版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="echarts.js"></script>
<title>绘制单仪表盘</title>
</head>
<body>
<div id="main" style="width:900px; height: 500px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var color1 = [
[0.2, "rgba(255,0,0,1)"],
[0.8, "rgba(0,255,255,1)"],
[1, "rgba(0,255,0,1)"]
];

var data1 = [
{ name: "完成率（%)", value: 50 } // 假设这是单个数据点，如果是多个点则需要用逗号分隔
];

var option = {
// 指定图表的配置项和数据
backgroundColor: 'rgba(128,128,128,0.1)', // rgba设置透明度0.1
tooltip: { // 配置提示框组件
show: true,
formatter: "{b}: {c}%", // 格式化提示框内容
backgroundColor: "rgba(255,0,0,0.8)", // 设置提示框浮层的背景颜色
borderColor: "#333", // 设置提示框浮层的边框颜色
borderWidth: 0, // 设置提示框浮层的边框宽度
padding: 5, // 设置提示框浮层内边距，单位px，默认各方向内边距为5
textStyle: { // 设置提示框浮层的文本样式
// color, fontStyle, fontWeight, fontFamily, fontSize, lineHeight 等属性可以在这里设置
},
title: { // 配置标题组件
text: "项目实际完成率（%)",
x: 'center',
y: 25,
show: true, // 设置是否显示标题，默认true
offsetCenter: [50, '20%'], // 如果需要偏移标题，可以取消注释并调整值
textStyle: { // 标题文本样式可以在这里设置，如 fontFamily, color, fontSize 等
fontFamily: "黑体",
color: "blue",
fontSize: 20
}
},
series: [
{
name: '单仪表盘示例', // 设置系列名称，用于tooltip的显示，legend的图例筛选
type: 'gauge', // 设置系列类型
radius: '80%', // 设置仪表盘半径，默认75%
center:["50%","50%"],
startAngle: 225, // 设置仪表盘起始角度，默认225
endAngle: -45, // 设置仪表盘结束角度，默认-45
clockwise: true, // 设置仪表盘刻度是否是顺时针增长，默认true
min: 0, // 设置最小的数据值，默认0，映射到minAngle
max: 100, // 设置最大的数据值，默认100，映射到maxAngle
splitNumber: 10, // 设置仪表盘刻度的分割段数，默认10

axisLine: { // 设置仪表盘轴线（轮廓线）相关配置
show: true, // 设置是否显示仪表盘轴线（轮廓线），默认true
lineStyle: { // 设置仪表盘轴线样式
color: color1, // 设置仪表盘的轴线可以被分成不同颜色的多段
opacity: 1, // 设置图形透明度，支持从0到1的数字，为0时不绘制该图形
width: 30, // 设置轴线宽度，默认30
shadowBlur: 20, // 设置（发光效果）图形阴影的模糊大小
shadowColor: '#fff' // 设置阴影颜色，支持的格式同color
}
},

splitLine: { // 设置分隔线样式
show: true, // 设置是否显示分隔线，默认true
length: 30, // 设置分隔线线长，支持相对半径的百分比，默认30
lineStyle: { // 设置分隔线样式
color: '#eee', // 设置线的颜色，默认#eee
opacity: 1, // 设置图形透明度，支持从0到1的数字，为0时不绘制该图形
width: 2, // 设置线度，默认2
type: 'solid', // 设置线的类型，默认solid，此外还有dashed，dotted
shadowBlur: 10, // 设置（发光效果）图形阴影的模糊大小
// 注意：这里的shadowColor的值后面有一个错误的逗号和错误的字符串格式
shadowColor: '#fff' // 设置阴影颜色，支持的格式同color
}
},
axisTick: { //设置刻度(线)样式，刻度颜色较浅，可能看不明显。
show: true, //设置是否显示刻度(线)，默认true
splitNumber: 5, //设置分隔线之间分割的刻度数，默认5
length: 8, //设置刻度线长.支持相对半径的百分比，默认8
lineStyle: { //设置刻度线样式
color: "#eee", //设置线的颜色，默认#eee，颜色较浅，注意细看。
//设置图形透明度.支持从0到1的数字，为0时不绘制该图形
opacity: 1,
width: 1, //设置线度，默认 1
type: "solid", //设置线的类型，默认solid，此外还有dashed，dotted
shadowBlur: 10, //设置(发光效果)图形阴影的模糊大小
shadowColor: "#fff", //设置阴影颜色，支持的格式同color
},
},

axisLabel: { //设置刻度标签
show: true, //设置是否显示标签，默认true
distance: 25, //设置标签与刻度线的距离，默认5
color: "blue", //设置文字的颜色
fontSize: 32, //设置文字的字体大小，默认5
//设置刻度标签的内容格式器，支持字符串模板和回调函数两种形式
formatter: "{value}",
},
pointer: { //设置仪表盘指针
show: true, //设置是否显示指针，默认true
//设置指针长度,可以是绝对值，也可是相对于半径的百分比，默认80%
length: "70%",
width: 9, //设置指针宽度，默认8
},
itemStyle: { //设置仪表盘指针样式
color: "auto", //设置指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, //设置图形透明度，支持从0到1的数字，为0时不绘制该图形
borderWidth: 0, //设置描边线宽,默认0，为0时无描边
//设置柱条的描边类型,默认为实线，支持'solid'，'dashed'，'dotted'
borderType: "solid",
borderColor: "#000", //设置图形的描边颜色，默认"#000"，不支持回调函数
shadowBlur: 10, //设置(发光效果)图形阴影的模糊大小
shadowColor: "#fff", //设置阴影颜色，支持的格式同color
},
emphasis: { //设置高亮的仪表盘指针样式
itemStyle: {
//高亮和正常，两者具有同样的配置项，只是在不同状态下配置项的值不同
}
},
detail: { //设置仪表盘详情，用于显示数据
show: true, //设置是否显示详情，默认true
offsetCenter: [0, "50%"], //设置相对于仪表盘中心的偏移位置
color: "auto", //设置文字的颜色，默认auto
fontSize: 30, //设置文字的字体大小，默认15
formatter: "{value}%", //格式化函数或者字符串
},
data: data1
}
]
}

//myChart.setOption(option);

}
setInterval(function (){
option.series[0].data[0].value =(Math.random()*100).toFixed(2);
myChart.setOption(option,true);//使用指定的配置项和数据显示图表
},2000);//每2秒重新渲染一次，以实现动态效果

</script>
</body>
</html>

2024.5.13 日后再补充吧

wqqstudy

关注

12
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
ECharts 数据可视化图表

/拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'{ name: '高中', max: 9000000 }, { name: '专科', max: 5000000 },{ name: '本科', max: 3500000 }, { name: '硕士', max: 800000 },orient: 'horizontal', //设置图例列表的布局朝向，'horizontal'|'vertical'
复制链接

扫一扫