第二课、Power BI可视化Visual组件开发

一、开发环境准备1.1 下载并安装 Node.jsNode.js 是 Power BI 自定义视觉开发的基础运行环境。操作步骤：打开浏览器，访问 Node.js 官网：https://nodejs.org2一路安装配置即可3 安装配置完成校验如下1.2 安装 Power BI Visual Tools（pbiviz）然后CMD命令框安装pbiviz，这个是powerbi核心组件npm install -g powerbi-visuals-tools然后验证安装是否成功二、创建 Power BI 自定义视觉项目2.1 生成项目模板选择一个你希望存放项目的目录，使用 pbiviz 命令创建新项目：pbiviz new 你的项目名称名称只能是字符和数字不能有其他字符pbiviz new echartsDemoechartsDemo/├── .vscode/ # VS Code 配置文件│ ├── launch.json # 调试配置│ └── settings.json # 编辑器设置├── assets/ # 资源文件│ └── icon.png # 视觉对象图标├── node_modules/ # npm 依赖包├── src/ # 源代码目录│ ├── settings.ts # 格式设置代码│ └── visual.ts # 核心视觉逻辑文件 ⭐├── style/ # 样式文件│ └── visual.less # Less 样式├── capabilities.json # 视觉对象能力配置 ⭐├── package.json # npm 项目配置├── pbiviz.json # 视觉对象元数据配置 ⭐├── tsconfig.json # TypeScript 编译配置└── tslint.json # 代码规范配置三、VS Code 配置与项目设置3.1 VS Code 推荐配置VS Code 是开发 Power BI 视觉对象的理想 IDE。项目中的.vscode/settings.json文件包含了 VS Code 的工作区配置。建议安装以下 VS Code 扩展：ESLint：JavaScript/TypeScript 代码检查Prettier：代码格式化TypeScript：TypeScript 语法支持Less：Less 样式文件支持3.4 安装 ECharts 依赖在项目根目录下打开终端，执行以下命令安装 EChartscd echartsDemonpm install echarts --save四、编写核心代码（visual.ts）4.1 基础认证pbiviz在7.0.3版本后，强制要求 ./pbiviz.json文件中的如下信息必须完整填写4.2基础代码框架src/visual.ts是视觉对象的核心逻辑文件，包含图表的渲染和数据更新逻辑。打开src/visual.ts，修改代码如下：/* * Power BI Visual CLI * * Copyright (c) Microsoft Corporation * All rights reserved. * MIT License * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the ""Software""), to deal * in the Softwar