HarmonyOS 鸿蒙Next中echart实战案例
HarmonyOS 鸿蒙Next中echart实战案例
一、什么是echart和数据可视化
ECharts和数据可视化的特点：
- 多种图表类型：支持包括线图、柱状图、散点图、饼图、地图等多种图表类型，满足不同的数据展示需求。
- 丰富的交互功能：支持数据区域缩放、数据视图、动态数据更新等交互功能，提升用户体验。
- 灵活的配置项：提供了大量的配置项，允许用户根据具体需求进行图表定制，实现个性化的数据展示。
- 兼容性强：兼容多种浏览器和移动设备，并提供了多种接口和适配器，方便与其他前端框架集成。
- 直观展示数据：通过图形或图像的形式展示数据，使人们能够迅速理解数据的含义和关系。
- 辅助决策分析：在商业、科研等领域，数据可视化可以辅助人们进行决策和分析，提高工作效率。。。
二. 鸿蒙中web方式使用echart
简介
利用echarts组件、web组件、h5 html文件、基础组件等实现一个web封装的echarts组件 可以在鸿蒙Next传参渲染，或者调api接口去实时渲染等实际业务场景。
功能介绍
支持web组件传参对象 字符串等传入html文件中。
支持echarts在鸿蒙next中无差别显示。
支持自定义echarts的配置项在鸿蒙next中生效。
支持html文件回调参数到鸿蒙next展示。
实现代码
// webview控制器
private controller = new webview.WebviewController();
// 路径存放于 entry/src/main/resources/rawfile/index.html
private src: ResourceStr = $rawfile('index.html')
/ 声明需要注册的对象
[@State](/user/State) paramObj: paramsClass = new paramsClass();
// JSBridge代理
webInject() {
this.controller.registerJavaScriptProxy({
// 参数 1：注入应用侧JavaScript对象
// 参数 2：注入对象的名称，与window中调用的对象名一致
// 参数 3：注入后window对象可以通过此名字访问应用侧JavaScript对象
name: “paramObjName2”,
test: (a) => {
AlertDialog.show({
message: 网页传参：${a}
})
},
} as InjectJs,
‘message’,
[
‘test’,
] as InjectKeys[])
}
// 图表
Web({ src: $rawfile(‘index.html’), controller: this.controller })
.domStorageAccess(true)
// javaScriptProxy 在Web组件初始化调用，使用javaScriptProxy()接口 getObj方法传参
.javaScriptProxy({
// 将对象注入到web端
object: this.paramObj,
name: “paramObjName”,
methodList: [“getObj”],
controller: this.controller
})
.onAppear(() => {
// JSBridge代理注入
this.webInject()
})
传参对象paramObj赋值如下
interface WebParamsInterface {
buttonText: string;
api: string;
ChartOption?: ChartOptions;
}
interface InjectJs {
name: string,
// 测试方法
test: (a: string) => void
}
class paramsClass {
ObjReturn: WebParamsInterface
constructor() {
// 可以请求数据 处理后传参option传进去，也可以传入api在h5里面请求处理
this.ObjReturn = {
buttonText: "测试" // 按钮的文字
api: "/api/xxxx",
// ChartOption为图中echarts渲染的配置项传入html文件中
ChartOption: Options
};
}
// 调用getObj传参
getObj(): object {
return this.ObjReturn;
}
}
index.html 对echarts的接收和渲染，代码如下
<body style="margin: 0;background: #ebe7e7;">
<div>
<div id="echart-main" style="height: 600px;border-radius: 20px;background: #fff;"></div>
<button id="myButton" style="font-size: 30px"></button>
</div>
</body>
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>// 可传参到上一级鸿蒙next页面
window.onload = () => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart-main'));
document.getElementById("myButton").innerHTML = paramObjName.getObj().buttonText;
// 指定图表的配置项和数据
var option = {}; // 也可在内部配置option 根据api去拼接
console.log("paramObjName---",paramObjName.getObj().api)
// 接口逻辑
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(paramObjName.getObj().ChartOption);
// 点击触发上一级页面的事件
document.querySelector('#myButton').addEventListener('click', () => {
message.test('我是来自web数据啦')
})
}
效果图如下：
点击测试按钮显示如下
问题和优化
- 图表的背景加边框 高度 等 无法适配主页的样式，呈现出不一致的效果
解决方案： html文件的 body 背景色设置为主页的背景色（这样有利于看起来组件统一的） 图表的高度 border等要加在echarts渲染的容器上面，web组件设置的高度要等于body的高度，不然会出现滚动或者显示不全等问题。
