HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八） ...

南七星之家  论坛元老 | 2024-8-5 19:06:10 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1003|帖子 1003|积分 3011

系列文章目次

HarmonyOS Next 系列之省市区弹窗选择器实现（一）
HarmonyOS Next 系列之验证码输入组件实现（二）
HarmonyOS Next 系列之底部标签栏TabBar实现（三）
HarmonyOS Next 系列之HTTP哀求封装和Token持久化存储（四）
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现（五）
HarmonyOS Next 系列之可移动悬浮按钮实现（六）
HarmonyOS Next 系列之沉醉式状态实现的多种方式（七）
HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）

  
前言

HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
Echarts作为web端最流行开源的图表库，有着
多种图表类型，丰富的配置、强大的交互功能、可扩展性强等长处，假如能在鸿蒙上使用对于熟悉web开发同砚将无缝衔接，大大减少开发和学习成本。


一、实现原理分析

   echarts作为JavaScript实现的开源可视化库只能通过网页形式渲染，所以可以 通过web组件内嵌本地网页形式混合开发。web和应用交互则通过WebviewController.runJavaScript(code)形式往网页注入执行代码。
  二、代码实现

1.项目内新建本地html文件引入echarts.min.js

   resources/rawfile目次下新建echarts.html和添加echarts.min.js
  

echarts.html：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
  6.     <script src="./echarts.min.js"></script>
  7.     <style>
  8.         *{
  9.      padding:0;
  10.      margin:0
  11.     }
  12.     body,html{
  13.        height:100%;
  14.        width:100%
  15.     }
  16.     #container{
  17.        height:100%;
  18.        width:100%
  19.     }
  20.     </style>
  21. </head>
  22. <body>
  23. <div id="container"></div>
  24. </body>
  25. <script>
  26.     const container = document.getElementById('container')
  27.     let myChart = echarts.init(container);
  29.     function setOption(option){
  30.          myChart?.clear();
  31.          myChart?.setOption(option)
  32.     }
  34. </script>
  35. </html>
复制代码
echarts.min.js：
   可以从官网在线定制下载echart.js定制
  说明：此步骤新建了一个html文件引入了echarts.min.js并初始化echarts,界说了一个
setOption方法，后续通过调用该方法传入配置就能渲染出图表
2.Echart.ets组件封装


   封装一个全局通用的echart组件，目次结构如上图所示，此中Echarts.ets为组件文件，ViewModel.ets为图表相干配置数据类型界说
  Echarts.ets
  1. import webview from '@ohos.web.webview'
  3. @Component
  4. export default struct Echarts {
  5.   //控制器
  6.   controller: webview.WebviewController = new webview.WebviewController();
  7.   //组件宽
  8.   @Prop eWidth: string | number = '100%'
  9.   //组件高，单位vp
  10.   @Prop eHeight: string | number = 300
  11.   //渲染完成回调
  12.   renderCallBack: (e: Echarts) => void = () => {
  13.   }
  15.   //更新或渲染组件
  16.   render(option: Record<string, ESObject> | string) {
  17.     this.controller.runJavaScript(`setOption(${typeof option === 'string' ? option : JSON.stringify(option)})`)
  19.   }
  21.   build() {
  22.     Column() {
  23.       Web({ src: $rawfile('echarts.html'), controller: this.controller })
  24.         .width('100%')
  25.         .height('100%')
  26.         .onPageEnd(e => {
  27.           this.renderCallBack && this.renderCallBack(this)
  28.         })
  30.     }
  31.     .width(this.eWidth)
  32.     .height(this.eHeight)
  33.   }
  34. }
复制代码
说明：
组件界说了长宽属性，默认宽度100%，高度300vp，
renderCallBack回调函数作用把整个echarts组件实例暴露给引用页面。
render方法重新加载渲染组件，入参为图表配置，入参既可以是对象也可以是字符串，无论何种类型最终都将转换为字符串注入web执行。
在引用页面通过renderCallBack暴露出去的实例调用render方法即可自由刷新图表数据
ViewModel.ets:
  1. /**
  2. * echart配置数据类型定义
  3. */
  4. export interface EChartsOption {
  5.   grid?: EchartGrid,
  6.   title?: EChartsTitle;
  7.   tooltip?: EChartsTooltip;
  8.   legend?: EChartsLegend;
  9.   xAxis: EChartsXAxis;
  10.   yAxis: EChartsYAxis;
  11.   series: EChartsSeries[];
  12. }
  14. export  interface EchartGrid {
  15.   top?: number|string
  16.   bottom?: number|string
  17.   left?: number|string
  18.   right?: number|string
  19. }
  21. export interface EChartsTitle {
  22.   text?: string;
  23. }
  25. export interface EChartsTooltip {}
  27. export interface EChartsLegend {
  28.   show?:boolean
  29.   data?: string[];
  30. }
  33. export interface EChartsXAxis {
  34.   type?: string;
  35.   data: string[];
  36.   axisLine?: XAxisAxisLine;
  37.   axisTick?: XAxisAxisTick
  38.   boundaryGap?: boolean | Array<string>
  39.   axisLabel?: AxisLabel
  41. }
  43. export interface XAxisAxisLine {
  44.   show?: boolean
  45. }
  47. export interface XAxisAxisTick {
  48.   show?: boolean
  49. }
  52. export interface EChartsYAxis {
  53.   type?: string
  54.   splitLine?: YAxisSplitLine
  55.   splitNumber?: number
  56.   min?: number
  57.   max?: number
  58.   scale?: boolean
  59.   interval?: number
  61. }
  63. export interface AxisLabel {
  64.   show?: boolean
  65.   formatter?: string | ((value: number | string, index: number) => string)
  66. }
  68. export interface YAxisSplitLine {
  69.   lineStyle?: AxisSplitLineLineStyle
  70. }
  72. export interface AxisSplitLineLineStyle {
  73.   type?: string
  74. }
  76. export interface EChartsSeries {
  77.   name?: string;
  78.   type?: string;
  79.   data: number[];
  81. }
