小序
今日，高考的号角已然吹响。在这阳光灿烂、风景如画的日子里，愿每一位考生都能心怀从容，笔下生风，顺利跨越这场人生的重要关卡。高考，是青春的试炼，亦是梦想的起点。愿你们在这个充满希望的季节里，收获满满的自信与成功！
今天来谈一谈echart 的使用，继续介绍web开发的一些内容
引言
在Web开发的旅程中，数据可视化的实现方式多种多样。从简单的柱状图、折线图，到复杂的地理热力图和动态交互图表，ECharts为我们提供了一个强大的工具。它不仅支持丰富的图表类型，还能够通过简单的配置生成高质量的可视化效果。无论是初学者还是经验丰富的开发者，ECharts都能满足他们的需求。本文将通过三个具体的场景，展示ECharts在不同开发环境中的应用，帮助读者更好地理解和掌握如何在项目中使用ECharts。
Echarts简介
ECharts是一个基于JavaScript的开源可视化图表库，由百度开源。它支持多种图表类型，如折线图、柱状图、饼图、散点图、雷达图、地图、K线图、热力图、仪表盘等。ECharts的核心优势在于其强大的配置能力和丰富的图表类型，能够满足各种复杂的数据可视化需求。通过简单的配置，开发者可以快速生成美观且功能强大的图表。
Echarts在HTML中的使用
在普通的HTML页面中嵌入ECharts图表是最基础的使用方式。这种方式适用于简单的Web项目或静态页面，开发者可以直接在HTML文件中引入ECharts的JavaScript库，并通过配置生成图表。
我们废话不多说，直接看示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts折线图示例：用户满意度评分</title>
<!-- 引入ECharts库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#chartContainer {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 准备一个具备大小的DOM容器 -->
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
<script>
// 初始化图表
const chart = echarts.init(document.getElementById('chartContainer'));
// 配置图表选项
const option = {
title: {
text: '用户满意度评分趋势',
left: 'center',
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#ccc'
}
}
},
legend: {
data: ['评分'],
right: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
axisLine: {
lineStyle: {
color: '#666'
}
},
axisLabel: {
textStyle: {
color: '#666'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 10,
interval: 2,
name: '评分（满分10分）',
axisLine: {
lineStyle: {
color: '#666'
}
},
axisLabel: {
textStyle: {
color: '#666'
}
}
},
series: [{
name: '评分',
type: 'line',
data: [7.5, 8.2, 6.8, 9.0, 7.0, 8.5],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#2f7ed8',
width: 2
},
itemStyle: {
color: '#2f7ed8'
},
areaStyle: {
color: 'rgba(47, 126, 216, 0.2)'
},
label: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
color: '#2f7ed8',
fontSize: 12
}
},
smooth: true, // 平滑曲线
animationDuration: 1000, // 动画时长
animationEasing: 'elasticOut' // 动画效果
}]
};
// 应用配置
chart.setOption(option);
// 响应式调整（可选）
window.addEventListener('resize', function() {
chart.resize();
});
</script>
</body>
</html>
值得注意的是：
（1）添加了smooth: true，使折线图的线条更加平滑
（2）设置了animationDuration: 1000和animationEasing: ‘elasticOut’，为图表加载时添加弹性动效
（3）折线下方的区域填充了半透明的蓝色，使图表更具层次感
（4）响应式设计 图表会根据窗口大小自动调整大小，确保在不同设备上都能良好显示
Python后端与ECharts的融合
对于一些需要后端处理数据的场景，Python是一个强大的工具。通过Python的Web框架（如Flask或Django），我们可以将数据处理逻辑放在后端，然后将生成的ECharts配置传递到前端进行渲染。这种方式结合了Python的后端处理能力和ECharts的前端可视化能力，适用于数据动态生成的场景。
注意事项
确保已经安装了 pyecharts 库。如果没有安装，可以通过以下命令安装：
pip install pyecharts
保存为一个py文件运行即可，运行后会在当前目录生成一个名为 user_satisfaction_line_chart.html 的文件，打开该文件即可查看生成的折线图
场景适用于Python后端的WEB开发中，能够很好地与Flask、Django结合
效果除了上面html的显示外，还支持数据缩放功能
Vue.js中的ECharts集成
Vue.js是一个流行的前端框架，以其简洁的语法和高效的性能受到开发者的喜爱。在Vue.js项目中集成ECharts可以实现更复杂的交互效果和动态数据绑定。通过Vue.js的组件化开发模式，我们可以将ECharts图表封装为独立的组件，方便在项目中复用。
<template>
<div class="chart-container" ref="chartContainer"></div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
DataZoomComponent
} from 'echarts/components';
// 注册必要的组件
echarts.use([
CanvasRenderer,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
DataZoomComponent
]);
export default {
setup() {
const chartContainer = ref(null);
let myChart = null;
const chartOptions = {
title: {
text: '用户满意度评分趋势',
left: 'center',
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#ccc'
}
}
},
legend: {
data: ['评分'],
right: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
axisLine: {
lineStyle: {
color: '#666'
}
},
axisLabel: {
textStyle: {
color: '#666'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 10,
interval: 2,
name: '评分（满分10分）',
axisLine: {
lineStyle: {
color: '#666'
}
},
axisLabel: {
textStyle: {
color: '#666'
}
}
},
series: [
{
name: '评分',
type: 'line',
data: [7.5, 8.2, 6.8, 9.0, 7.0, 8.5],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#2f7ed8',
width: 2
},
itemStyle: {
color: '#2f7ed8'
},
areaStyle: {
color: 'rgba(47, 126, 216, 0.2)'
},
label: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
color: '#2f7ed8',
fontSize: 12
}
},
smooth: true, // 平滑曲线
animationDuration: 1000, // 动画时长
animationEasing: 'elasticOut' // 动画效果
}
]
};
onMounted(() => {
myChart = echarts.init(chartContainer.value);
myChart.setOption(chartOptions);
window.addEventListener('resize', () => {
myChart.resize();
});
});
onUnmounted(() => {
window.removeEventListener('resize', () => {
myChart.resize();
});
myChart.dispose();
});
return {
chartContainer
};
}
};
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px;
}
</style>
以上使用 Vue 3 的 Composition API (setup 函数) 来组织代码，逻辑清晰，易于维护。且使用 ref 来管理 DOM 元素引用，符合 Vue 3 的响应式原则。
在 onMounted 中注册了窗口大小变化的监听器 (window.addEventListener(‘resize’, …))，确保图表在窗口大小变化时能够自动调整尺寸。在 onUnmounted 中移除了监听器，避免内存泄漏。
小结
上面总共介绍了三种方式的ECHARTS应用，分别从 html、python和vue三个方面描述echarts 的使用。下一篇会单独介绍下 vue-charts 的应用，大家也可以试下，看看前端的显示如何，欢迎在我的评论区交流。也可以在评论区给出你们想看的内容，有时间我会及时更新的！
结束语
高考是人生的新起点
想到了一首个人非常喜欢的词，在这里与大家共勉
白苎新袍入嫩凉，春蚕食叶响回廊。禹门已准桃花浪，月殿先收桂子香。
鹏北海，凤朝阳，又携书剑路茫茫。明年此日青云去，却笑人间举子忙。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
