除了开源三方库中的MPChart以外,HarmonyOS前是否有其他方案支持图表绘制

除了开源三方库中的MPChart以外,HarmonyOS前是否有其他方案支持图表绘制。

HarmonyOS
2024-09-12 13:29:52
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

LiteChart:https://atomgit.com/so_love_bang/LiteChart

adaptor: https://ohpm.openharmony.cn/#/cn/detail/@wolfx%2Fecharts_adaptor

mccharts :https://ohpm.openharmony.cn/#/cn/detail/@mcui%2Fmccharts

以上三款点三方都支持HarmonyOS图表绘制使用方式基本上一样都是通过配置options实现图标数据配置, echarts_adaptor的本质就是对web使用的echarts的包装。

import { EChartsWrap } from '@wolfx/echarts_adaptor'; 
export interface EChartsOption { 
  title: EChartsOptionTitle; 
  tooltip: EChartsOptionTooltip; 
  legend: EChartsOptionLegend; 
  xAxis: EChartsOptionXAxis; 
  yAxis: EChartsOptionYAxis; 
  series: EChartsOptionSeries[]; 
} 
export interface EChartsOptionTitle { 
  text: string; 
} 
export interface EChartsOptionTooltip {} 
export interface EChartsOptionLegend { 
  data: string[]; 
} 
export interface EChartsOptionXAxis { 
  data: string[]; 
} 
export interface EChartsOptionYAxis {} 
export interface EChartsOptionSeries { 
  name: string; 
  type: string; 
  data: number[]; 
} 
@Entry 
@Component 
struct WebEChartsExample { 
  option: EChartsOption = { 
    title: { 
      text: 'ECharts 入门示例' 
    }, 
    tooltip: {}, 
    legend: { 
      data: ['销量'] 
    }, 
    xAxis: { 
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] 
    }, 
    yAxis: {}, 
    series: [ 
      { 
        name: '销量', 
        type: 'bar', 
        data: [5, 20, 36, 10, 10, 20] 
      } 
    ] 
  }; 
  chart?: EChartsWrap; 
  onPageShow() { 
    // 3秒后更新数据 
    setTimeout(() => { 
      this.option.title.text = '更新了标题' 
      // 重新渲染 
      this.chart?.reload(); 
    }, 3000) 
  } 
  build() { 
    Column() { 
      EChartsWrap({ 
        option: this.option, 
        canvasWidth: '100%', 
        canvasHeight: '300px', 
        webBackgroundColor: Color.White, 
        onLoaded: (v: EChartsWrap) => { 
          this.chart = v; 
        } 
      }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
分享
微博
QQ
微信
回复
2024-09-12 16:07:06
相关问题
是否开源三方数据使用?
1005浏览 • 1回复 待解决
是否支持非对称加密三方
1971浏览 • 1回复 待解决
HarmonyOS mqtt是否专门三方
1207浏览 • 1回复 待解决
应用内 FFmpeg 开源三方编译
2276浏览 • 1回复 待解决
HarmonyOS RN三方适配方案
838浏览 • 1回复 待解决
Native工程如何使用其他三方so
3511浏览 • 1回复 待解决
HarmonyOS flutter三方支持问题
865浏览 • 1回复 待解决
图片加载三方么?
1782浏览 • 1回复 待解决
HarmonyOS app 哪些常用三方
1235浏览 • 1回复 待解决
HarmonyOS AES加解密第三方开源工具类
1546浏览 • 1回复 待解决
HarmonyOS 三方是否可以离线开发?
747浏览 • 1回复 待解决
HarmonyOS支持三方列表
2395浏览 • 1回复 待解决