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

营销型网站有那些网站搜狗排名优化工具

wzjs 2025/8/4 12:33:56
营销型网站有那些网站,搜狗排名优化工具,湛江网站制作优化,购物网站服务器带宽目录 一、简单介绍 1.1 常见类型 二、时间轴错乱问题 2.1 示例 2.2 示例完整代码 2.3 问题分析 2.4 修复方法 第一步 第二步 2.5 优化后完整代码 一、简单介绍 ECharts 是一款基于 JavaScript 的数据可视化图表库，动态图表是 ECharts 的一个重要应用场景…

目录

一、简单介绍

1.1 常见类型

二、时间轴错乱问题

2.1 示例

2.2 示例完整代码

2.3 问题分析

2.4 修复方法

第一步

第二步

2.5 优化后完整代码

一、简单介绍

ECharts 是一款基于 JavaScript 的数据可视化图表库，动态图表是 ECharts 的一个重要应用场景，它可以让数据展示更加生动、直观，帮助用户更好地理解数据的变化趋势。以下是关于 ECharts 动态图表的详细介绍：

1.1 常见类型

  • 动态折线图：展示数据随时间或其他连续变量的变化趋势，比如股票价格走势、气温变化等。动态折线图可以通过定时更新数据，实时反映最新的变化情况。
  • 动态柱状图：用于对比不同类别数据的数值大小。动态效果可以是柱状图的增长、缩短，或者柱状图的顺序变换等，常用于展示数据的实时排名、销售业绩的动态对比等。
  • 动态饼图：突出显示各部分在总体中所占的比例。动态效果可以是扇区的大小变化、颜色闪烁等，适合用于展示市场份额的动态变化、不同类别数据占比的实时调整等。
  • 动态散点图：可以展示多个变量之间的关系，通过动态效果（如散点的移动、闪烁）来反映数据的实时变动，常用于分析数据的相关性、异常值的动态监测等。

二、时间轴错乱问题

2.1 示例

Examples - Apache ECharts参考：Examples - Apache ECharts

这是一幅多条折线组成的通过率趋势图，用于展示不同类别（1-1、1-2、1-3 ）在多个时间节点（横轴日期）的通过率变化情况。

可以发现，页面出现了时间轴顺序错乱的效果，X 轴日期因字符串排序导致逻辑混乱，日期 0516 本应在 0627 之前，但图表中显示在最右侧，导致时间逻辑混乱。

2.2 示例完整代码

以下是一个完整的 HTML 示例，包含原始数据乱序、排序后再渲染图表的过程：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>折线图</title><!-- 引入 ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/dayjs/dist/dayjs.min.js"></script><style>/* 给两个图表容器设置样式，避免重叠 */.chart-container {width: 800px; height: 500px; margin-bottom: 30px; /* 上下图表间距 */}</style>
</head>
<body><!-- 图表容器 --><div id="chart1" class="chart-container"></div><script>// ===================== 数据及图表配置 =====================const rawData1 = [['日期', '模块', '通过率'],// Phone - -1['0418', '1-1', 98],['0422', '1-1', 97],['0425', '1-1', 96],['0429', '1-1', 96],['0513', '1-1', 99],['0516', '1-1', '-'],['0523', '1-1', 39],['0527', '1-1', 96],['0530', '1-1', 96],['0603', '1-1', 98],['0627', '1-1', ],['0418', '1-2', 98],['0422', '1-2', 98],['0425', '1-2', 96],['0429', '1-2', 98],['0513', '1-2', 100],['0516', '1-2', 97],['0523', '1-2', 89],['0527', '1-2', 98],['0530', '1-2', 98],['0603', '1-2', 100],['0627', '1-2', 95],['0418', '1-3', 89],['0422', '1-3', 93],['0425', '1-3', 89],['0429', '1-3', 93],['0513', '1-3', 97],['0516', '1-3', '-'],['0523', '1-3', 90],['0527', '1-3', 95],['0530', '1-3', 95],['0603', '1-3', 91],['0627', '1-3', 92],['0418', '1-4', 95],['0422', '1-4', 93],['0425', '1-4', 96],['0429', '1-4', 93],['0513', '1-4', 97],['0516', '1-4', '-'],['0523', '1-4', 95],['0527', '1-4', 93],['0530', '1-4', 96],['0603', '1-4', 94],['0627', '1-4', '-'],];// 数据预处理：过滤无效值function filterData(data){return data.filter((row, index) => {if (index === 0) return true;     // 跳过表头 & 通过率为'-'的项return row[2] !== '-'; });}// ===================== 通用图表渲染函数 =====================/*** 渲染 ECharts 折线图* @param {string} domId - 容器 DOM ID* @param {array} data - 原始数据（格式：[['日期','维度','值'], ...]）* @param {string} groupKey - 分组维度（如 '模块' 或 '机型_模块'）* @param {string} titleText - 图表标题*/function renderEChart(domId, data, groupKey, titleText) {const myChart = echarts.init(document.getElementById(domId));const groups = [...new Set(data.map(item => item[1]))]; // 提取分组（如模块、机型_模块）const datasetWithFilters = [];const seriesList = [];groups.forEach(group => {const datasetId = `dataset_${group}`;datasetWithFilters.push({id: datasetId,fromDatasetId: 'dataset_raw',transform: {type: 'filter',config: { dimension: groupKey, '=': group }}});seriesList.push({type: 'line',datasetId: datasetId,showSymbol: true,name: group,endLabel: {show: true,formatter: (params) => `${params.value[1]}`},emphasis: { focus: 'series' },encode: {x: '日期',y: '通过率',label: [groupKey, '通过率'],itemName: '日期',tooltip: ['通过率'],seriesName: '模块'}});});const option = {animationDuration: 2000,seriesLayoutBy: 'seriesName',dataset: [{ id: 'dataset_raw', source: data },...datasetWithFilters],title: { text: titleText, left: 'center' },tooltip: {trigger: 'axis', order: 'valueDesc',axisPointer: { type: 'shadow' } // 鼠标指向时显示阴影指示器，增强交互},xAxis: { type: 'category',nameLocation: 'middle'},yAxis: {type: 'value',name: '通过率(%)',min: 10, // 过滤过低无效值（如测试阶段的异常值）max: 100, // 固定最大值为 100%，避免刻度溢出interval: 10 // 刻度间隔设为 10%，减少刻度密度},grid: {right: 150, // 从 100 调整为 150，增加右侧空间left: 60, // 左侧预留足够空间显示 Y 轴名称top: 50,bottom: 80 // 底部增加空间，避免 X 轴日期重叠},series: seriesList};myChart.setOption(option);}// ===================== 调用函数渲染图表 =====================renderEChart('chart1', filterData(rawData1),'模块', '通过率趋势');</script>
</body>
</html>

