当前位置：首页 > wzjs >正文

古镇企业网站建设定制新闻发布平台有哪些

wzjs 2025/8/1 3:39:18

古镇企业网站建设定制,新闻发布平台有哪些,亳州市城乡建设局网站,安徽企业平台网站建设第一步：毫无头绪，跟AI要个初步的页面想做一个看板，但是毫无头绪，直接问AI：想做一个数据看板，主题不限，用echarts完成静态HTML页面。以下是AI反馈的代码： <!DOCTYPE html> …

第一步：毫无头绪，跟AI要个初步的页面

想做一个看板，但是毫无头绪，直接问AI：想做一个数据看板，主题不限，用echarts完成静态HTML页面。

以下是AI反馈的代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>销售数据看板</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><style>body {margin: 20px;background-color: #f0f2f5;}.dashboard {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 1400px;margin: 0 auto;}.chart-container {background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}#mainTitle {text-align: center;color: #2c3e50;margin-bottom: 30px;grid-column: 1 / -1;}</style>
</head>
<body><div class="dashboard"><h1 id="mainTitle">2023年销售数据看板</h1><!-- 图表容器 --><div class="chart-container" style="height:400px" id="monthlySales"></div><div class="chart-container" style="height:400px" id="categoryPie"></div><div class="chart-container" style="height:400px" id="salesTrend"></div><div class="chart-container" style="height:400px" id="regionMap"></div></div><script>// 模拟数据const monthlyData = {months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],sales: Array.from({length:12}, () => Math.floor(Math.random()*500 + 300))};const categoryData = [{ value: 1560, name: '电子产品' },{ value: 1048, name: '服装服饰' },{ value: 735, name: '家居用品' },{ value: 580, name: '食品饮料' }];// 初始化图表function initCharts() {// 月度柱状图const barChart = echarts.init(document.getElementById('monthlySales'));barChart.setOption({title: { text: '月度销售额', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: monthlyData.months},yAxis: { type: 'value' },series: [{data: monthlyData.sales,type: 'bar',itemStyle: { color: '#5470c6' },barWidth: '60%'}]});// 分类饼图const pieChart = echarts.init(document.getElementById('categoryPie'));pieChart.setOption({title: { text: '品类占比', left: 'center' },tooltip: { trigger: 'item' },series: [{type: 'pie',radius: '60%',data: categoryData,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});// 趋势折线图const lineChart = echarts.init(document.getElementById('salesTrend'));lineChart.setOption({title: { text: '销售趋势分析', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: monthlyData.months},yAxis: { type: 'value' },series: [{data: monthlyData.sales,type: 'line',smooth: true,lineStyle: { width: 3 },areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' },{ offset: 1, color: '#ffffff' }])}}]});// 地图（需要额外地图数据）const mapChart = echarts.init(document.getElementById('regionMap'));mapChart.setOption({title: { text: '区域销售分布', left: 'center' },tooltip: { trigger: 'item' },visualMap: {min: 0,max: 2000,text: ['高', '低'],realtime: false,calculable: true,inRange: { color: ['#e0f3f8', '#43a2ca'] }},series: [{type: 'map',map: 'China',data: [{ name: '广东', value: 1892 },{ name: '浙江', value: 1567 },{ name: '上海', value: 1420 },// 其他省份数据...],emphasis: { label: { show: true } }}]});}// 窗口大小变化时自适应window.onresize = () => {echarts.init(document.getElementById('monthlySales')).resize();echarts.init(document.getElementById('categoryPie')).resize();echarts.init(document.getElementById('salesTrend')).resize();echarts.init(document.getElementById('regionMap')).resize();};// 初始化window.onload = initCharts;</script>
</body>
</html>

第二步：检查引用的链接是否可用

确认以下CDN地址是否可用，很简单，把js文件地址贴进浏览器看看是否有内容：

贴进浏览器中，显示如下，有内容，可用。

第三步：保存成HTML文件

把代码贴进脚本编辑器中，保存成html文档。

第四步：看看效果

右键，打开于，浏览器，选择一个浏览器。

显示成这样：

第五步：修改修改样式，添加一些内容

美化看板，加标题，加导航条，改整体配色。把代码扔给AI，让AI改完整体反馈给你~

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>销售数据看板</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>:root {--primary-bg: #fff9f3;--card-bg: #ffffff;--text-color: #5a4e42;}/* 暗色主题 */.dark-theme {--primary-bg: #2d2d2d;--card-bg: #3d3d3d;--text-color: #e0e0e0;}body {margin: 0;background-color: var(--primary-bg);color: var(--text-color);font-family: "Microsoft YaHei", sans-serif;transition: background 0.3s ease;}.navbar {background: var(--card-bg);padding: 1rem 2rem;box-shadow: 0 2px 8px rgba(0,0,0,0.1);position: sticky;top: 0;z-index: 1000;}.nav-container {display: flex;justify-content: space-between;align-items: center;max-width: 1400px;margin: 0 auto;}.nav-links {display: flex;gap: 2rem;}.nav-links a {color: var(--text-color);text-decoration: none;padding: 0.5rem 1rem;border-radius: 4px;transition: all 0.3s ease;}.nav-links a:hover {background: rgba(0,0,0,0.1);}.dashboard {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 1400px;margin: 2rem auto;padding: 0 2rem;}.chart-container {background: var(--card-bg);padding: 20px;border-radius: 15px;box-shadow: 0 4px 12px rgba(0,0,0,0.08);transition: all 0.3s ease;}#mainTitle {text-align: center;margin: 2rem 0;grid-column: 1 / -1;color: var(--text-color);}/* 移动端适配 */@media (max-width: 768px) {.dashboard {grid-template-columns: 1fr;padding: 0 1rem;}.nav-links {display: none;}}
</style>
</head>
<body>
<nav class="navbar"><div class="nav-container"><h2>销售数据平台</h2><div class="nav-links"><a href="#dashboard">数据看板</a><a href="#analysis">数据分析</a><a href="#report">报表导出</a><a href="#" onclick="toggleTheme()">主题切换</a></div></div>
</nav><div class="dashboard"><h1 id="mainTitle">2023年销售数据看板</h1><div class="chart-container" style="height:400px" id="monthlySales"></div><div class="chart-container" style="height:400px" id="categoryPie"></div><div class="chart-container" style="height:400px" id="salesTrend"></div><div class="chart-container" style="height:400px" id="regionBar"></div>
</div><script>
// 配色方案
const lightColors = {bar: '#ffb3c6',pie: ['#ffd8a8', '#c8e7ff', '#d0f0c0', '#ffe6e6'],lineArea: ['#ffb3c6', '#ffffff'],regionBar: ['#ffd8a8', '#c8e7ff']
};const darkColors = {bar: '#d64161',pie: ['#4b8bbe', '#6b5b95', '#d64161', '#feb236'],lineArea: ['#40407a', '#2d2d2d'],regionBar: ['#40407a', '#34ace0']
};let currentTheme = 'light';// 模拟数据
const monthlyData = {months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],sales: Array.from({length:12}, () => Math.floor(Math.random()*500 + 300))
};const categoryData = [{ value: 1560, name: '电子产品' },{ value: 1048, name: '服装服饰' },{ value: 735, name: '家居用品' },{ value: 580, name: '食品饮料' }
];const regionData = [{ name: '华东地区', value: 2890 },{ name: '华南地区', value: 2450 },{ name: '华北地区', value: 1980 },{ name: '西南地区', value: 1670 },{ name: '东北地区', value: 1320 }
];function initCharts() {// 初始化所有图表...initBarChart();initPieChart();initLineChart();initRegionChart();
}function initBarChart() {const chart = echarts.init(document.getElementById('monthlySales'));chart.setOption({title: { text: '月度销售额', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: monthlyData.months,axisLabel: { color: 'var(--text-color)' }},yAxis: {type: 'value',axisLabel: { color: 'var(--text-color)' }},series: [{data: monthlyData.sales,type: 'bar',itemStyle: { color: currentTheme === 'light' ? lightColors.bar : darkColors.bar },barWidth: '60%'}]});
}function initPieChart() {const chart = echarts.init(document.getElementById('categoryPie'));chart.setOption({title: { text: '品类占比', left: 'center' },tooltip: { trigger: 'item' },color: currentTheme === 'light' ? lightColors.pie : darkColors.pie,series: [{type: 'pie',radius: '60%',data: categoryData,label: { color: 'var(--text-color)' },emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.3)'}}}]});
}function initLineChart() {const chart = echarts.init(document.getElementById('salesTrend'));chart.setOption({title: { text: '销售趋势分析', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: monthlyData.months,axisLabel: { color: 'var(--text-color)' }},yAxis: {type: 'value',axisLabel: { color: 'var(--text-color)' }},series: [{data: monthlyData.sales,type: 'line',smooth: true,lineStyle: {width: 3,color: currentTheme === 'light' ? lightColors.bar : darkColors.bar},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: currentTheme === 'light' ? lightColors.lineArea : darkColors.lineArea },{ offset: 1, color: currentTheme === 'light' ? lightColors.lineArea : darkColors.lineArea }])}}]});
}function initRegionChart() {const chart = echarts.init(document.getElementById('regionBar'));chart.setOption({title: { text: '区域销售额对比', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: regionData.map(item => item.name),axisLabel: {color: 'var(--text-color)',rotate: 45}},yAxis: {type: 'value',axisLabel: { color: 'var(--text-color)' }},series: [{data: regionData.map(item => item.value),type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: currentTheme === 'light' ? lightColors.regionBar : darkColors.regionBar },{ offset: 1, color: currentTheme === 'light' ? lightColors.regionBar : darkColors.regionBar }])},barWidth: '40%',label: {show: true,position: 'top',color: 'var(--text-color)'}}]});
}// 主题切换
function toggleTheme() {document.body.classList.toggle('dark-theme');currentTheme = currentTheme === 'light' ? 'dark' : 'light';refreshCharts();
}// 图表刷新
function refreshCharts() {echarts.dispose(document.getElementById('monthlySales'));echarts.dispose(document.getElementById('categoryPie'));echarts.dispose(document.getElementById('salesTrend'));echarts.dispose(document.getElementById('regionBar'));initCharts();
}// 响应式调整
window.addEventListener('resize', () => {[document.getElementById('monthlySales'),document.getElementById('categoryPie'),document.getElementById('salesTrend'),document.getElementById('regionBar')].forEach(dom => {echarts.getInstanceByDom(dom)?.resize();});
});window.onload = initCharts;
</script>
</body>
</html>