简体中文 繁體中文 English Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français Japanese

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：为庆祝网站一周年，将在5.1日与5.2日开放注册，具体信息请见后续详细公告
04-22 00:04
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

从基础表格到炫酷可视化图表 echarts如何彻底改变传统数据展示方式让那些原本枯燥的数据讲述更加生动有趣的故事

威震华夏关云长
SunJu_FaceMall

3万

主题

1158

科技点

3万

积分

白金月票

碾压王

积分
32796

立华奏
发表于 2025-8-22 16:00:45 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言：数据可视化的新时代

在信息爆炸的今天，数据已成为企业和组织决策的重要依据。然而，原始数据本身往往是枯燥、难以理解的。如何将这些枯燥的数据转化为直观、易于理解的信息，成为数据分析师和开发人员面临的重要挑战。ECharts（Enterprise Charts）作为一款由百度开源的、功能强大的数据可视化库，正在彻底改变传统的数据展示方式，让数据能够讲述更加生动有趣的故事。

传统数据展示方式的局限性

传统数据展示主要依赖于基础表格和简单图表，这些方式存在明显局限性：

1. 信息密度低：传统表格只能展示有限的数据维度，难以呈现复杂的数据关系。
2. 视觉吸引力弱：静态的表格和基础图表缺乏视觉冲击力，无法吸引观众的注意力。
3. 交互性差：传统展示方式通常缺乏交互功能，用户无法自由探索数据。
4. 故事性不足：难以通过传统表格和图表构建连贯的数据叙事，无法有效传达数据背后的洞察。

例如，一份销售数据表格可能如下所示：
  2. | 月份 | 产品A | 产品B | 产品C | 总销售额 |
  3. |------|-------|-------|-------|----------|
  4. | 1月  | 12000 | 15000 | 8000  | 35000    |
  5. | 2月  | 15000 | 18000 | 9000  | 42000    |
  6. | 3月  | 18000 | 20000 | 12000 | 50000    |
复制代码

这样的表格虽然准确，但无法直观地展示销售趋势、产品比较或季节性变化等关键信息。

ECharts简介及其优势

ECharts是一款基于JavaScript的开源可视化库，由百度团队开发并维护。它提供了丰富的图表类型和强大的交互功能，能够帮助开发者轻松创建各种复杂的数据可视化效果。

ECharts的主要优势包括：

1. 丰富的图表类型：支持折线图、柱状图、饼图、散点图、地图、热力图等多种图表类型。
2. 强大的交互功能：支持数据缩放、数据视图、图例开关、值域漫游等交互操作。
3. 高度可定制：几乎可以定制图表的每一个元素，满足各种个性化需求。
4. 跨平台兼容：支持PC端和移动端，兼容主流浏览器。
5. 动态数据更新：支持实时数据更新，适合展示动态变化的数据。
6. 开源免费：遵循Apache-2.0开源协议，免费使用。

ECharts的核心功能和特性

1. 多样化的图表类型

ECharts支持20多种常见的图表类型，并且这些图表类型可以自由组合，形成更加复杂的图表。例如，可以将折线图和柱状图组合在一起，同时展示趋势和具体数值。

2. 交互式数据探索

ECharts提供了丰富的交互功能，让用户可以自由探索数据。例如，通过缩放功能可以查看特定时间段的数据细节，通过图例开关可以显示或隐藏特定数据系列。

3. 动态数据更新

ECharts支持动态数据更新，可以实时展示数据变化。这一特性在监控大屏、实时数据分析等场景中尤为有用。

4. 大数据量渲染优化

ECharts针对大数据量进行了优化，可以流畅渲染百万级数据点，满足大数据可视化的需求。

5. 响应式设计

ECharts图表可以自适应容器大小，在不同设备上都能良好展示。

实际案例展示：从表格到图表的转变

让我们通过一个实际案例，展示如何将一个简单的销售数据表格转变为生动的ECharts可视化图表。

