标签：name type echarts 案例 var data ECharts option
目录
一、柱状图
二、条形图
三、折线图
编辑四、堆积图
定义x轴和y轴的配置项，包括标题和数据等
编辑
如何使用ECharts来求取最大值、最小值和平均值
一、柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">//设置文档的字符编码为UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0">//设置视口（viewport）的元信息，使页面能够响应式地适应不同设备的屏幕大小。
<meta http-equiv="X-UA-Compatible" content="ie=edge">//这是一个针对Internet Explorer的兼容性设置，使页面以最高模式（edge mode）渲染。
<title>Document</title>//设置网页的标题
<!-- 步骤1：引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
// 步骤4：准备配置项
var option = {
xAxis: {
type: 'category',
data: ['小张', '小周', '小田']
},
yAxis: {
type: 'value'
},
series: [
{
name: '英语',
type: 'bar',
data: [101, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
二、条形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: 'A班成绩表',
subtext: '数据来自辅导员',
},
legend: {
data: ['java','python'],
},
calculable: true,
xAxis: [
{
type: 'value', //设置柱状图
boundaryGap: ['20%','20%'],
},
],
yAxis: [
{
type: 'category',
data: ['小张','小周','小田'],
},
],
series: [
{
name: 'java',
type: 'bar',
data: [90,88,70],
markPoint: { // 标记点
},
},
{
name: 'python',
type: 'bar',
data: [60,90,80,],
markPoint: { // 标记点
},
},//series：设置图表的系列数据。
]
};
myChart.setOption(option);
</script>
</body>
</html>
三、折线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: 'A班成绩表',
subtext: '成绩来源于辅导员',
},
legend: {
data: ['2023年', '2024年'],
},
calculable: true,
xAxis: [
{
type: 'category',
data:['9月','10月','11月','12月','1月','2月']
},
],
yAxis: [
{
type: 'value',
data: ['小周'],
},
],
series: [
{
name: '2023年',
type: 'line',
data: [56,77,86,70,90,73],
},
{
name: '2024年',
type: 'line',
data: [65,98,75,45,69,82],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
四、堆积图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: 'A班',
left:'center',
borderWidth:'3',
borderColor:'blue',
textStyle:{
color:'green',
},
},
legend: {
data: ['2023年', '2024年'],
right:'left',
},
calculable: true,
xAxis: [
{
type: 'category',
data:['9月','10月','11月','12月','1月','2月']
},
],
yAxis: [
{
type: 'value',
data: ['小周'],
},
],
series: [
{
name: '2023年',
type: 'line',
data: [56,77,86,70,90,73],
stack:'all',
areaStyle:{}
},
{
name: '2024年',
type: 'line',
data: [65,98,75,45,69,82],
stack:'all',
areaStyle:{}
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
定义x轴和y轴的配置项，包括标题和数据等
var option = {
xAxis: {
name: 'X轴标题',
data: ['数据1', '数据2', '数据3']
},
yAxis: {
name: 'Y轴标题',
data: [10, 20, 30]
},
series: [{
type: 'bar',
data: [15, 25, 35]
}]
};
如何使用ECharts来求取最大值、最小值和平均值
// 假设你已经引入了ECharts库，并创建了一个图表实例myChart
// 准备要展示的数据
var data = [10, 20, 30, 40, 50];
// 将数据转换为盒须图所需的格式
var boxplotData = echarts.dataTool.prepareBoxplotData(data);
// 获取数据的最大值和最小值
var min = echarts.dataTool.getMinMax(data).min;
var max = echarts.dataTool.getMinMax(data).max;
// 计算数据的平均值
var sum = data.reduce(function(a, b) { return a + b; });
var average = sum / data.length;
// 在图表中展示最大值、最小值和平均值
myChart.setOption({
series: [{
type: 'boxplot',
data: boxplotData
}],
tooltip: {
formatter: function(params) {
return '最大值：' + max + '<br>最小值：' + min + '<br>平均值：' + average;
}
}
});
标签：name,
type,
echarts,
案例,
var,
data,
ECharts,
option
From： https://blog.csdn.net/2303_77733754/article/details/136654772