2.3 问题分析

多条折线的data中存在“-”，是因为我想要展示有的折线不存在该日期的数据，使用“-”来表示无数据情况。

从代码中可以看出 X 轴绘制是用的category 类型，是直接赋值渲染。category 类型的 X 轴，会严格按照 xAxis.data 数组的顺序展示类目。

发现直接赋值渲染，则页面会出现时间轴顺序错乱的效果。 

2.4 修复方法

第一步

重新修改折线图数据规则：需展示全量日期序列，无对应值的日期保留空数据占位。

例如，折线中的某一天数据为['0516', '1-3', '-'],时，其完整数据需包含所有日期节点，无值节点以空项填充，最终格式['0516', '1-3', ]。如下图所示，

修改后保存html文件，重新用浏览器打开。

经过第一步修改后的展示效果如下图所示。

当前展示效果中，X 轴的日期能按正常逻辑显示 ，但 1-1、1-3、1-4折线图都因存在无对应值的日期节点（数据中以空项形式呈现 ），在可视化呈现时出现了折线断裂（断层）的情况；而 1-2 折线图由于数据完整度较好，未出现此类问题，展示状态正常 。

第二步

参考：Documentation - Apache ECharts  配置文件

经过第一步修改后的展示效果中出现折线断裂情况。是因为，ECharts中的默认行为是若数据中存在 null（或空值占位 ），折线会在 null 处断裂，不连接两侧的有效点。

我们可以使用connectNulls这个属性来解决。

在 ECharts 中，connectNulls 是系列（series） 的配置属性，用于设置是否连接折线图中 null 数据点两侧的有效数据点。而connectNulls: true 是 ECharts 中折线图（line 系列） 的关键配置，用于控制包含 null 数据点时，折线是否连接两侧的有效数据，解决折线 “断层” 问题。

具体修改方法如下，

修改后保存html文件，重新用浏览器打开。

经过第二步修改后的展示效果如下图所示。

从展示效果来看， X 轴呈现的是从 0418 到 0627 的时间序列，此前因日期以字符串形式按字典序排序出现乱序状况。经修复后，如今日期已能依照正常的时间逻辑有序排列，保障了时间维度展示的准确性，为基于时间序列分析各系列通过率趋势筑牢基础，让数据随时间的变化呈现更贴合实际业务进程。

