ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）
·
目录
最近在学着用ECharts做一个可视化大屏，效果如下：
该可视化大屏主要包含了柱状图，折线图，饼图以及模拟航线地图。
该篇文章就以这几种图为例讲一下如何使用ECharts进行可视化。
一、关于ECharts
ECharts（Enterprise Charts）是一个由百度开源的数据可视化库，它提供了丰富的图表类型和可视化选项，使得开发者能够轻松地在网页中创建交互式的图表和数据可视化。ECharts支持多种数据格式，包括JSON、数组等，并且可以与各种现代前端框架（如React、Vue.js、Angular等）无缝集成。
ECharts的主要特点包括：
-
丰富的图表类型：ECharts提供了包括折线图、柱状图、饼图、散点图、雷达图、地图、热力图、关系图等多种图表类型，满足不同的数据展示需求。
-
灵活的配置项：ECharts的配置项非常灵活，用户可以自定义图表的颜色、字体、布局、提示信息等，以适应不同的设计需求和品牌风格。
-
交互性：ECharts支持图表的交互操作，如数据缩放、拖拽、数据视图切换等，增强了用户体验。
-
跨平台兼容性：ECharts可以在PC端和移动端上运行，具有良好的跨浏览器兼容性，包括IE、Chrome、Firefox等主流浏览器。
-
易于集成：ECharts可以轻松集成到各种前端项目中，支持模块化加载和按需引入，减少资源文件的大小。
-
社区支持：作为一个开源项目，ECharts拥有活跃的社区支持，用户可以在GitHub上找到最新的更新、问题解答和丰富的示例。
-
国际化：ECharts支持多语言，包括但不限于中文、英文，方便不同地区的用户使用。
ECharts适用于各种数据展示场景，如企业报表、数据监控、网站数据展示等，它通过简洁的API和强大的功能，帮助开发者快速构建出美观、实用的数据可视化图表。
ECharts官网地址：Apache ECharts
二、官网使用
官网的首页有两个重要的模块就是快速入门以及所有示例。
2.1快速入门
速入门就是教你怎么使用ECharts
2.2示例
所有示例就是用ECharts做的各种各样的图的示例
这个真的很实用，你可以选择你想要做的图的模板，比如你选择一个折线图堆叠，
点击之后，修改代码里面的参数以及你自己的数据即可做出你想要实现的图的效果
2.3配置项手册
还有一个重要的是官网里面的配置项手册
配置项就是你使用ECharts实现可视化时在options里面需要配置的参数，不同的图的配置项都不尽相同，这个是我们用ECharts做图时的一个重要参考，最主要的是它里面的说明都是中文，我们也不用担心看不懂了
三、使用ECharts
首先你需要一个能编辑前端代码的IDE，我使用的是vscode
3.1下载并引用echarts.js文件
下载地址：下载 - Apache ECharts
你可以点击Dist下载最新版的或者点击查看历史版本下载你想要的版本
在vscode中将echarts.min.js文件放在项目的根目录下的js文件夹下
3.2创建index.html文件
在html文件里面引用echarts.min.js创建DOM容器用来存放用ECharts生成的图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据可视化</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部的盒子 -->
<header>
<h1>数据可视化-Echarts</h1>
<div class="showTime"></div>
<script>
var t = null;
// 初始化定时器，每秒更新显示时间
t = setTimeout(time, 1000);//開始运行
function time() {
clearTimeout(t);//清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//获取时
var m = dt.getMinutes();//获取分
var s = dt.getSeconds();//获取秒
// 更新页面显示的时间
document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</header>
<!-- 页面主体部分 -->
<section class="mainbox">
<div class="column">
<!-- 柱形图展示就业行业数据 -->
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<!-- 折线图展示人员变化趋势 -->
<div class="panel line">
<h2>折线图-人员变化 <a href="javascript:;">2020</a><a href="javascript:;">2021</a></h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<!-- 饼形图展示年龄分布数据 -->
<div class="panel pie">
<h2>饼形图-年龄分布</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
</div>
<div class="column">
<!-- 该模块用于展示前端需求与市场供应人数对比 -->
<div class="no">
<div class="no-hd">
<ul>
<li>123456</li>
<li>101010</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<!-- 地图模块，可能用于展示地域相关数据 -->
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart"></div>
</div>
</div>
<div class="column">
<!-- 柱形图展示就业形势数据 -->
<div class="panel bar2">
<h2>柱形图-就业形势</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<!-- 折线图展示播放量数据 -->
<div class="panel line2">
<h2>折线图-播放量</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<!-- 饼形图展示地区分布数据 -->
<div class="panel pie2">
<h2>饼形图-地区分布</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<!-- 引入外部JavaScript库和自定义脚本 -->
<script src="./js/flexible.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/china.js"></script>
<script src="./js/index.js"></script>
</body>
</html>3.3初始化echarts实例
在项目的根目录下面的js目录里面创建一个index.js文件来写用ECharts生成图表的代码
初始化echarts实例示例代码
//实例化对象
var myChart = echarts.init(document.querySelector('.bar .chart'));3.4指定配置项以及数据
//指定配置项和数据
var option = {
color: ['#2f89cf'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//修改图标的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: 'category',
data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
axisTick: {
alignWithLabel: true
},
//修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "8",
// interval: 0
},
//不显示x坐标轴的样式
axisLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
//修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
//不显示x坐标轴的样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2
}
},
//y轴分割线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '35%',
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
//修改柱子圆角
barBorderRadius: 5
}
}
]
};3.5把配置项给实例对象
//把配置项给实例对象
myChart.setOption(option);四、ECharts各种图常用配置项参数说明
4.1柱状图
| 参数 | 说明 |
| title | 标题组件，用于定义图表的标题。它包含了 text（标题文本）、left（标题水平位置）、top（标题垂直位置）等属性 |
| tooltip | 提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等 |
| legend | 图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。 |
grid | 网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小 |
xAxis | X 轴配置，通常用于显示类别数据。可以设置 |
yAxis | Y 轴配置，通常用于显示数值数据。可以设置 type（轴类型）、name（轴名称）等。 |
series | 系列列表，用于定义图表的数据内容。每个系列通过 type 指定为 'bar' 来表示柱状图。data 属性用于定义系列中的数据点 |
color | 用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩柱状图 |
animation | 动画配置，用于设置图表初始化或数据更新时的动画效果。可以设置 duration（动画时长）和 easing（缓动效果） |
dataset | 数据集配置，用于定义图表的数据源。source 属性用于指定外部数据，transform 属性用于对数据进行处理 |
toolbox | 工具箱组件，提供了数据视图、下载等功能。可以设置 feature 属性来定义工具箱中的功能 |
dataZoom | 数据区域缩放组件，用于放大和缩小图表的显示区域。可以设置 type（数据区域缩放的类型，如 'inside' 或 'slider'） |
visualMap | 视觉映射组件，用于根据数据值大小对图形的颜色、大小等进行映射。可以设置 min、max（数据的最小值和最大值）和 orient（布局方向）等 |
可视化大屏柱状图代码示例：
//柱状图1
// 立即执行函数，用于封装柱状图的配置和初始化
(function () {
// 1. 实例化 ECharts 对象并绑定到指定的 DOM 元素
var myChart = echarts.init(document.querySelector('.bar .chart'));
// 2. 定义柱状图的配置项
var option = {
// 定义图表的主题颜色
color: ['#2f89cf'],
// 提示框组件配置，用于交互时的信息提示
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
axisPointer: { // 指示器配置
type: 'shadow' // 类型为阴影指示器
}
},
// 网格组件配置，控制图表的网格位置和大小
grid: {
left: "0%", // 左边距
top: "10px", // 顶部距
right: "0%", // 右边距
bottom: "4%", // 底部距
containLabel: true // 网格是否包含坐标轴的标签
},
// X 轴配置
xAxis: [
{
type: 'category', // 类型为类目轴
data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], // 类目数据
axisTick: { // 坐标轴刻度的配置
alignWithLabel: true // 刻度线与标签对齐
},
// X 轴标签的样式配置
axisLabel: {
color: "rgba(255,255,255,.6)", // 标签颜色
fontSize: "8", // 标签字体大小
},
// X 轴轴线的样式配置
axisLine: {
show: false // 不显示轴线
}
}
],
// Y 轴配置
yAxis: [
{
type: 'value', // 类型为数值轴
// Y 轴标签的样式配置
axisLabel: {
color: "rgba(255,255,255,.6)", // 标签颜色
fontSize: "12" // 标签字体大小
},
// Y 轴轴线的样式配置
axisLine: {
lineStyle: { // 轴线样式配置
color: "rgba(255,255,255,.1)", // 轴线颜色
width: 2 // 轴线宽度
}
},
// Y 轴分割线的样式配置
splitLine: {
lineStyle: { // 分割线样式配置
color: "rgba(255,255,255,.1)" // 分割线颜色
}
}
}
],
// 系列配置
series: [
{
name: 'Direct', // 系列名称
type: 'bar', // 图表类型为柱状图
barWidth: '35%', // 柱子宽度
data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
// 柱子样式配置
itemStyle: {
barBorderRadius: 5 // 柱子圆角大小
}
}
]
];
// 3. 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 4. 监听浏览器窗口大小变化事件，实现图表的自适应大小
window.addEventListener("resize", function () {
myChart.resize();
});
})();
//柱状图2
// 立即执行函数，用于封装第二个柱状图的配置和初始化
(function () {
// 声明颜色数组，用于定义柱状图的颜色
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 实例化 ECharts 对象并绑定到指定的 DOM 元素
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 定义柱状图的配置项
var option = {
// 网格组件配置
grid: {
top: "10%", // 顶部距
left: "22%", // 左边距
bottom: "10%", // 底部距
containLabel: true // 网格是否包含坐标轴的标签
},
// X 轴配置，不显示 X 轴
xAxis: {
show: false // 不显示 X 轴
},
// Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
yAxis: [
{
axisLine: {
show: false // 不显示 Y 轴轴线
},
axisTick: {
show: false // 不显示 Y 轴刻度
},
axisLabel: {
color: "#fff" // Y 轴标签颜色
},
type: 'category', // 类型为类目轴
inverse: true, // 反转坐标轴
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"] // 类目数据
},
{
show: true, // 显示 Y 轴
data: [702, 350, 610, 793, 664], // 数值数据
inverse: true, // 反转坐标轴
axisLabel: { // Y 轴标签的样式配置
textStyle: {
fontSize: 12, // 标签字体大小
color: "#fff" // 标签颜色
}
}
}
],
// 系列配置，包含两个系列，一个为柱状图，一个为边框
series: [
{
name: '条', // 系列名称
type: 'bar', // 图表类型为柱状图
data: [70, 34, 60, 78, 69], // 数据数组
yAxisIndex: 0, // 使用第一个 Y 轴
barCategoryGap: 50, // 柱子类目间隔
barWidth: 10, // 柱子宽度
itemStyle: { // 柱子样式配置
normal: {
barBorderRadius: 20, // 柱子圆角大小
color: function (params) { // 柱子颜色动态绑定
return myColor[params.dataIndex];
}
}
},
label: { // 图形上的文本标签
normal: {
show: true, // 显示标签
position: "inside", // 标签显示在柱子内部
formatter: "{c}%" // 标签显示格式
}
}
},
{
name: "框", // 系列名称
type: "bar", // 图表类型为柱状图
barCategoryGap: 50, // 柱子类目间隔
barWidth: 15, // 柱子宽度
itemStyle: { // 边框样式配置
color: "none", // 柱子颜色设置为透明
borderColor: "#00c1de", // 边框颜色
borderWidth: 3, // 边框宽度
barBorderRadius: 15 // 边框圆角大小
},
yAxisIndex: 1, // 使用第二个 Y 轴
data: [100, 100, 100, 100, 100] // 数据数组，这里为固定值
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 监听浏览器窗口大小变化事件，实现图表的自适应大小
window.addEventListener("resize", function () {
myChart.resize();
});
})();效果图
4.2折线图
| 参数 | 说明 |
| title | 标题组件，用于定义图表的标题。它包含了 text（标题文本）、left（标题水平位置）、top（标题垂直位置）等属性 |
| tooltip | 提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等 |
| legend | 图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。 |
grid | 网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小 |
xAxis | X 轴配置，通常用于显示类目数据。可以设置 type（轴类型）、data（类目数据数组）、axisLabel（轴标签样式）等 |
yAxis | Y 轴配置，通常用于显示数值数据。可以设置 type（轴类型）、name（轴名称）、axisLabel（轴标签样式）等 |
series | 系列列表，用于定义图表的数据内容。对于折线图，type 应设置为 'line'。data 属性用于定义系列中的数据点 |
color | 用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩折线图 |
animation | 动画配置，用于设置图表初始化或数据更新时的动画效果。可以设置 duration（动画时长）和 easing（缓动效果） |
dataset | 数据集配置，用于定义图表的数据源。source 属性用于指定外部数据，transform 属性用于对数据进行处理 |
dataZoom | 数据区域缩放组件，用于放大和缩小图表的显示区域。可以设置 type（数据区域缩放的类型，如 'inside' 或 'slider'） |
visualMap | 视觉映射组件，用于根据数据值大小对图形的颜色、大小等进行映射。可以设置 min、max（数据的最小值和最大值）和 orient（布局方向）等 |
| lineStyle | 折线样式配置，可以设置折线的宽度、类型、颜色等。例如，{color: '#ff0000', width: 2} 表示红色的折线，宽度为 2 |
| areaStyle | 填充样式配置，用于设置折线图下方的填充颜色和透明度。例如，{color: 'rgba(255, 0, 0, 0.3)'} 表示红色的填充，透明度为 0.3 |
markLine 或 markPoint | 用于在图表中标记特定的数据点或数据线。可以设置 data 属性来定义标记的内容和位置 |
可视化大屏折线图代码示例：
//折线图1
// 立即执行函数，用于封装折线图 1 的配置和初始化
(function () {
var yearData = [
{
year: '2020', // 定义年份为 2020 的数据对象
data: [ // 两个数组分别代表两条折线的数据
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], // 第一条折线的数据点
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] // 第二条折线的数据点
]
},
{
year: '2021', // 定义年份为 2021 的数据对象
data: [ // 两个数组分别代表两条折线的数据
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38], // 第一条折线的数据点
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34] // 第二条折线的数据点
]
}
];
var myChart = echarts.init(document.querySelector(".line .chart")); // 实例化 ECharts 对象并绑定到指定的 DOM 元素
var option = {
color: ['#00f2f1', '#ed3f35'], // 定义两条折线的颜色
tooltip: { // 提示框组件配置
trigger: 'axis' // 触发类型为坐标轴触发
},
legend: { // 图例组件配置
data: ['新增粉丝', '新增游客'], // 图例的数据数组
textStyle: { // 图例文字的样式配置
color: '#4c9bfd' // 图例文字颜色
},
right: '10%' // 图例距离右边 10%
},
grid: { // 网格组件配置
top: '20%', // 网格顶部距离
left: '3%', // 网格左侧距离
right: '4%', // 网格右侧距离
bottom: '3%', // 网格底部距离
show: true, // 显示网格边框
borderColor: '#012f4a', // 网格边框颜色
containLabel: true // 网格包含标签
},
xAxis: { // X 轴配置
type: 'category', // 类型为类目轴
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 类目数据
axisTick: { // 坐标轴刻度的配置
show: false // 不显示刻度线
},
axisLabel: { // 坐标轴标签的样式配置
color: '#4c9bfd' // 标签颜色
},
axisLine: { // 坐标轴线的样式配置
show: false // 不显示轴线
},
boundaryGap: false // 去除轴内间距
},
yAxis: { // Y 轴配置
type: 'value', // 类型为数值轴
axisTick: { // 坐标轴刻度的配置
show: false // 不显示刻度
},
axisLabel: { // 坐标轴标签的样式配置
color: '#4c9bfd' // 文字颜色
},
splitLine: { // 分割线的样式配置
lineStyle: { // 分割线样式配置
color: '#012f4a' // 分割线颜色
}
}
},
series: [ // 系列配置
{
name: '新增粉丝', // 系列名称
type: 'line', // 图表类型为折线图
smooth: true, // 折线平滑显示
data: yearData[0].data[0] // 使用 2020 年 '新增粉丝' 的数据
},
{
name: '新增游客', // 系列名称
type: 'line', // 图表类型为折线图
smooth: true, // 折线平滑显示
data: yearData[0].data[1] // 使用 2020 年 '新增游客' 的数据
}
]
};
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
window.addEventListener("resize", function () { // 监听浏览器窗口大小变化事件
myChart.resize(); // 实现图表的自适应大小
});
// 点击切换效果
$('.line h2').on('click', 'a', function () { // 绑定点击事件到 '.line h2' 下的 'a' 元素 var index = $(this).index(); // 获取点击的元素索引
option.series[0].data = yearData[index].data[0]; // 更新 '新增粉丝' 的数据
option.series[1].data = yearData[index].data[1]; // 更新 '新增游客' 的数据
// 需要重新更换数据
myChart.setOption(option); // 重新设置配置项和数据显示图表
});
})();
// 折线图2 模块制作
(function () {
// 初始化图表，将图表渲染在指定的DOM元素中
var myChart = echarts.init(document.querySelector(".line2 .chart"));
// 配置项
var option = {
// 鼠标悬浮提示框配置
tooltip: {
trigger: 'axis' // 提示框触发类型为坐标触发
},
// 图例组件配置，控制图例的显示和位置
legend: {
top: "0%", // 图例组件离容器顶部的距离
textStyle: { // 图例文字的样式
color: "rgba(255,255,255,.5)", // 图例文字的颜色
fontSize: "12" // 图例文字的大小
}
},
// 网格组件配置，控制图表的网格位置和大小
grid: {
left: "10", // 网格组件离容器左侧的距离
top: "30", // 网格组件离容器顶部的距离
right: "10", // 网格组件离容器右侧的距离
bottom: "10", // 网格组件离容器底部的距离
containLabel: true // grid 区域是否包含坐标轴的刻度标签
},
// X轴配置
xAxis: [
{
type: 'category', // 类型为类目轴
boundaryGap: false, // 坐标轴两边留白策略，false表示两边都不留白
data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"], // 类目数据
// X轴标签的样式配置
axisLabel: {
textStyle: { // 标签的文字样式
color: "rgba(255,255,255,.6)", // 文本颜色
fontSize: 12 // 文字大小
}
},
// X轴线的样式配置
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)" // 坐标轴线的颜色
}
}
}
],
// Y轴配置
yAxis: [
{
type: 'value', // 类型为数值轴
axisTick: { show: false }, // 是否显示轴刻度线
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)" // 坐标轴线的颜色
}
},
// Y轴标签的样式配置
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)", // 文本颜色
fontSize: 12 // 文字大小
}
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)" // 分隔线的颜色
}
}
}
],
// 系列列表配置
series: [
{
name: '点赞量', // 系列名称
type: 'line', // 图表类型为折线图
smooth: true, // 折线图是否平滑
// 线条的样式配置
lineStyle: {
color: "#0184d5", // 线条颜色
width: 2 // 线条宽度
},
// 填充区域的样式配置
areaStyle: {
// 渐变色的配置
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, // 渐变色的起始偏移
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8, // 渐变色的结束偏移
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)" // 阴影颜色
},
// 数据点的样式配置
symbol: "circle", // 数据点形状
symbolSize: 8, // 数据点大小
itemStyle: { // 数据点的样式
color: "#0184d5", // 数据点颜色
borderColor: "rgba(221, 220, 107, .1)", // 边框颜色
borderWidth: 12 // 边框宽度
},
// 控制数据点是否显示
showSymbol: false,
emphasis: {
focus: 'series' // 高亮系列的高亮策略
},
data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40] // 数据值
},
{
name: '转发量', // 系列名称
type: 'line', // 图表类型为折线图
smooth: true, // 折线图是否平滑
// 线条的样式配置
lineStyle: {
normal: { // 正常状态下的线条样式
color: "#00d887", // 线条颜色
width: 2 // 线条宽度
}
},
// 填充区域的样式配置
areaStyle: {
normal: { // 正常状态下的填充样式
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0, // 渐变色的起始偏移
color: "rgba(0, 216, 135, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8, // 渐变色的结束偏移
color: "rgba(0, 216, 135, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)" // 阴影颜色
}
},
// 数据点的样式配置
symbol: "circle", // 数据点形状
symbolSize: 5, // 数据点大小
itemStyle: { // 数据点的样式
color: "#00d887", // 数据点颜色
borderColor: "rgba(221, 220, 107, .1)", // 边框颜色
borderWidth: 12 // 边框宽度
},
// 控制数据点是否显示
showSymbol: false,
emphasis: {
focus: 'series' // 高亮系列的高亮策略
},
data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20] // 数据值
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 监听浏览器窗口大小变化事件，动态调整图表大小以适应屏幕
window.addEventListener("resize", function () {
myChart.resize();
});
})();效果图
4.3饼图
| 参数 | 说明 |
| title | 标题组件，用于定义图表的标题。它包含了 |
| tooltip | 提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等 |
| legend | 图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。 |
grid | 网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小 |
radius | 饼图的半径，可以是绝对值，也可以是相对于容器大小的百分比。可以设置为数组，分别表示内半径和外半径，用于创建环形图 |
center | 饼图的中心位置，可以是绝对值，也可以是百分比。通常设置为 ['50%', '50%'] 表示居中 |
series | 系列列表，用于定义图表的数据内容。对于饼图，type 应设置为 'pie'。data 属性用于定义系列中的数据点，通常包括 value（数据值）和 name（数据项名称） |
color | 用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩柱状图 |
label | 标签的样式配置，包括 show（是否显示标签）、position（标签位置）、formatter（标签内容格式化器）等 |
labelLine | 标签直线的样式配置，用于连接标签和对应的扇形块 |
itemStyle | 扇形块的样式配置，可以设置 borderColor（扇形块边框颜色）、borderWidth（扇形块边框宽度）等 |
emphasis | 鼠标悬停或高亮时的系列样式，可以用来设置高亮时的标签、扇形块等的样式 |
roseType | 用于设置是否为南丁格尔图（半径不等的饼图），可以取值 'radius' 或 'area' |
sort | 是否根据数据值进行排序，可以取值 'asc'（升序）、'desc'（降序）或 false（不排序） |
hoverAnimation | 鼠标悬停时的动画效果，可以设置为 |
可视化大屏饼图代码示例
// 饼形图1的模板制作
(function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector(".pie .chart"));
// 指定图表的配置项和数据
var option = {
color: [
"#065aab",
"#066eab",
"#0682ab",
"#0696ab",
"#06a0ab",
],
tooltip: {
trigger: 'item' // 提示框的触发方式，这里设置为触发item
},
legend: {
bottom: "0%", // 图例组件离容器底部的距离
itemWidth: 10, // 图例标记的图形宽度
itemHeight: 10, // 图例标记的图形高度
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"], // 图例的数据数组
textStyle: {
color: "rgba(255,255,255,.5)", // 图例文字颜色
fontSize: "12" // 图例文字大小
}
},
series: [
{
name: '年龄分布', // 系列名称
type: 'pie', // 系列类型
radius: ['40%', '60%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径
avoidLabelOverlap: false, // 是否启用防止标签重叠策略
label: {
show: false, // 是否显示标签
position: 'center' // 标签的位置
},
emphasis: {
label: {
show: true, // 高亮时是否显示标签
fontSize: 12, // 高亮时标签字体大小
fontWeight: 'bold' // 高亮时标签字体粗细
}
},
labelLine: {
show: false // 是否显示标签的视觉引导线
},
data: [ // 系列中的数据内容数组
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 监听浏览器窗口的变化，动态调整图表大小
window.addEventListener("resize", function () {
myChart.resize();
});
})();
//饼图2
// 立即执行函数，用于封装饼形图 2 的配置和初始化
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart")); // 实例化 ECharts 对象并绑定到指定的 DOM 元素，选择器为 .pie2 .chart
var option = {
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'], // 定义饼图的颜色数组
tooltip: { // 提示框组件配置
trigger: 'item', // 触发类型为数据项图形触发
formatter: '{a} <br/>{b} : {c} ({d}%)' // 自定义提示框内容格式，显示系列名、数据项名称、值和百分比
},
legend: { // 图例组件配置
bottom: '0%', // 图例组件离容器底部的距离为 0%
itemWidth: 10, // 图例标记的宽度为 10px
itemHeight: 10, // 图例标记的高度为 10px
textStyle: { // 图例文字的样式配置
color: "rgba(255,255,255,.5)", // 图例文字颜色，使用 rgba 定义透明度
fontSize: "10" // 图例文字大小为 10px
}
},
series: [ // 系列列表配置
{
name: '地区分布', // 系列名称，用于 tooltip 的显示
type: 'pie', // 指定系列类型为饼图
radius: ['10%', '70%'], // 饼图的内外半径，创建环形图效果
center: ['50%', '50%'], // 饼图的中心位置，设置为容器的中心
roseType: 'radius', // 玫瑰图的类型，设置为 'radius' 表示半径不等的饼图
label: { // 文本标签的样式配置
fontSize: 10 // 标签文字的字体大小为 10px
},
labelLine: { // 标签直线的样式配置
length: 6, // 标签直线的长度
length2: 8 // 标签直线的第二段长度
},
data: [ // 系列中的数据内容数组
{ value: 20, name: '云南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山东' },
{ value: 25, name: '河北' },
{ value: 20, name: '江苏' },
{ value: 25, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 42, name: '湖北' }
]
}
]
};
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
window.addEventListener("resize", function () { // 监听浏览器窗口大小变化事件
myChart.resize(); // 实现图表的自适应大小
});
})();效果图
4.4模拟航线图
模拟航线图是在ECharts社区里面大佬已经写好的模板，直接用就可以了。
ECharts社区地址：makeapie echarts社区图表可视化案例
效果图
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
119
0- 0
已为社区贡献1条内容
所有评论(0)