ECharts 多种图表类型展示
原创
ECharts 多种图表类型展示
原创
小焱写作
发布于 2025-09-03 08:26:15
发布于 2025-09-03 08:26:15
代码可运行
运行总次数：0
代码可运行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 多种图表类型示例</title>
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 mb-3">ECharts 多种图表类型展示</h1>
<p class="text-gray-600">展示折线图、柱状图、饼图和散点图的基本用法</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- 折线图容器 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h2 class="text-lg font-semibold text-gray-700 mb-3">折线图 - 月度销售额趋势</h2>
<div id="lineChart" class="w-full h-[300px]"></div>
</div>
<!-- 柱状图容器 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h2 class="text-lg font-semibold text-gray-700 mb-3">柱状图 - 产品销量对比</h2>
<div id="barChart" class="w-full h-[300px]"></div>
</div>
<!-- 饼图容器 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h2 class="text-lg font-semibold text-gray-700 mb-3">饼图 - 市场份额分布</h2>
<div id="pieChart" class="w-full h-[300px]"></div>
</div>
<!-- 散点图容器 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h2 class="text-lg font-semibold text-gray-700 mb-3">散点图 - 身高体重分布</h2>
<div id="scatterChart" class="w-full h-[300px]"></div>
</div>
</div>
</div>
<script>
// 初始化所有图表
window.addEventListener('load', function() {
initLineChart();
initBarChart();
initPieChart();
initScatterChart();
// 响应窗口大小变化
window.addEventListener('resize', function() {
echarts.getInstanceByDom(document.getElementById('lineChart')).resize();
echarts.getInstanceByDom(document.getElementById('barChart')).resize();
echarts.getInstanceByDom(document.getElementById('pieChart')).resize();
echarts.getInstanceByDom(document.getElementById('scatterChart')).resize();
});
});
// 1. 折线图 - 月度销售额趋势
function initLineChart() {
const chart = echarts.init(document.getElementById('lineChart'));
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2022年', '2023年'],
bottom: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
name: '销售额(万元)'
},
series: [
{
name: '2022年',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 230, 190, 130, 140, 190],
smooth: true,
lineStyle: {
width: 3
},
symbol: 'circle',
symbolSize: 8
},
{
name: '2023年',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410, 330, 390, 330, 340, 390],
smooth: true,
lineStyle: {
width: 3,
type: 'dashed'
},
symbol: 'diamond',
symbolSize: 8
}
]
};
chart.setOption(option);
}
// 2. 柱状图 - 产品销量对比
function initBarChart() {
const chart = echarts.init(document.getElementById('barChart'));
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['线上', '线下'],
bottom: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['手机', '电脑', '平板', '手表', '耳机', '其他配件']
},
yAxis: {
type: 'value',
name: '销量(台)'
},
series: [
{
name: '线上',
type: 'bar',
data: [3500, 2200, 1800, 2800, 4200, 1500],
itemStyle: {
color: '#3b82f6'
},
emphasis: {
itemStyle: {
color: '#1d4ed8'
}
}
},
{
name: '线下',
type: 'bar',
data: [1800, 2500, 1200, 1500, 1900, 900],
itemStyle: {
color: '#10b981'
},
emphasis: {
itemStyle: {
color: '#059669'
}
}
}
]
};
chart.setOption(option);
}
// 3. 饼图 - 市场份额分布
function initPieChart() {
const chart = echarts.init(document.getElementById('pieChart'));
const option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 10,
bottom: 10,
top: 'center'
},
series: [
{
name: '市场份额',
type: 'pie',
radius: ['40%', '70%'], // 环形图
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 35, name: '品牌A' },
{ value: 25, name: '品牌B' },
{ value: 20, name: '品牌C' },
{ value: 15, name: '品牌D' },
{ value: 5, name: '其他' }
]
}
]
};
chart.setOption(option);
}
// 4. 散点图 - 身高体重分布
function initScatterChart() {
const chart = echarts.init(document.getElementById('scatterChart'));
// 生成模拟数据：身高(cm)和体重(kg)
function generateData(count) {
const data = [];
for (let i = 0; i < count; i++) {
// 男性数据
const maleHeight = 160 + Math.random() * 25;
const maleWeight = 50 + Math.random() * 30;
data.push([maleHeight, maleWeight, '男']);
// 女性数据
const femaleHeight = 150 + Math.random() * 20;
const femaleWeight = 40 + Math.random() * 20;
data.push([femaleHeight, femaleWeight, '女']);
}
return data;
}
const data = generateData(50);
const option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return `身高: ${params.data[0].toFixed(1)}cm<br>体重: ${params.data[1].toFixed(1)}kg<br>性别: ${params.data[2]}`;
}
},
legend: {
data: ['男', '女'],
bottom: 0
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'value',
name: '身高(cm)',
min: 140,
max: 190
},
yAxis: {
type: 'value',
name: '体重(kg)',
min: 30,
max: 90
},
series: [
{
name: '男',
type: 'scatter',
data: data.filter(item => item[2] === '男').map(item => [item[0], item[1]]),
symbolSize: 10,
itemStyle: {
color: '#3b82f6'
}
},
{
name: '女',
type: 'scatter',
data: data.filter(item => item[2] === '女').map(item => [item[0], item[1]]),
symbolSize: 10,
itemStyle: {
color: '#ec4899'
}
}
]
};
chart.setOption(option);
}
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
