目录
一、引入
ECharts是一个基于JavaScript的开源可视化图表库，主要用于数据可视化。它提供了一系列直观、生动、可交互、可个性化定制的数据可视化图表，适用于各种数据展示需求。
主要功能和应用场景：
ECharts支持多种图表类型，包括但不限于：
- 折线图、柱状图、散点图、饼图、K线图等统计图表
- 地图、热力图、线图等地理数据可视化图表
- 关系图、treemap、旭日图等关系数据可视化图表
- 平行坐标等多维数据可视化图表
- 漏斗图、仪表盘等用于BI（商业智能）的图表
完全版本：
二、一个实例
千言万语不如一个实例开端：
完成以下实例构建：（上面已经给出了详细教程，所以这里只给出实例所需要的特定方法和解释。）
1.大框架
【注意注释部分的解释】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 这里是下面表格构建的空间--一个div空间 -->
<div id="main" style="width: 30%;height:40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//这个语句表示在main中即方才创建的div空间中初始化一个表格
// 指定图表的配置项和数据
var option = {
//这里填写所需要表格的格式和内容
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//用这个语句刷新，使得一旦发生大视角的变化，表格空间也会刷新并产生变化
window.onresize=function(){
myChart.resize()
}
</script>
</body>
</html>2.设置大标题
text--设置大标题的文本
textStyle--设置大标题的格式（详解参见文章给出的教程网站）
color--设置格式中的文本颜色
title: {
text: '农作物病害发生预防面积统计',
textStyle:{
color:'#fff',
},
},3.设置提示标签
tooltip: {
trigger: 'axis',
axisPointer:{
type:'shadow'
},4.设置每个柱形数据的背景颜色
backgroundColor:'rgba(0,0,0,0.5)',
5.设置柱形数据背景边框
borderColor:'rgba(0,120,212,0.5)',6.设置图例小角标
legend: {
data: ['发生面积', '防治面积'],
right:'3%',
orient:'vertical', // 布局纵向布局
textStyle:{
color:'#fff'
}
},7.拖拽手柄
calculable: true,8.设置X轴
xAxis: [
{
type: 'category', //类目轴
// prettier-ignore
data: ['2017','2018','2019','2020','2021','2022','2023'],
axisLine:{
lineStyle:{
color:'#fff'
}
}
}
],9.设置Y轴
yAxis: [{
name:'面积（亿亩）',
type: 'value',
axisLine:{
show:true,
lineStyle:{
color:'#fff'
}},
splitLine:{
show:false
}
}],10.设置数据
series: [
{
name: '发生面积',
type: 'bar',
data: [ 50,39,78,69,49,63,65 ],
},
{
name: '防治面积',
type: 'bar',
data: [49,37,73,60,38,41,61],
},],
color:['rgb(73,146,255)','rgb(124,255,178)'],11.设置边框
grid:{
left:'3%',
right:'5%',
bottom:'2%',
containLabel:'true',
}完整版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.min.js"></script>
<style>
#main{
width:30%;
height:40vh;
/* background: skyblue; */
min-height:100px;
min-width:150px;
margin-top:200px;
margin-left:100px;
}
body{
background:url("../理论学习/u=1222297035\,4232091347&fm=253&fmt=auto&app=120&f=JPEG.webp");
background-size:100% 100vh;
}
</style>
</head>
<body>
<div id="main" style="width: 30%;height:40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '农作物病害发生预防面积统计',
textStyle:{
color:'#fff',
},
},
tooltip: {
trigger: 'axis',
axisPointer:{
type:'shadow'
},
backgroundColor:'rgba(0,0,0,0.5)',
borderColor:'rgba(0,120,212,0.5)',
textStyle:{
color:'#fff'
}
},
legend: {
data: ['发生面积', '防治面积'],
right:'3%',
orient:'vertical', // 布局纵向布局
textStyle:{
color:'#fff'
}
},
calculable: true,
xAxis: [
{
type: 'category', //类目轴
// prettier-ignore
data: ['2017','2018','2019','2020','2021','2022','2023'],
axisLine:{
lineStyle:{
color:'#fff'
}
}
}
],
yAxis: [{
name:'面积（亿亩）',
type: 'value',
axisLine:{
show:true,
lineStyle:{
color:'#fff'
}},
splitLine:{
show:false
}
}],
series: [
{
name: '发生面积',
type: 'bar',
data: [ 50,39,78,69,49,63,65 ],
},
{
name: '防治面积',
type: 'bar',
data: [49,37,73,60,38,41,61],
},],
color:['rgb(73,146,255)','rgb(124,255,178)'],
grid:{
left:'3%',
right:'5%',
bottom:'2%',
containLabel:'true',
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize=function(){
myChart.resize()
}
</script>
</body>
</html>【注意：上面例子中的background中的url路径根据自己要导入背景图片的位置而改变】
最终得到实例所见：
【注：】结果图片中的半透明黑块就是小提示弹框
标签：color,data,图表,设置,fff,搞懂,type,ECharts From： https://blog.csdn.net/m0_74977981/article/details/143609617