WEB程序开发笔记
WEB程序开发笔记
浏览器打开Github页面并登录，然后搜索apache/echarts项目，并从其release页面找最新版本的链接。
（如果GitHub访问慢或打不开，可以参考本站分享的GitHub镜像站）
点击下载页面下方Assets中的Source code，解压后dist目录下的 echarts.js 即为包含完整ECharts功能的文件。
echarts.js文件体积太大，建议使用echarts.min.js。
把上一步下载的echarts.min.js文件放到你的项目目录下，然后在需要的html页面中引入echarts.min.js文件，接下来就可以绘制ECharts图表了。
👇🏻👇🏻下面就一个完整的示例，赶紧试试吧（注意其中的echarts.min.js需要更改为自己项目的实际路径）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>页面标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="main" style="width: 680px; height: 400px"></div>
<script src="./assets/echarts.min.js"></script>
<script>
function renderSettleChart() {
const myChart = echarts.init(document.getElementById("main"));
const lineColor = "#e5e5e5";
const option = {
color: ["#007bff"],
title: {
text: "交易数据统计",
},
legend: {
right: 20,
top: 10,
icon: "circle",
textStyle: {
color: "#aaa",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"2024-1",
"2024-2",
"2024-3",
"2024-4",
"2024-5",
"2024-6",
"2024-7",
],
axisLine: {
symbol: ["none", "triangle"],
symbolOffset: 30,
symbolSize: [8, 8],
lineStyle: {
color: lineColor,
shadowOffsetX: 28,
shadowColor: lineColor,
},
},
splitLine: {
show: true,
lineStyle: {
color: lineColor,
},
},
axisLabel: {
color: "#aaa",
},
},
yAxis: {
type: "value",
axisLine: {
show: true,
symbol: ["none", "arrow"],
symbolOffset: 30,
symbolSize: [8, 8],
lineStyle: {
color: lineColor,
shadowOffsetY: -28,
shadowColor: lineColor,
},
},
splitLine: {
lineStyle: {
color: lineColor,
},
},
axisLabel: {
color: "#aaa",
},
},
tooltip: {
trigger: "item",
position: "top",
formatter:
'<p style="color: #81817E; font-size: 12px;">交易金额：<span style="color: #000; font-size: 12px;">{c}元</span></p>',
padding: [5, 10],
borderColor: "#d8d8d8",
extraCssText:
"box-shadow: 0 0 6px 2px #bcbcbc6b; border-radius: 0;",
},
series: [
{
name: "交易金额",
data: [620, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
lineStyle: {
width: 1,
color: "#007bff",
},
symbol: "circle",
symbolSize: 5,
areaStyle: {
color: "#007bff",
// opacity: 1,
},
},
],
};
myChart.setOption(option);
return myChart;
}
const myChart = renderSettleChart();
// 模拟异步更新数据
setTimeout(() => {
myChart.setOption({
xAxis: {
data: data.categories,
},
series: [
{
// 注意：根据名字对应到相应的系列
name: "交易金额",
data: data.data,
},
],
});
}, 5000);
</script>
</body>
</html>
🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。