假设我们有以下销售数据表格：
  2. | 月份 | 产品A | 产品B | 产品C | 产品D |
  3. |------|-------|-------|-------|-------|
  4. | 1月  | 12000 | 15000 | 8000  | 10000 |
  5. | 2月  | 15000 | 18000 | 9000  | 12000 |
  6. | 3月  | 18000 | 20000 | 12000 | 15000 |
  7. | 4月  | 20000 | 22000 | 14000 | 18000 |
  8. | 5月  | 22000 | 25000 | 16000 | 20000 |
  9. | 6月  | 25000 | 28000 | 18000 | 22000 |
复制代码

使用ECharts，我们可以创建一个交互式的多系列折线图：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>销售数据可视化</title>
  7.     <!-- 引入 ECharts 文件 -->
  8.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  12.     <div id="main" style="width: 800px;height:400px;"></div>
  13.     <script type="text/javascript">
  14.         // 基于准备好的dom，初始化echarts实例
  15.         var myChart = echarts.init(document.getElementById('main'));
  17.         // 指定图表的配置项和数据
  18.         var option = {
  19.             title: {
  20.                 text: '2023年上半年产品销售趋势'
  21.             },
  22.             tooltip: {
  23.                 trigger: 'axis'
  24.             },
  25.             legend: {
  26.                 data: ['产品A', '产品B', '产品C', '产品D']
  27.             },
  28.             grid: {
  29.                 left: '3%',
  30.                 right: '4%',
  31.                 bottom: '3%',
  32.                 containLabel: true
  33.             },
  34.             toolbox: {
  35.                 feature: {
  36.                     saveAsImage: {}
  37.                 }
  38.             },
  39.             xAxis: {
  40.                 type: 'category',
  41.                 boundaryGap: false,
  42.                 data: ['1月', '2月', '3月', '4月', '5月', '6月']
  43.             },
  44.             yAxis: {
  45.                 type: 'value'
  46.             },
  47.             series: [
  48.                 {
  49.                     name: '产品A',
  50.                     type: 'line',
  51.                     data: [12000, 15000, 18000, 20000, 22000, 25000]
  52.                 },
  53.                 {
  54.                     name: '产品B',
  55.                     type: 'line',
  56.                     data: [15000, 18000, 20000, 22000, 25000, 28000]
  57.                 },
  58.                 {
  59.                     name: '产品C',
  60.                     type: 'line',
  61.                     data: [8000, 9000, 12000, 14000, 16000, 18000]
  62.                 },
  63.                 {
  64.                     name: '产品D',
  65.                     type: 'line',
  66.                     data: [10000, 12000, 15000, 18000, 20000, 22000]
  67.                 }
  68.             ]
  69.         };
  71.         // 使用刚指定的配置项和数据显示图表。
  72.         myChart.setOption(option);
  73.     </script>
  74. </body>
  75. </html>
复制代码

这段代码将生成一个动态的、交互式的折线图，展示四种产品在6个月内的销售趋势。用户可以通过鼠标悬停查看具体数值，通过点击图例显示或隐藏特定产品线，还可以通过工具栏保存图表为图片。

