数据可视化模板合集-ECharts+Tableau+PowerBI

数据可视化模板合集——

ECharts/Tableau/PowerBI

标签：数据可视化|ECharts|Tableau|PowerBI|模板合集|仪表板|DAX|数据分析

日期：2026年9月19日

一句话简介：面向数据分析、运营、财务、产品与管理场景，提供ECharts、Tableau、PowerBI三类工具共36个可

复制模板，每个模板包含8要素深度展开、零基础操作引导与避坑指南。

适用人群：数据分析师、BI工程师、运营人员、产品经理、财务人员、HR、管理者。

文档类型：合集资料类。

目录

一、模板总览与分类清单

二、使用建议

三、整理方法

四、ECharts模板深度展开（12个）

五、Tableau模板深度展开（12个）

六、PowerBI模板深度展开（12个）

七、全局避坑指南与常见问题解答

八、关键词索引

一、模板总览与分类清单

1.1分类维度

维度说明

工具类型ECharts、Tableau、PowerBI

图表用途趋势、对比、分布、关系、地理、转化、留存、预算、排名

适用场景经营分析、销售复盘、财务预算、用户增长、供应链监控、管理驾驶舱

主岗位数据分析师、BI工程师、运营、财务、产品经理、管理者

复杂度低、中、高

交付形态Markdown表格、代码模板、配置步骤、案例说明、零基础操作引导

1.2模板总表

核心图表/复杂所在

编号模板名称工具适用场景主岗位

功能度卷

ECharts-月度销售数据分第1

基础柱状图模板ECharts柱状图低

01对比析师卷

ECharts-日活趋势第1

动态折线图模板ECharts折线图运营低

02监控卷

ECharts-区域销售数据分第1

地图热力模板ECharts地图+热力中

03分布析师卷

ECharts-渠道构成第1

堆叠柱状图模板ECharts堆叠柱状图运营中

04分析卷

ECharts-饼图/环形第1

环形饼图模板ECharts预算占比财务低

05图卷

ECharts-品类销售第1

南丁格尔玫瑰模板ECharts玫瑰图运营中

06占比卷

ECharts-相关性分数据分第1

散点气泡模板ECharts散点图中

07析析师卷

ECharts-第1

雷达图模板ECharts雷达图能力评估HR中

08卷

ECharts-目标达成第1

仪表盘模板ECharts仪表盘管理者中

09率卷

ECharts-用户路径产品经第1

桑基图模板ECharts桑基图高

10转化理卷

ECharts-组织/分类第1

树图模板ECharts树图HR高

11下钻卷

ECharts-每日活跃第1

日历热力图模板ECharts日历热力运营中

12分布卷

Tableau-折线图+预销售趋势数据分第2

销售趋势模板Tableau低

01测复盘析师卷

Tableau-经营指标第2

同比环比模板Tableau计算字段财务中

02对比卷

Tableau-客户首单数据分第2

LOD客户首单模板TableauLOD表达式高

03分析析师卷

Tableau-第2

参数动态TopN模板Tableau参数+集动态排名运营中

04卷

核心图表/复杂所在

编号模板名称工具适用场景主岗位

功能度卷

Tableau-第2

地图双轴模板Tableau双轴地图区域对比运营中

05卷

Tableau-产品经第2

漏斗转化模板Tableau漏斗图转化分析中

06理卷

Tableau-产品经第2

留存Cohort模板TableauCohort分析用户留存高

07理卷

Tableau-第2

预算实际模板Tableau子弹图预算达成财务中

08卷

Tableau-第2

甘特图模板Tableau甘特图项目排期管理者中

09卷

Tableau-第2

瀑布图模板Tableau瀑布图利润归因财务中

10卷

Tableau-散点+趋势相关性分数据分第2

散点相关性模板Tableau中

11线析析师卷

Tableau-仪表板动作筛选模交互仪表数据分第2

Tableau动作筛选高

12板板析师卷

Power第3

PBI-01DAX同比环比模板DAX指标对比财务中

BI卷

PowerDAX时间智第3

PBI-02YTD/QTD/MTD模板累计指标财务中

BI能卷

Power第3