复制代码
ViewModel.ets内里界说了一些常见的图表配置数据结构（类型），方便在引入页中引入使用，可以按需继添加扩展
3.页面使用

Index.ets
  1. import Echarts from '../components/Echarts/Echarts'
  2. import { EChartsOption } from '../components/Echarts/ViewModel'
  4. @Entry
  5. @Component
  6. struct Index {
  7.   //图表实例
  8.   myEchart: Echarts | null = null
  9.   /*
  10.    * 图表配置
  11.    */
  12.   option: EChartsOption = {
  13.   //标题
  14.     title: {
  15.       text: '基础柱状图'
  16.     },
  17.     //图例
  18.     legend: {
  19.       data: ['访问量']
  20.     },
  21.     //x轴配置
  22.     xAxis: {
  23.       type: 'category',
  24.       data: []
  25.     },
  26.     //y轴配置
  27.     yAxis: {
  28.       type: 'value'
  29.     },
  30.     //数据配置
  31.     series: [
  32.       {
  33.         data: [],
  34.         type: 'bar',//柱状图
  35.         name: '访问量'
  36.       }
  37.     ]
  38.   };
  40.   aboutToAppear(): void {
  41.     this.getData()
  42.   }
  44.   //接口请求获取数据
  45.   getData() {
  46.     //模拟接口请求
  47.     setTimeout(() => {
  48.       //设置x轴数据
  49.       this.option.xAxis.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  50.       //设置y轴数据
  51.       this.option.series[0].data = [120, 200, 150, 80, 70, 110, 130]
  52.       //调用render重新渲染
  53.       this.myEchart?.render(this.option)
  54.     }, 2000)
  55.   }
  57.   // 组件实例
  58.   chart?: Echarts;
  60.   build() {
  61.     Column() {
  62.       Echarts({
  63.         eHeight: 300,
  64.         //回调
  65.         renderCallBack: (e: Echarts) => {
  66.           this.myEchart = e
  67.           //初次渲染组件，接口获取数据是异步此时this.option可能还没有新数据
  68.           this.myEchart.render(this.option)
  69.         }
  70.       })
  71.     }
  72.     .width('100%')
  73.     .height('100%')
  74.   }
  75. }
复制代码
运行效果：

三、配置项含函数需特殊处理

对于配置项包含函数的情况，比方坐标轴标签设置AxisLabel.formatter字段可以是个函数类型，此时就需要特殊处理。这是因为当我们通报option为对象给render函数时候
  1. this.controller.runJavaScript(`setOption(${typeof option === 'string' ? option : JSON.stringify(option)})`)
复制代码
此时调用JSON.stringify把对象转换为字符串，而JSON.stringify入参内函数会直接被去掉。
因此我们需要本身把option处理成字符串传入即可
代码示例：

给折线图y轴刻度值加个万字
Index.ets
  1. import Echarts from '../components/Echarts/Echarts'
  3. @Entry
  4. @Component
  5. struct Index {
  6.   //图表配置
  7.   @State option: string = ``
  8.   //x轴数据
  9.   @State xAxisData: string[] = [];
  10.   //y轴数据
  11.   @State seriesData: number[] = [];
  12.   myEchart: Echarts | null = null;
  14.   aboutToAppear(): void {
  15.     this.getData()
  16.   }
  18.   /*
  19.    * 设置配置并重新渲染
  20.    */
  21.   setOption() {
  22.     this.option = `{
  23.     title: {
  24.       text: '基础柱折线图'
  25.     },
  26.     grid:{
  27.       left:"15%"
  28.     },
  29.     legend:{
  30.       data: ['访问量']
  31.     },
  32.     xAxis: {
  33.       type: 'category',
  34.       data: ${JSON.stringify(this.xAxisData)}
  35.     },
  36.     yAxis: {
  37.       axisLabel: {
  38.         show: true,
  39.         formatter:(value, index)=> {
  40.             return value + '万';
  41.         }
  42.       }
  43.     },
  44.     series: [
  45.       {
  46.         data: ${JSON.stringify(this.seriesData)},
  47.         type: 'line',
  48.         name:'访问量'
  49.       }
  50.     ]
  51.   }`
  52.     this.myEchart?.render(this.option)
  53.   }
  55.   //接口请求获取数据
  56.   getData() {
  57.     //模拟接口请求
  58.     setTimeout(() => {
  59.       this.xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  60.       this.seriesData = [120, 200, 150, 80, 70, 110, 130]
  61.       this.setOption()
  62.     }, 2000)
  63.   }
  65.   // 组件实例
  66.   chart?: Echarts;
  68.   build() {
  69.     Column() {
  70.         Echarts({
  71.           eHeight: 300,
  72.           renderCallBack: (e: Echarts) => {
  73.             this.myEchart = e
  74.             this.setOption()
  75.           }
  76.         })
  78.     }
  79.     .width('100%')
  80.     .height('100%')
  81.   }
  82. }
复制代码
运行效果：

总结

   固然作为混合开发产物性能自然比上不上原生，但是echarts有着跨平台兼容性好等长处，对付数据量不大、交互要求不高的场景绰绰有余。现在处于起步发展阶段的鸿蒙来说还没有一款稳定成熟、配置丰富能满足各种ui设计要求的官方或三方组件库。所以只要你的开发场景对性能要求不高，web形式的echart也是个不错的选择，尤其能实现各种定制化ui。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

南七星之家

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表