更进一步，我们可以创建一个更加复杂的组合图表，同时展示销售额和增长率：
  2. // 指定图表的配置项和数据
  3. var option = {
  4.     title: {
  5.         text: '2023年上半年产品销售分析'
  6.     },
  7.     tooltip: {
  8.         trigger: 'axis',
  9.         axisPointer: {
  10.             type: 'cross',
  11.             crossStyle: {
  12.                 color: '#999'
  13.             }
  14.         }
  15.     },
  16.     toolbox: {
  17.         feature: {
  18.             dataView: {show: true, readOnly: false},
  19.             magicType: {show: true, type: ['line', 'bar']},
  20.             restore: {show: true},
  21.             saveAsImage: {show: true}
  22.         }
  23.     },
  24.     legend: {
  25.         data: ['销售额', '产品A', '产品B', '产品C', '产品D', '增长率']
  26.     },
  27.     xAxis: [
  28.         {
  29.             type: 'category',
  30.             data: ['1月', '2月', '3月', '4月', '5月', '6月'],
  31.             axisPointer: {
  32.                 type: 'shadow'
  33.             }
  34.         }
  35.     ],
  36.     yAxis: [
  37.         {
  38.             type: 'value',
  39.             name: '销售额',
  40.             min: 0,
  41.             axisLabel: {
  42.                 formatter: '{value} 元'
  43.             }
  44.         },
  45.         {
  46.             type: 'value',
  47.             name: '增长率',
  48.             min: 0,
  49.             max: 100,
  50.             axisLabel: {
  51.                 formatter: '{value} %'
  52.             }
  53.         }
  54.     ],
  55.     series: [
  56.         {
  57.             name: '产品A',
  58.             type: 'bar',
  59.             data: [12000, 15000, 18000, 20000, 22000, 25000]
  60.         },
  61.         {
  62.             name: '产品B',
  63.             type: 'bar',
  64.             data: [15000, 18000, 20000, 22000, 25000, 28000]
  65.         },
  66.         {
  67.             name: '产品C',
  68.             type: 'bar',
  69.             data: [8000, 9000, 12000, 14000, 16000, 18000]
  70.         },
  71.         {
  72.             name: '产品D',
  73.             type: 'bar',
  74.             data: [10000, 12000, 15000, 18000, 20000, 22000]
  75.         },
  76.         {
  77.             name: '销售额',
  78.             type: 'line',
  79.             yAxisIndex: 1,
  80.             data: [45000, 54000, 65000, 74000, 83000, 93000]
  81.         },
  82.         {
  83.             name: '增长率',
  84.             type: 'line',
  85.             yAxisIndex: 1,
  86.             data: [0, 20, 20.4, 13.8, 12.2, 12]
  87.         }
  88.     ]
  89. };
复制代码

这个组合图表同时展示了各产品的销售额（柱状图）、总销售额趋势（折线图）和增长率（折线图），让数据之间的关系一目了然。

ECharts的高级功能和定制化能力

1. 主题定制

ECharts允许用户自定义图表主题，包括颜色、字体、背景等。ECharts官方提供了多种预设主题，如’light’、’dark’等，同时也支持完全自定义主题。
  2. // 使用暗色主题
  3. var myChart = echarts.init(document.getElementById('main'), 'dark');
  5. // 或者自定义主题
  6. var myChart = echarts.init(document.getElementById('main'));
  7. var theme = {
  8.     "color": ["#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8"],
  9.     "backgroundColor": "#323c48",
  10.     "textStyle": {},
  11.     "title": {
  12.         "textStyle": {
  13.             "color": "#ffffff"
  14.         },
  15.         "subtextStyle": {
  16.             "color": "#aaaaaa"
  17.         }
  18.     },
  19.     // 更多主题配置...
  20. };
  21. myChart.setOption(option);
复制代码

2. 地图可视化

ECharts支持各种地图可视化，包括中国地图、世界地图以及省市级地图。这对于地理分布数据的展示非常有用。
  2. // 使用中国地图
  3. var option = {
  4.     title: {
  5.         text: '全国销售分布'
  6.     },
  7.     tooltip: {
  8.         trigger: 'item'
  9.     },
  10.     visualMap: {
  11.         min: 0,
  12.         max: 10000,
  13.         text: ['高', '低'],
  14.         realtime: false,
  15.         calculable: true,
  16.         inRange: {
  17.             color: ['#50a3ba', '#eac736', '#d94e5d']
  18.         }
  19.     },
  20.     series: [
  21.         {
  22.             name: '销售额',
  23.             type: 'map',
  24.             map: 'china',
  25.             roam: true,
  26.             emphasis: {
  27.                 label: {
  28.                     show: true
  29.                 }
  30.             },
  31.             data: [
  32.                 {name: '北京', value: 8500},
  33.                 {name: '天津', value: 4200},
  34.                 {name: '上海', value: 9200},
  35.                 {name: '重庆', value: 5800},
  36.                 // 更多省份数据...
  37.             ]
  38.         }
  39.     ]
  40. };
复制代码

3. 3D图表