PBI-03动态标题模板DAX+书签交互标题运营中

BI卷

PowerDAX第3

PBI-04排名模板销售排名运营中

BIRANKX卷

Power组合图+累数据分第3

PBI-05帕累托模板二八分析高

BI计析师卷

Power产品经第3

PBI-06客户留存模板DAX+矩阵留存分析高

BI理卷

Power第3

PBI-07RFM模板DAX分组客户分层运营高

BI卷

Power度量值+子第3

PBI-08预算达成模板预算监控财务中

BI弹图卷

PowerBI工程第3

PBI-09RLS安全角色模板行级安全权限控制高

BI师卷

核心图表/复杂所在

编号模板名称工具适用场景主岗位

功能度卷

Power产品经第3

PBI-10书签导航模板书签+按钮页面导航中

BI理卷

Power钻取+工具第3

PBI-11钻取模板明细下钻管理者中

BI提示卷

PowerQuery合并PowerBI工程第3

PBI-12M语言多表合并高

模板BI师卷

二、使用建议

2.1工具选择建议

场景推荐工具理由

Web系统内嵌图表ECharts定制自由度高，代码可控，适合前端集成

快速探索式分析Tableau拖拽式分析，适合业务人员快速发现规律

企业级报表与权限PowerBI与微软生态衔接紧密，DAX与RLS适合企业治理

大屏可视化ECharts动画、主题、交互可深度定制

财务预算与合并报表PowerBI/Tableau时间智能、参数、数据模型能力较强

运营日报周报PowerBI/Tableau刷新与订阅机制适合固定节奏输出

2.2模板复用建议

复用步骤操作内容

第一步确认数据字段：维度字段、指标字段、时间字段、地理字段

第二步选择模板：按总表编号定位模板

第三步替换数据：ECharts替换数组，Tableau替换数据源，PowerBI替换表与度量值

第四步调整主题：统一颜色、字体、间距、提示格式

第五步验证交互：筛选、钻取、悬浮、联动是否正常

第六步脱敏检查：姓名、电话、地址、企业名称、网址是否已替换为占位符或虚拟名称

三、整理方法

3.1文件命名规范

类型命名格式示例

ECharts模板工具编号图表名_版本ECharts_01基础柱状图v1

Tableau模板工具编号分析主题_版本Tableau_02同比环比v1

PowerBI模板工具编号度量主题_版本PBI_01_DAX同比环比_v1

数据文件主题数据来源日期销售示例数据202609

文档说明主题说明版本销售看板说明v1

3.2目录结构建议

层级目录名存放内容

1EChartsECharts模板、主题、组件

1TableauTableau工作簿、数据源、计算字段说明

1PowerBIPowerBI文件、DAX度量值、M查询

1数据脱敏后的示例数据、字段字典

1文档使用说明、版本记录、更新日志

1主题配色、字体、图标、布局规范

3.3版本管理建议

管理项做法

版本号主版本.次版本，如v1.0、v1.1

变更记录记录字段变化、指标口径变化、视觉变化

数据口径每个指标注明分子、分母、时间范围、过滤条件

兼容性注明ECharts版本、Tableau版本、PowerBI版本

回滚保留上一版文件，避免直接覆盖

3.4隐私安全速查表

字段类型脱敏格式示例

姓名【姓名】/张先生/李女士张先生

字段类型脱敏格式示例

电话xxx/【电话】【电话】

身份证号xxx/【身份证号】【身份证号】

地址示例省示例市示例区示例路1号示例省示例市示例区示例路1号

邮箱【邮箱】【邮箱】

网址【网址】【网址】

企业名称示例公司/生产企业A示例公司

品牌名称示例品牌/品牌A示例品牌

银行卡号【银行卡号】【银行卡号】

统一社会信用代码【统一社会信用代码】【统一社会信用代码】

四、ECharts模板深度展开

4.1ECharts-01基础柱状图模板

要素1：基础信息

语法结构：

option={

xAxis:{

type:'category',

data:[]

},

yAxis:{

type:'value'

},

series:[

{

type:'bar',

data:[]

}

]

};

参数说明：

参数含义常用值注意事项

xAxis.type横轴类型category、value、time类目轴用于文字分类