2.5 优化后完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>折线图</title><!-- 引入 ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/dayjs/dist/dayjs.min.js"></script><style>/* 给两个图表容器设置样式，避免重叠 */.chart-container {width: 800px; height: 500px; margin-bottom: 30px; /* 上下图表间距 */}</style>
</head>
<body><!-- 图表容器 --><div id="chart1" class="chart-container"></div><script>// ===================== 数据及图表配置 =====================const rawData1 = [['日期', '模块', '通过率'],// Phone - -1['0418', '1-1', 98],['0422', '1-1', 97],['0425', '1-1', 96],['0429', '1-1', 96],['0513', '1-1', 99],['0516', '1-1', ],['0523', '1-1', 39],['0527', '1-1', 96],['0530', '1-1', 96],['0603', '1-1', 98],['0627', '1-1', ],['0418', '1-2', 98],['0422', '1-2', 98],['0425', '1-2', 96],['0429', '1-2', 98],['0513', '1-2', 100],['0516', '1-2', 97],['0523', '1-2', 89],['0527', '1-2', 98],['0530', '1-2', 98],['0603', '1-2', 100],['0627', '1-2', 95],['0418', '1-3', 89],['0422', '1-3', 93],['0425', '1-3', 89],['0429', '1-3', 93],['0513', '1-3', 97],['0516', '1-3', ],['0523', '1-3', 90],['0527', '1-3', 95],['0530', '1-3', 95],['0603', '1-3', 91],['0627', '1-3', 92],['0418', '1-4', 95],['0422', '1-4', 93],['0425', '1-4', 96],['0429', '1-4', 93],['0513', '1-4', 97],['0516', '1-4', ],['0523', '1-4', 95],['0527', '1-4', 93],['0530', '1-4', 96],['0603', '1-4', 94],['0627', '1-4', ],];// 数据预处理：过滤无效值function filterData(data){return data.filter((row, index) => {if (index === 0) return true;     // 跳过表头 & 通过率为'-'的项return row[2] !== '-'; });}// ===================== 通用图表渲染函数 =====================/*** 渲染 ECharts 折线图* @param {string} domId - 容器 DOM ID* @param {array} data - 原始数据（格式：[['日期','维度','值'], ...]）* @param {string} groupKey - 分组维度（如 '模块' 或 '机型_模块'）* @param {string} titleText - 图表标题*/function renderEChart(domId, data, groupKey, titleText) {const myChart = echarts.init(document.getElementById(domId));const groups = [...new Set(data.map(item => item[1]))]; // 提取分组（如模块、机型_模块）const datasetWithFilters = [];const seriesList = [];groups.forEach(group => {const datasetId = `dataset_${group}`;datasetWithFilters.push({id: datasetId,fromDatasetId: 'dataset_raw',transform: {type: 'filter',config: { dimension: groupKey, '=': group }}});seriesList.push({type: 'line',connectNulls: true,datasetId: datasetId,showSymbol: true,name: group,endLabel: {show: true,formatter: (params) => `${params.value[1]}`},emphasis: { focus: 'series' },encode: {x: '日期',y: '通过率',label: [groupKey, '通过率'],itemName: '日期',tooltip: ['通过率'],seriesName: '模块'}});});const option = {animationDuration: 2000,seriesLayoutBy: 'seriesName',dataset: [{ id: 'dataset_raw', source: data },...datasetWithFilters],title: { text: titleText, left: 'center' },tooltip: {trigger: 'axis', order: 'valueDesc',axisPointer: { type: 'shadow' } // 鼠标指向时显示阴影指示器，增强交互},xAxis: { type: 'category',nameLocation: 'middle'},yAxis: {type: 'value',name: '通过率(%)',min: 10, // 过滤过低无效值（如测试阶段的异常值）max: 100, // 固定最大值为 100%，避免刻度溢出interval: 10 // 刻度间隔设为 10%，减少刻度密度},grid: {right: 150, // 从 100 调整为 150，增加右侧空间left: 60, // 左侧预留足够空间显示 Y 轴名称top: 50,bottom: 80 // 底部增加空间，避免 X 轴日期重叠},series: seriesList};myChart.setOption(option);}// ===================== 调用函数渲染图表 =====================renderEChart('chart1', filterData(rawData1),'模块', '通过率趋势');</script>
</body>
</html>

通过以上步骤，就能解决 category 类型 X 轴显示乱序的问题，让 X 轴按照你期望的固定顺序展示类目啦。

http://www.dtcms.com/wzjs/215605.html

相关文章：

  • 房屋装修设计网站苏州seo优化
  • wordpress 网站名称seo专家是什么意思
  • 网络广告视频win7优化设置
  • 北京建设网站图片免费刷赞网站推广qq免费
  • 网站推广页面设计企业网页设计与推广
  • 江门网站建设易搜互联产品免费推广网站有哪些
  • adobe premiere网站结构优化
  • 只做正品的网站建网站软件工具
  • 网站入口首页百度一下你就知道百度官网
  • 家居饰品网站建设论文360推广登陆
  • 张家港网站建设做网站广告公司排名
  • 服务商标有哪些seo关键词排名优化哪家好
  • 网站运营怎么做无锡网站制作推广
  • wordpress插件 知乎长沙网站seo诊断
  • 购物网站开发可行性分析怎么写常用的网络推广方法有
  • 淘宝上做网站SEO靠谱吗seo网站优化培训价格
  • 龙岗区建设规划网站网络推广的方法有哪些
  • wordpress 完整主题下载津seo快速排名
  • 建设一个电影网站需要多少钱最近国家新闻
  • PC端网站开发以及设计费用实时热榜
  • 镇江网站制作价格如何计算站长统计app软件
  • 汕头建站网站模板怎样做网站
  • 彩票的网站怎么做的微信营销平台有哪些
  • 网站建设栏目说明专业营销策划团队
  • 网页设计结果分析怎么写广东企业网站seo哪里好
  • 网站制作和如何推广网络营销方法和手段
  • 做外链一定要淘宝网站吗网店买卖有哪些平台
  • 沧浪公司网站建设电话semseo
  • wordpress四川华体陕西seo
  • 网站开发如何避开法律近期的时事热点或新闻事件