ECharts支持3D图表，如3D柱状图、3D散点图、3D地球等，为数据展示增加了新的维度。
  2. // 3D柱状图示例
  3. var option = {
  4.     grid3D: {},
  5.     xAxis3D: {
  6.         type: 'category',
  7.         data: ['产品A', '产品B', '产品C', '产品D']
  8.     },
  9.     yAxis3D: {
  10.         type: 'category',
  11.         data: ['1月', '2月', '3月', '4月', '5月', '6月']
  12.     },
  13.     zAxis3D: {
  14.         type: 'value'
  15.     },
  16.     series: [{
  17.         type: 'bar3D',
  18.         data: [
  19.             [0, 0, 12000],
  20.             [0, 1, 15000],
  21.             [0, 2, 18000],
  22.             // 更多数据点...
  23.         ],
  24.         shading: 'lambert',
  25.         label: {
  26.             fontSize: 16,
  27.             borderWidth: 1
  28.         },
  29.         emphasis: {
  30.             label: {
  31.                 fontSize: 20,
  32.                 color: '#900'
  33.             },
  34.             itemStyle: {
  35.                 color: '#900'
  36.             }
  37.         }
  38.     }]
  39. };
复制代码

4. 动态数据更新

ECharts支持动态数据更新，可以实时展示数据变化。这在实时监控、动态数据展示等场景中非常有用。
  2. // 初始化图表
  3. var myChart = echarts.init(document.getElementById('main'));
  4. var base = +new Date(2023, 0, 1);
  5. var oneDay = 24 * 3600 * 1000;
  6. var date = [];
  7. var data = [Math.random() * 300];
  9. for (var i = 1; i < 30; i++) {
  10.     var now = new Date(base += oneDay);
  11.     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  12.     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
  13. }
  15. option = {
  16.     tooltip: {
  17.         trigger: 'axis',
  18.         formatter: function (params) {
  19.             params = params[0];
  20.             var date = new Date(params.name);
  21.             return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
  22.         },
  23.         axisPointer: {
  24.             animation: false
  25.         }
  26.     },
  27.     xAxis: {
  28.         type: 'time',
  29.         splitLine: {
  30.             show: false
  31.         }
  32.     },
  33.     yAxis: {
  34.         type: 'value',
  35.         boundaryGap: [0, '100%'],
  36.         splitLine: {
  37.             show: false
  38.         }
  39.     },
  40.     series: [{
  41.         name: '模拟数据',
  42.         type: 'line',
  43.         showSymbol: false,
  44.         hoverAnimation: false,
  45.         data: data
  46.     }]
  47. };
  49. myChart.setOption(option);
  51. // 模拟实时数据更新
  52. setInterval(function () {
  53.     for (var i = 0; i < 5; i++) {
  54.         data.shift();
  55.         data.push(Math.round((Math.random() - 0.5) * 20 + data[data.length - 1]));
  56.     }
  57.    
  58.     myChart.setOption({
  59.         series: [{
  60.             data: data
  61.         }]
  62.     });
  63. }, 1000);
复制代码

如何使用ECharts创建交互式数据故事

创建一个有效的数据故事不仅仅是展示数据，而是要通过数据传达洞察和见解。ECharts提供了多种功能，帮助用户创建引人入胜的数据故事。

1. 使用图表组合展示多维度数据

通过组合不同类型的图表，可以从多个角度展示数据，帮助观众全面理解数据背后的故事。
  2. // 组合图表示例：销售分析仪表盘
  3. option = {
  4.     title: {
  5.         text: '2023年上半年销售分析',
  6.         left: 'center'
  7.     },
  8.     tooltip: {
  9.         trigger: 'item',
  10.         formatter: '{a} <br/>{b}: {c} ({d}%)'
  11.     },
  12.     legend: {
  13.         orient: 'vertical',
  14.         left: 'left',
  15.         data: ['产品A', '产品B', '产品C', '产品D']
  16.     },
  17.     series: [
  18.         {
  19.             name: '销售占比',
  20.             type: 'pie',
  21.             radius: ['50%', '70%'],
  22.             avoidLabelOverlap: false,
  23.             label: {
  24.                 show: false,
  25.                 position: 'center'
  26.             },
  27.             emphasis: {
  28.                 label: {
  29.                     show: true,
  30.                     fontSize: '30',
  31.                     fontWeight: 'bold'
  32.                 }
  33.             },
  34.             labelLine: {
  35.                 show: false
  36.             },
  37.             data: [
  38.                 {value: 122000, name: '产品A'},
  39.                 {value: 135000, name: '产品B'},
  40.                 {value: 77000, name: '产品C'},
  41.                 {value: 97000, name: '产品D'}
  42.             ]
  43.         }
  44.     ]
  45. };