xAxis.data横轴类目数据数组长度需与series.data一致

yAxis.type纵轴类型value、log数值轴用于度量

参数含义常用值注意事项

series.type系列类型bar、line、pie柱状图用bar

series.data系列数据数组数值数组或对象数组

itemStyle.color柱体颜色颜色值可统一或按数据项设置

label.show是否显示标签true、false数据量大时建议关闭

tooltip.trigger提示触发方式item、axis柱状图常用axis

grid绘图区域对象控制边距，避免标签被截断

要素2：完整模板

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>基础柱状图模板</title>

<style>

#chart{

width:100%;

height:420px;

}

</style>

</head>

<body>

<divid="chart"></div>

<scripttype="module">

import*asechartsfrom'echarts';

constchartDom=document.getElementById('chart');

constmyChart=echarts.init(chartDom);

constoption={

title:{

text:'月度销售额对比',

subtext:'示例公司·2026年1-6月',

left:'center'

},

tooltip:{

trigger:'axis',

axisPointer:{

type:'shadow'

},

valueFormatter:function(value){

returnvalue+'万元';

}

},

grid:{

left:'3%',

right:'4%',

bottom:'3%',

containLabel:true

},

xAxis:{

type:'category',

data:['1月','2月','3月','4月','5月','6月'],

axisTick:{

alignWithLabel:true

}

},

yAxis:{

type:'value',

name:'销售额（万元）',

nameLocation:'end'

},

series:[

{

name:'销售额',

type:'bar',

barWidth:'48%',

data:[128,156,142,189,210,234],

itemStyle:{

color:'#4C78A8',

borderRadius:[6,6,0,0]

},

label:{

show:true,

position:'top',

formatter:'{c}'

}

}

]

};

myChart.setOption(option);

window.addEventListener('resize',function(){

myChart.resize();

});

</script>

</body>

</html>

变体：横向柱状图。

option={

tooltip:{

trigger:'axis',

axisPointer:{

type:'shadow'

}

},

grid:{

left:'3%',

right:'8%',

bottom:'3%',

containLabel:true

},

xAxis:{

type:'value',

name:'销售额（万元）'

},

yAxis:{

type:'category',

data:['6月','5月','4月','3月','2月','1月']

},

series:[

{

name:'销售额',

type:'bar',

data:[234,210,189,142,156,128],

itemStyle:{

color:'#F58518',

borderRadius:[0,6,6,0]

},

label:{

show:true,

position:'right',

formatter:'{c}'

}

}

]

};

要素3：真实工作场景完整案例

背景：示例公司运营部需要每周一上午输出“月度销售额对比”看板，数据来自销售系统导出的脱敏明细表。数据字段

包括月份、销售额、渠道。运营人员需要把2026年1月至6月销售额做成柱状图，放在内部经营看板首页。

数据：

月份销售额（万元）渠道

1月128线上

2月156线上

3月142线上

4月189线上

5月210线上

6月234线上

操作步骤：

第一步，打开看板项目，新建HTML文件，命名为ECharts_01_基础柱状图_v1.html。

第二步，创建div容器，设置id="chart"，高度420像素。

第三步，引入ECharts包，初始化图表实例。

第四步，把月份数组填入xAxis.data，把销售额数组填入series[0].data。

第五步，设置tooltip.trigger为axis，让鼠标悬浮时显示月份与销售额。

第六步，设置label.show为true，让柱顶直接显示数值。

第七步，保存文件，在浏览器刷新页面，检查柱体数量、数值、单位是否正确。

结果：看板显示6根柱体，1月到6月销售额依次为128、156、142、189、210、234万元。运营人员在周会上直接

使用该图说明6月销售额最高，2月到3月出现短期回落。图表加载时间低于1秒，交互正常。

要素4：与其他组件的组合用法

组合一：柱状图+dataZoom。

option={

dataZoom:[

{

type:'slider',

start:0,

end:60

}

],

xAxis:{

type:'category',

data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12

月']

},

yAxis:{

type:'value'

},

series:[

{

type:'bar',

data:[128,156,142,189,210,234,198,220,245,260,278,290]

}

]

};