复制代码

2. 利用动画效果增强数据叙事

ECharts支持丰富的动画效果，可以通过动画引导观众的注意力，突出数据变化和关键信息。
  2. // 带动画效果的柱状图
  3. option = {
  4.     xAxis: {
  5.         type: 'category',
  6.         data: ['1月', '2月', '3月', '4月', '5月', '6月']
  7.     },
  8.     yAxis: {
  9.         type: 'value'
  10.     },
  11.     series: [{
  12.         data: [12000, 15000, 18000, 20000, 22000, 25000],
  13.         type: 'bar',
  14.         animationDelay: function (idx) {
  15.             return idx * 100;
  16.         }
  17.     }],
  18.     animationEasing: 'elasticOut',
  19.     animationDelayUpdate: function (idx) {
  20.         return idx * 5;
  21.     }
  22. };
复制代码

3. 添加交互式元素增强用户参与感

通过添加交互式元素，如数据缩放、数据视图、图例开关等，可以增强用户的参与感，让用户主动探索数据。
  2. // 带有丰富交互功能的折线图
  3. option = {
  4.     title: {
  5.         text: '销售趋势分析'
  6.     },
  7.     tooltip: {
  8.         trigger: 'axis'
  9.     },
  10.     legend: {
  11.         data: ['产品A', '产品B', '产品C', '产品D']
  12.     },
  13.     toolbox: {
  14.         show: true,
  15.         feature: {
  16.             dataZoom: {
  17.                 yAxisIndex: 'none'
  18.             },
  19.             dataView: {readOnly: false},
  20.             magicType: {type: ['line', 'bar']},
  21.             restore: {},
  22.             saveAsImage: {}
  23.         }
  24.     },
  25.     xAxis: {
  26.         type: 'category',
  27.         boundaryGap: false,
  28.         data: ['1月', '2月', '3月', '4月', '5月', '6月']
  29.     },
  30.     yAxis: {
  31.         type: 'value',
  32.         axisLabel: {
  33.             formatter: '{value} 元'
  34.         }
  35.     },
  36.     dataZoom: [
  37.         {
  38.             type: 'inside',
  39.             start: 0,
  40.             end: 100
  41.         },
  42.         {
  43.             start: 0,
  44.             end: 100
  45.         }
  46.     ],
  47.     series: [
  48.         {
  49.             name: '产品A',
  50.             type: 'line',
  51.             data: [12000, 15000, 18000, 20000, 22000, 25000],
  52.             markPoint: {
  53.                 data: [
  54.                     {type: 'max', name: '最大值'},
  55.                     {type: 'min', name: '最小值'}
  56.                 ]
  57.             }
  58.         },
  59.         {
  60.             name: '产品B',
  61.             type: 'line',
  62.             data: [15000, 18000, 20000, 22000, 25000, 28000],
  63.             markPoint: {
  64.                 data: [
  65.                     {type: 'max', name: '最大值'},
  66.                     {type: 'min', name: '最小值'}
  67.                 ]
  68.             }
  69.         },
  70.         {
  71.             name: '产品C',
  72.             type: 'line',
  73.             data: [8000, 9000, 12000, 14000, 16000, 18000],
  74.             markPoint: {
  75.                 data: [
  76.                     {type: 'max', name: '最大值'},
  77.                     {type: 'min', name: '最小值'}
  78.                 ]
  79.             }
  80.         },
  81.         {
  82.             name: '产品D',
  83.             type: 'line',
  84.             data: [10000, 12000, 15000, 18000, 20000, 22000],
  85.             markPoint: {
  86.                 data: [
  87.                     {type: 'max', name: '最大值'},
  88.                     {type: 'min', name: '最小值'}
  89.                 ]
  90.             }
  91.         }
  92.     ]
  93. };