适用场景：月份超过8个，需要缩放查看局部区间。

组合二：柱状图+markLine。

option={

xAxis:{

type:'category',

data:['1月','2月','3月','4月','5月','6月']

},

yAxis:{

type:'value'

},

series:[

{

type:'bar',

data:[128,156,142,189,210,234],

markLine:{

data:[

{

type:'average',

name:'平均值'

}

]

}

}

]

};

适用场景：需要显示平均线、目标线、预警线。

要素5：常见错误与正确写法对比

错误写法问题正确写法

xAxis.data有6项，series.data有5

柱体与类目错位两项长度保持一致

项

数值轴变成类目轴，柱体异

yAxis.type写成category数值轴使用value

常

label.show为true且数据量超过50数据量大时关闭标签，改用

标签重叠

项tooltip

grid未设置containLabel坐标轴标签被截断设置containLabel:true

颜色直接写中文“蓝色”部分环境不识别使用十六进制或RGB颜色值

要素6：进阶技巧或性能优化建议

第一，数据量超过1000条时，开启large:true与largeThreshold，减少渲染压力。

series:[

{

type:'bar',

large:true,

largeThreshold:1000,

data:[]

}

]

第二，使用dataset管理数据，避免把数据散落在多个配置项中。

option={

dataset:{

source:[

['月份','销售额'],

['1月',128],

['2月',156],

['3月',142]

]

},

xAxis:{

type:'category'

},

yAxis:{

type:'value'

},

series:[

{

type:'bar',

encode:{

x:'月份',

y:'销售额'

}

}

]

};

第三，使用animationDuration控制动画时长，避免频繁刷新时动画堆积。

要素7：版本差异说明

版本差异

ECharts4默认主题偏旧，部分视觉参数命名与5不同

ECharts5默认主题更现代，支持更细粒度的标签、动画、视觉映射

ECharts5以上推荐使用dataset、encode、visualMap组织数据

ECharts3及以下不建议在新项目中使用，兼容成本高

要素8：零基础操作引导

在哪里输入代码：新建一个文本文件，把扩展名改为.html，用代码编辑器打开。找到<divid="chart">

</div>，这是图表容器。找到<scripttype="module">，这是代码区域。

怎么输入代码：先写import*asechartsfrom'echarts';，再写constchartDom=

document.getElementById('chart');，再写constmyChart=echarts.init(chartDom);，最后写const

option={...};和myChart.setOption(option);。

怎么确认：保存文件，双击打开HTML文件，浏览器显示柱状图即成功。修改数据后，按Ctrl+S保存，再按F5

刷新。

$符号是什么意思：ECharts配置中没有Excel的$绝对引用。若数据先在Excel中准备，$A$1表示锁定单元格，

向下填充时引用不变。ECharts中直接写数组即可。

怎么向下填充：若在Excel中准备月份，先输入“1月”，选中单元格，把鼠标移到右下角填充柄，按住向下拖到“6月”。

若在ECharts中，直接写数组['1月','2月','3月','4月','5月','6月']。

结果长什么样：页面显示标题“月度销售额对比”，副标题“示例公司·2026年1-6月”，横轴为1月到6月，纵轴为销售

额，柱体上方显示数值。

报错了怎么办：

报错现象可能原因处理方式

页面空白容器高度为0给#chart设置高度

提示找不到echarts包未安装或引入失败检查项目依赖，使用包管理器安装

柱体不显示数据为空或类型错误检查series.data是否为数值数组

标签被截断边距不足设置grid.containLabel为true

图表不随窗口变化未监听resize添加window.addEventListener('resize',...)

4.2ECharts-02动态折线图模板

要素1：基础信息

语法结构：

option={

xAxis:{

type:'category',

boundaryGap:false,

data:[]

},

yAxis:{

type:'value'

},

series:[

{

type:'line',

smooth:true,

data:[]

}

]

};

参数说明：

参数含义常用值注意事项

xAxis.boundaryGap类目轴留白true、false折线图常用false

参数含义常用值注意事项

series.type系列类型line折线图用line

series.smooth是否平滑true、false平滑可弱化波动

series.areaStyle区域填充对象用于面积图

series.symbol数据点标记circle