复制代码

ECharts在不同行业的应用实例

1. 金融行业

在金融行业，ECharts被广泛用于股票行情分析、投资组合展示、风险评估等场景。通过实时更新的图表，投资者可以直观地了解市场动态和投资表现。
  2. // 股票K线图示例
  3. var upColor = '#ec0000';
  4. var upBorderColor = '#8A0000';
  5. var downColor = '#00da3c';
  6. var downBorderColor = '#008F28';
  8. // 数据值：[日期, 开盘价, 收盘价, 最低价, 最高价]
  9. var data0 = splitData([
  10.     ['2023/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
  11.     ['2023/1/25', 2300, 2291.3, 2288.26, 2308.38],
  12.     // 更多数据...
  13. ]);
  15. function splitData(rawData) {
  16.     var categoryData = [];
  17.     var values = [];
  18.     for (var i = 0; i < rawData.length; i++) {
  19.         categoryData.push(rawData[i].splice(0, 1)[0]);
  20.         values.push(rawData[i])
  21.     }
  22.     return {
  23.         categoryData: categoryData,
  24.         values: values
  25.     };
  26. }
  28. function calculateMA(dayCount) {
  29.     var result = [];
  30.     for (var i = 0, len = data0.values.length; i < len; i++) {
  31.         if (i < dayCount - 1) {
  32.             result.push('-');
  33.             continue;
  34.         }
  35.         var sum = 0;
  36.         for (var j = 0; j < dayCount; j++) {
  37.             sum += +data0.values[i - j][1];
  38.         }
  39.         result.push(sum / dayCount);
  40.     }
  41.     return result;
  42. }
  44. option = {
  45.     title: {
  46.         text: '上证指数',
  47.         left: 0
  48.     },
  49.     tooltip: {
  50.         trigger: 'axis',
  51.         axisPointer: {
  52.             type: 'cross'
  53.         }
  54.     },
  55.     legend: {
  56.         data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
  57.     },
  58.     grid: {
  59.         left: '10%',
  60.         right: '10%',
  61.         bottom: '15%'
  62.     },
  63.     xAxis: {
  64.         type: 'category',
  65.         data: data0.categoryData,
  66.         scale: true,
  67.         boundaryGap: false,
  68.         axisLine: {onZero: false},
  69.         splitLine: {show: false},
  70.         splitNumber: 20,
  71.         min: 'dataMin',
  72.         max: 'dataMax'
  73.     },
  74.     yAxis: {
  75.         scale: true,
  76.         splitArea: {
  77.             show: true
  78.         }
  79.     },
  80.     dataZoom: [
  81.         {
  82.             type: 'inside',
  83.             start: 50,
  84.             end: 100
  85.         },
  86.         {
  87.             show: true,
  88.             type: 'slider',
  89.             top: '90%',
  90.             start: 50,
  91.             end: 100
  92.         }
  93.     ],
  94.     series: [
  95.         {
  96.             name: '日K',
  97.             type: 'candlestick',
  98.             data: data0.values,
  99.             itemStyle: {
  100.                 color: upColor,
  101.                 color0: downColor,
  102.                 borderColor: upBorderColor,
  103.                 borderColor0: downBorderColor
  104.             },
  105.         },
  106.         {
  107.             name: 'MA5',
  108.             type: 'line',
  109.             data: calculateMA(5),
  110.             smooth: true,
  111.             lineStyle: {
  112.                 opacity: 0.5
  113.             }
  114.         },
  115.         {
  116.             name: 'MA10',
  117.             type: 'line',
  118.             data: calculateMA(10),
  119.             smooth: true,
  120.             lineStyle: {
  121.                 opacity: 0.5
  122.             }
  123.         },
  124.         {
  125.             name: 'MA20',
  126.             type: 'line',
  127.             data: calculateMA(20),
  128.             smooth: true,
  129.             lineStyle: {
  130.                 opacity: 0.5
  131.             }
  132.         },
  133.         {
  134.             name: 'MA30',
  135.             type: 'line',
  136.             data: calculateMA(30),
  137.             smooth: true,
  138.             lineStyle: {
  139.                 opacity: 0.5
  140.             }
  141.         }
  142.     ]
  143. };
复制代码

2. 电商行业

在电商行业，ECharts被用于用户行为分析、销售趋势展示、商品关联分析等。通过可视化图表，电商企业可以更好地了解用户需求，优化商品推荐和营销策略。
  2. // 电商销售漏斗图示例
  3. option = {
  4.     title: {
  5.         text: '购物转化率分析',
  6.         subtext: '2023年上半年数据'
  7.     },
  8.     tooltip: {
  9.         trigger: 'item',
  10.         formatter: "{a} <br/>{b} : {c}%"
  11.     },
  12.     toolbox: {
  13.         feature: {
  14.             dataView: {readOnly: false},
  15.             restore: {},
  16.             saveAsImage: {}
  17.         }
  18.     },
  19.     legend: {
  20.         data: ['展现', '点击', '访问', '咨询', '订单']
  21.     },
  22.     series: [
  23.         {
  24.             name: '转化率',
  25.             type: 'funnel',
  26.             left: '10%',
  27.             top: 60,
  28.             bottom: 60,
  29.             width: '80%',
  30.             min: 0,
  31.             max: 100,
  32.             minSize: '0%',
  33.             maxSize: '100%',
  34.             sort: 'descending',
  35.             gap: 2,
  36.             label: {
  37.                 show: true,
  38.                 position: 'inside'
  39.             },
  40.             labelLine: {
  41.                 length: 10,
  42.                 lineStyle: {
  43.                     width: 1,
  44.                     type: 'solid'
  45.                 }
  46.             },
  47.             itemStyle: {
  48.                 borderColor: '#fff',
  49.                 borderWidth: 1
  50.             },
  51.             emphasis: {
  52.                 label: {
  53.                     fontSize: 20
  54.                 }
  55.             },
  56.             data: [
  57.                 {value: 100, name: '展现'},
  58.                 {value: 80, name: '点击'},
  59.                 {value: 60, name: '访问'},
  60.                 {value: 40, name: '咨询'},
  61.                 {value: 20, name: '订单'}
  62.             ]
  63.         }
  64.     ]
  65. };
复制代码

3. 物流行业

在物流行业，ECharts被用于路线规划、配送效率分析、仓储管理等。通过地图可视化，物流企业可以直观地展示配送网络和实时物流状态。
  2. // 物流路线图示例
  3. option = {
  4.     backgroundColor: '#0F1C3C',
  5.     title: {
  6.         text: '物流配送路线',
  7.         left: 'center',
  8.         textStyle: {
  9.             color: '#fff'
  10.         }
  11.     },
  12.     tooltip: {
  13.         trigger: 'item'
  14.     },
  15.     geo: {
  16.         map: 'china',
  17.         roam: true,
  18.         label: {
  19.             emphasis: {
  20.                 show: false
  21.             }
  22.         },
  23.         itemStyle: {
  24.             normal: {
  25.                 areaColor: '#142957',
  26.                 borderColor: '#0692a4'
  27.             },
  28.             emphasis: {
  29.                 areaColor: '#0B1C3D'
  30.             }
  31.         }
  32.     },
  33.     series: [
  34.         {
  35.             name: '路线',
  36.             type: 'lines',
  37.             coordinateSystem: 'geo',
  38.             zlevel: 2,
  39.             effect: {
  40.                 show: true,
  41.                 period: 6,
  42.                 trailLength: 0,
  43.                 symbol: 'arrow',
  44.                 symbolSize: 7
  45.             },
  46.             lineStyle: {
  47.                 normal: {
  48.                     color: '#0692a4',
  49.                     width: 2,
  50.                     opacity: 0.6,
  51.                     curveness: 0.2
  52.                 }
  53.             },
  54.             data: [
  55.                 {
  56.                     fromName: '北京',
  57.                     toName: '上海',
  58.                     coords: [
  59.                         [116.4551, 40.2539],
  60.                         [121.4648, 31.2891]
  61.                     ]
  62.                 },
  63.                 {
  64.                     fromName: '上海',
  65.                     toName: '广州',
  66.                     coords: [
  67.                         [121.4648, 31.2891],
  68.                         [113.5107, 23.2196]
  69.                     ]
  70.                 },
  71.                 {
  72.                     fromName: '广州',
  73.                     toName: '成都',
  74.                     coords: [
  75.                         [113.5107, 23.2196],
  76.                         [103.9526, 30.7617]
  77.                     ]
  78.                 },
  79.                 {
  80.                     fromName: '成都',
  81.                     toName: '北京',
  82.                     coords: [
  83.                         [103.9526, 30.7617],
  84.                         [116.4551, 40.2539]
  85.                     ]
  86.                 }
  87.             ]
  88.         },
  89.         {
  90.             name: '仓库',
  91.             type: 'scatter',
  92.             coordinateSystem: 'geo',
  93.             zlevel: 2,
  94.             rippleEffect: {
  95.                 brushType: 'stroke'
  96.             },
  97.             label: {
  98.                 emphasis: {
  99.                     show: true,
  100.                     position: 'right',
  101.                     formatter: '{b}'
  102.                 }
  103.             },
  104.             symbolSize: function (val) {
  105.                 return val[2] / 8;
  106.             },
  107.             itemStyle: {
  108.                 normal: {
  109.                     color: '#a6c84c'
  110.                 }
  111.             },
  112.             data: [
  113.                 {name: '北京', value: [116.4551, 40.2539, 100]},
  114.                 {name: '上海', value: [121.4648, 31.2891, 80]},
  115.                 {name: '广州', value: [113.5107, 23.2196, 70]},
  116.                 {name: '成都', value: [103.9526, 30.7617, 60]}
  117.             ]
  118.         }
  119.     ]
  120. };
复制代码

未来数据可视化的发展趋势

随着技术的不断进步，数据可视化领域也在不断发展。未来，我们可以期待以下趋势：

1. 增强现实（AR）和虚拟现实（VR）数据可视化

AR和VR技术将为数据可视化带来全新的维度，用户可以在三维空间中与数据进行交互，获得更加沉浸式的数据体验。

2. 人工智能辅助的数据可视化

AI技术将帮助用户自动选择最适合的图表类型，优化数据展示方式，甚至自动生成数据洞察和建议。

3. 实时协作数据可视化

未来的数据可视化工具将支持多人实时协作，团队成员可以同时查看和操作同一份数据可视化报告，提高决策效率。

4. 更强大的交互性和个性化

数据可视化将提供更加丰富的交互功能，并能够根据用户的行为和偏好自动调整展示方式，提供个性化的数据体验。

结论：ECharts如何让数据讲述更生动的故事

ECharts作为一款功能强大的数据可视化库，正在彻底改变传统的数据展示方式。通过丰富的图表类型、强大的交互功能和高度的可定制性，ECharts让原本枯燥的数据变得生动有趣，能够讲述更加引人入胜的故事。

从简单的表格到复杂的交互式图表，ECharts为数据分析师和开发人员提供了强大的工具，帮助他们将数据转化为有价值的洞察。无论是在金融、电商、物流还是其他行业，ECharts都能够满足各种数据可视化需求，帮助企业更好地理解数据，做出更明智的决策。

随着数据可视化技术的不断发展，ECharts也在持续更新和完善，为用户带来更加先进和便捷的数据可视化体验。未来，我们有理由相信，ECharts将继续引领数据可视化的创新，让数据故事变得更加生动、有趣和富有洞察力。
吸引力
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

关闭

站长推荐上一条 /1 下一条

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
友链交换
友链交换
友链为随机排序，不代表本论坛观点
Telegram

Telegram

Discord

Discord

Tencent QQ

Tencent QQ

手机版|联系我们|小黑屋|TG频道|RSS |网站地图

Powered by Pixtech

© 2025-2026 Pixtech Team.

>