鸿蒙ArkTS如何实现数据可视化：饼状图/柱状图/折线图

鸿蒙数据可视化系列

在我们鸿蒙APP开发中，经常需要使用到一些图表的开发，本文主要介绍使用 McCharts 框架绘制柱状图的方法

配套指导视频地址：鸿蒙数据可视化系列-McCharts使用介绍_哔哩哔哩_bilibili

1. 第三方库介绍

1.1. McCharts

McCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库,专为Harmony OS的所有类型的开发人员而设计。该组件库目前支持折线图、柱状图、饼图、散点图。

McCharts是一个基于ArkTS语法封装的图表组件，你可以运行在ArkTS 3+版本（DevEco Studio 3.1.1+）以上的任意版本当中。

1.2. 我们选择McCharts

  • McCharts是一款自研开发的公共组件，基于ArkTS最新版本。意味着HarmonyOS的新特性我们都支持，并拥有一个庞大的社区，您将拥有所有创建和制作项目的帮助和文档。

  • 每个组件都是独立化的，更好地避免导入不必要的代码。

  • 所有开发者拥有创建、改进和纠正任何组件或功能的开源社区。

  • 提供了配套的设计资源，充分满足可定制化的需求。

1.3. 官网地址

Welcome to nginx!

2. 安装

McCharts已经使用OpenHarmony三方库进行托管，你可以使用OpenHarmony提供的ohpm工具安装McCharts。在DevEco Studio中，您可以在Terminal（命令行窗口）输入如下的指令进行安装。

ohpm install @mcui/mccharts

安装完毕之后，可以检查oh-package.json5文件中是否已经添加了mccharts的依赖。如下图所示：

image-20241209203934995

3. 绘制折线图

3.1. 新建空白页面：

@Entry
@Component
struct LineCharts {build() {Column() {}.height('100%').width('100%')}
}

3.2. 创建Options类

在Options类中，我们可以通过属性来设置折线图的样式，如设置图例的相关样式与功能，设置提示层的相关样式与功能，设置X轴的相关样式与功能，设置Y轴的相关样式与功能，设置折线区的相关样式与功能。具体代码如下所示：

import { McLineChart, Options } from '@mcui/mccharts'//注意不要导入错误的包了，这个是正确的引入代码
​
@State defOptions: Options = new Options({xAxis: {//设置X轴的相关样式与功能data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {//设置Y轴的相关样式与功能name: '温度'},series: [//设置折线区的相关样式与功能{name: '周最高气温',data: [11, 5, 9, 13, 12, 12, 5]},{name: '周最低气温',data: [3, 0, 3, 5, 4, 2, 2]}]})

3.3. 添加折线组件

//添加折线图组件
McLineChart({ options: this.defOptions }).height('60%')

3.4. 页面效果

image-20241209204613357

代码截图如下：

image-20241209204715227

3.5. 美化

上面是一个最简单的版本，我们还可以参考官网，对X轴和Y轴及其他地方，做一些美化设置，设置完毕后，折线图最终页面如下图所示：

image-20241209204140909

最终完整代码如下：

import { McLineChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 折线图-案例页面*/
@Entry
@Component
struct LineCharts {@State message: string = 'Hello World';@State defOptions: Options = new Options({//设置图例的相关样式与功能legend: {top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ff000000', //字体颜色fontSize: 40, //字体大小fontWeight: '500' //字体粗细}},//设置X轴的相关样式与功能xAxis: {axisLabel: {color: '#ff838383', //X轴字体颜色fontSize: 28, //X轴字体大小fontWeight: '600' //X轴字体粗线},axisTick: {//刻度线配置show: true, //控制刻度线显示与隐藏length: 6, // 刻度线的长度interval: 4, //刻度线与文本的间隔lineStyle: {color: '#ff838383', //X轴刻度线颜色width: 1 //X轴线刻度线宽度}},axisLine: {//x轴线配置show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏lineStyle: {color: '#ff838383', //X轴线条颜色width: 1, //X轴线宽度type: 'solid' //X轴线类型}},data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},//设置Y轴的相关样式与功能yAxis: {name: '温度',axisTick: {//刻度线配置length: 6, //刻度的长度lineStyle: {//刻度线样式color: '#ff838383', //线颜色width: 1 //线宽度}},axisLine: {//y轴线配置show: true //隐藏y轴线},splitLine: {// Y轴分割线配置。show: true, //显示分割线lineStyle: {//轴线样式color: '#ffe5e5e5', //线颜色width: 1 //线宽度}},axisLabel: {//y轴文本标签样式配置color: '#ff838383', //字体颜色fontSize: 35, //字体大小fontWeight: '500' //字体粗细},},//设置折线区的相关样式与功能series: [{name: "周最高气温", //图例文字color: '#ffff0002', //图例颜色lineStyle: {//折线样式配置width: 2, //折线宽度color: '#ffff0002' //折线显色},itemStyle: {//折线拐点配置symbol: 'solidCircle', //拐点类型symbolSize: 4 //拐点大小},data: [11, 5, 9, 13, 12, 12, 5] //数据},{name: "周最低气温", //图例文字color: '#52C41A', //图例颜色lineStyle: {width: 2, //折线宽度color: '#52C41A' //折线显色},itemStyle: {//折线拐点配置symbol: 'solidCircle', //拐点类型symbolSize: 4 //拐点大小},data: [3, 0, 3, 5, 4, 2, 2] //数据}],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//折线图组件McLineChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

3.6. 单折线图

效果如下图所示：

image-20241209212829817

代码：

import { McLineChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 单折线图-案例页面*/
@Entry
@Component
struct SingleLineCharts {@State defOptions: Options = new Options({//设置图例的相关样式与功能legend: {top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ff000000', //字体颜色fontSize: 40, //字体大小fontWeight: '500' //字体粗细}},//设置X轴的相关样式与功能xAxis: {axisLabel: {color: '#ff838383', //X轴字体颜色fontSize: 28, //X轴字体大小fontWeight: '600' //X轴字体粗线},axisTick: {//刻度线配置show: true, //控制刻度线显示与隐藏length: 6, // 刻度线的长度interval: 4, //刻度线与文本的间隔lineStyle: {color: '#ff838383', //X轴刻度线颜色width: 1 //X轴线刻度线宽度}},axisLine: {//x轴线配置show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏lineStyle: {color: '#ff838383', //X轴线条颜色width: 1, //X轴线宽度type: 'solid' //X轴线类型}},data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},//设置Y轴的相关样式与功能yAxis: {name: '人民币(万元)',axisTick: {//刻度线配置length: 6, //刻度的长度lineStyle: {//刻度线样式color: '#ff838383', //线颜色width: 1 //线宽度}},axisLine: {//y轴线配置show: true //隐藏y轴线},splitLine: {// Y轴分割线配置。show: true, //显示分割线lineStyle: {//轴线样式color: '#ffe5e5e5', //线颜色width: 1 //线宽度}},axisLabel: {//y轴文本标签样式配置color: '#ff838383', //字体颜色fontSize: 35, //字体大小fontWeight: '500' //字体粗细},},//设置折线区的相关样式与功能series: [{name: "每周销售额", //图例文字color: '#ffff0000', //图例颜色lineStyle: {width: 2, //折线宽度color: '#ffff0000' //折线显色},itemStyle: {//折线拐点配置symbol: 'ffff0000', //拐点类型symbolSize: 4 //拐点大小},data: [123.36, 102.36, 189.23, 98.59, 110.25, 114.95, 131.25] //数据}],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//折线图组件McLineChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

4. 绘制饼状图

4.1. 实心饼状图

效果图：

image-20241209210311095

代码如下：

import { McPieChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 饼状图-案例页面*/
@Entry
@Component
struct PieCharts {@State message: string = 'Hello World';@State defOptions: Options = new Options({//调色盘颜色列表color: ['#FAAD14', '#3C73FF', '#52C41A', '#FF4D4F'],//设置图例的相关样式与功能legend: {top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ff00b4ff', //字体颜色fontSize: 30, //字体大小fontWeight: '800' //字体粗细}},// title: {//   show: true,//   text: '最受欢迎语言', // 主标题文本//   subtext: '占比', // 副标题文本//   top: '30%',// },series: [{// radius: ['45%', '30%'], // 饼图外半径、内半径center: ['50%', '30%'], // 饼图中心位置data: [{ name: 'Java', value: 201 },{ name: '鸿蒙', value: 638 },{ name: 'Python', value: 256 },{ name: '人工智能', value: 159 },],labelLine: {//文本连接线样式配置length: 10, //连接线1的长度length2: 30, //连接线2的长度lineStyle: {//提示线样式width: 1, //线宽度color: '#ffff0000' //线颜色}},label: {//系列文本标签样式配置show: true, //是否显示文本标签fontWeight: '800', //字体粗细fontFamily: 'sans-serif',color: '#ffffffff', //字体颜色position: 'outside', //文本显示位置fontSize: 30, //字体大小distanceToLabelLine: 6 //字体与饼状间距},}],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//饼状图组件McPieChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

4.2. 空心饼状图

效果图：

image-20241209210353231

代码如下：

import { McPieChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 饼状图-案例页面*/
@Entry
@Component
struct PieCharts {@State message: string = 'Hello World';@State defOptions: Options = new Options({//调色盘颜色列表color: ['#FAAD14', '#3C73FF', '#52C41A', '#FF4D4F'],//设置图例的相关样式与功能legend: {top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ff00b4ff', //字体颜色fontSize: 30, //字体大小fontWeight: '800' //字体粗细}},title: {show: true,text: '最受欢迎语言', // 主标题文本subtext: '占比', // 副标题文本top: '30%',},series: [{radius: ['45%', '30%'], // 饼图外半径、内半径center: ['50%', '30%'], // 饼图中心位置data: [{ name: 'Java', value: 201 },{ name: '鸿蒙', value: 638 },{ name: 'Python', value: 256 },{ name: '人工智能', value: 159 },],labelLine: {//文本连接线样式配置length: 10, //连接线1的长度length2: 30, //连接线2的长度lineStyle: {//提示线样式width: 1, //线宽度color: '#ffff0000' //线颜色}},label: {//系列文本标签样式配置show: true, //是否显示文本标签fontWeight: '800', //字体粗细fontFamily: 'sans-serif',color: '#ffffffff', //字体颜色position: 'outside', //文本显示位置fontSize: 30, //字体大小distanceToLabelLine: 6 //字体与饼状间距},}]})
​build() {Column() {//饼状图组件McPieChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

5. 绘制柱状图

5.1. 双柱

效果图如下所示：

image-20241209211622608

代码如下：

import { McBarChart, McPieChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 柱状图-案例页面*/
@Entry
@Component
struct BarCharts {@State message: string = 'Hello World';@State defOptions: Options = new Options({legend: {//设置图例的相关样式与功能top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ffff0000', //字体颜色fontSize: 30, //字体大小fontWeight: '800' //字体粗细}},yAxis: {//设置y轴的相关样式与功能name: '美元',axisTick: {//刻度线配置length: 6, //刻度的长度lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//y轴线配置show: true //隐藏y轴线},splitLine: {// Y轴分割线配置。show: true, //显示分割线lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1 //线宽度}},axisLabel: {//y轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗细},},xAxis: {axisLabel: {//X轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗线},axisTick: {//刻度线配置show: true, //控制刻度线显示与隐藏length: 6, // 刻度线的长度interval: 4, //刻度线与文本的间隔lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//x轴线配置show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1, //线宽度type: 'solid' //线类型}},//设置x轴的相关样式与功能data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},series: [//设置柱状区的相关样式与功能{label: {//系列文本标签样式配置show: true, //显示文本标签样color: '#FFFFFF', //字体颜色fontWeight: '600', //字体粗细fontFamily: 'sans-serif', //字体样式position: 'center', //文本显示位置fontSize: 22, //字体大小distanceToLabelLine: 5 //字体与柱状间距},name: "收入", //图例文字color: '#FAAD14', //图例颜色stack: '', //是否显示堆叠柱子barStyle: {//柱状样式配置width: 14, //柱子宽度color: '#FAAD14', //柱子颜色barGap: 1 //同系列之间的柱子间隙},data: [60, 50, 42, 75, 40, 60, 35] //数据},{label: {//系列文本标签样式配置show: true, //显示文本标签样color: '#FFFFFF', //字体颜色fontWeight: '600', //字体粗细fontFamily: 'sans-serif', //字体样式position: 'center', //文本显示位置fontSize: 22, //字体大小distanceToLabelLine: 5 //字体与柱状间距},name: "支出", //图例文字color: '#3C73FF', //图例颜色stack: '', //是否显示堆叠柱子barStyle: {//柱状样式配置width: 14, //柱子宽度color: '#3C73FF', //柱子颜色barGap: 1 //同系列之间的柱子间隙},data: [40, 55, 19, 9, 21, 15, 11] //数据}],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//柱状图组件McBarChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

5.2. 单柱

效果图如下所示：

image-20241209213125702

代码如下：

import { McBarChart, McPieChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 单柱状图-案例页面*/
@Entry
@Component
struct SingleBarCharts {@State defOptions: Options = new Options({legend: {//设置图例的相关样式与功能top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#3C73FF', //字体颜色fontSize: 30, //字体大小fontWeight: '800' //字体粗细}},yAxis: {//设置y轴的相关样式与功能name: '人民币(万元)',axisTick: {//刻度线配置length: 6, //刻度的长度lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//y轴线配置show: true //隐藏y轴线},splitLine: {// Y轴分割线配置。show: true, //显示分割线lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1 //线宽度}},axisLabel: {//y轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗细},},xAxis: {axisLabel: {//X轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗线},axisTick: {//刻度线配置show: true, //控制刻度线显示与隐藏length: 6, // 刻度线的长度interval: 4, //刻度线与文本的间隔lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//x轴线配置show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1, //线宽度type: 'solid' //线类型}},//设置x轴的相关样式与功能data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},series: [//设置柱状区的相关样式与功能{label: {//系列文本标签样式配置show: true, //显示文本标签样color: '#FFFFFF', //字体颜色fontWeight: '600', //字体粗细fontFamily: 'sans-serif', //字体样式position: 'center', //文本显示位置fontSize: 22, //字体大小distanceToLabelLine: 5 //字体与柱状间距},name: "每周收入", //图例文字color: '#3C73FF', //图例颜色stack: '', //是否显示堆叠柱子barStyle: {//柱状样式配置width: 14, //柱子宽度color: '#3C73FF', //柱子颜色barGap: 1 //同系列之间的柱子间隙},data: [60, 50, 42, 75, 40, 60, 35] //数据},],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//柱状图组件McBarChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

5.1. 层叠柱

效果图如下所示：

image-20241209213845406

代码如下：

import { McBarChart, McPieChart, Options } from '@mcui/mccharts'
​
/*** Author: 波波老师(weixin:javabobo0513)* Desc: 层叠柱状图-案例页面*/
@Entry
@Component
struct CengDieBarCharts {@State defOptions: Options = new Options({legend: {//设置图例的相关样式与功能top: '5%', //图例距离顶部侧位置itemWidth: 10, //图形的宽度itemHeight: 10, //图形的高度textStyle: {//文本样式配置color: '#ffff0000', //字体颜色fontSize: 30, //字体大小fontWeight: '800' //字体粗细}},yAxis: {//设置y轴的相关样式与功能name: '美元',axisTick: {//刻度线配置length: 6, //刻度的长度lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//y轴线配置show: true //隐藏y轴线},splitLine: {// Y轴分割线配置。show: true, //显示分割线lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1 //线宽度}},axisLabel: {//y轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗细},},xAxis: {axisLabel: {//X轴文本标签样式配置color: '#999999', //字体颜色fontSize: 28, //字体大小fontWeight: '600' //字体粗线},axisTick: {//刻度线配置show: true, //控制刻度线显示与隐藏length: 6, // 刻度线的长度interval: 4, //刻度线与文本的间隔lineStyle: {//刻度线样式color: '#FFFFFF', //线颜色width: 1 //线宽度}},axisLine: {//x轴线配置show: true, //控制轴线显示与隐藏 可选值-true显示 false-隐藏lineStyle: {//轴线样式color: '#D9D9D9', //线颜色width: 1, //线宽度type: 'solid' //线类型}},//设置x轴的相关样式与功能data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},series: [//设置柱状区的相关样式与功能{label: {//系列文本标签样式配置show: true, //显示文本标签样color: '#FFFFFF', //字体颜色fontWeight: '800', //字体粗细fontFamily: 'sans-serif', //字体样式position: 'center', //文本显示位置fontSize: 28, //字体大小distanceToLabelLine: 5 //字体与柱状间距},name: "收入", //图例文字color: '#FAAD14', //图例颜色stack: 'total', //是否显示堆叠柱子barStyle: {//柱状样式配置width: 14, //柱子宽度color: '#FAAD14', //柱子颜色barGap: 1 //同系列之间的柱子间隙},data: [60, 50, 42, 75, 40, 60, 35] //数据},{label: {//系列文本标签样式配置show: true, //显示文本标签样color: '#3C73FF', //字体颜色fontWeight: '800', //字体粗细fontFamily: 'sans-serif', //字体样式position: 'top', //文本显示位置fontSize: 28, //字体大小distanceToLabelLine: 3 //字体与柱状间距},name: "支出", //图例文字color: '#3C73FF', //图例颜色stack: 'total', //是否显示堆叠柱子barStyle: {//柱状样式配置width: 14, //柱子宽度color: '#3C73FF', //柱子颜色barGap: 1 //同系列之间的柱子间隙},data: [40, 55, 19, 9, 21, 15, 11] //数据}],tooltip: {//设置提示层的相关样式与功能axisPointer: {//指示器配置项type: 'line', //指示器类型lineStyle: {//提示线样式color: '#D9D9D9', //线颜色width: 2, //线宽度type: 'solid' //线类型}},backgroundColor: '#FFFFFF', //提示框背景颜色borderColor: '#C4C4C4', //提示框边框颜色borderWidth: 1, //提示框边框宽度padding: 6, //提示框内边距textStyle: {//文本样式配置color: '#666666', //字体颜色fontSize: 14 //字体大小}},})
​build() {Column() {//柱状图组件McBarChart({ options: this.defOptions }).height('60%') //设置图表区域的高度}.height('100%').width('100%')}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/889380.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于go语言的开源调度系统整理

基于go语言的开源调度系统整理

pink https://github.com/busgo/pink 通过Web界面管理操作简单方便，支持各种任务 高可用可以部署 n 台调度集群节点，保证没有单点故障。 部署简单、仅仅需要一个执行文件即可运行。 集成方便，统一语言无关的任务抽象，接入不同语言…
阅读更多...
多个终端查看的history不一样,如何确保多个终端会话之间的 history 一致，减少历史记录差异

多个终端查看的history不一样,如何确保多个终端会话之间的 history 一致，减少历史记录差异

问题： 在使用 Linux 系统时，history 命令显示的历史记录通常是与当前终端会话相关的。这就意味着，如果你在多个终端中打开会话，它们显示的历史记录可能不完全相同。这个问题通常是由以下原因引起的： 原因&#xff1a…
阅读更多...
yolov8 转华为昇腾om脚本

yolov8 转华为昇腾om脚本

目录 yolov8 转华为昇腾 om脚本 测试ok 推理demo： yolov8 转华为昇腾 om脚本 测试ok import sys import osos.chdir(os.path.dirname(os.path.abspath(__file__)))import torchcurrent_dir = os.path.dirname(os.path.abspath(__file__))paths = [os.path.abspath(__file__)…
阅读更多...
unity打包sdk热更新笔记

unity打包sdk热更新笔记

Unity3D项目Plugins目录组织 https://blog.csdn.net/linxinfa/article/details/102978005 IPreprocessBuild 继承提供打包前，打包后接口 BuildAssetBundles UnityWebRequest’s DownloadHandlerAssetBundle / LoadFromFile / LoadFromMemoryAsync 数据完整性校…
阅读更多...
12.11-12.12总结（约瑟夫问题 机器翻译 滑动窗口）

12.11-12.12总结（约瑟夫问题 机器翻译 滑动窗口）

12.11 刷题 《算法竞赛》这本书看了很多了，但是题目没咋做，所以今天来刷一下题 P1996约瑟夫问题 还依稀记得大一的时候被约瑟夫支配的恐惧（哭），但是现在做就感觉很简单（虽然也敲了一会，今早感…
阅读更多...
git SSL certificate problem: unable to get local issuer certificate

git SSL certificate problem: unable to get local issuer certificate

Git 客户端将会验证服务器端提供的SSL证书是否由受信任的证书颁发机构（Certification Authority，CA）签发。如果Git客户端无法找到或验证本地签发者证书，就会出现 unable to get local issuer certificate 或类似的错误。 该问题一…
阅读更多...
使用秘钥登录服务器

使用秘钥登录服务器

在我们测试或生产环境中，为了服务器安全性，有时可能需要以 SSH 密钥的方式登录服务器，接下来，将演示如何通过 SSH 私钥的方式来远程服务器。 一、远程服务器生成密钥对 1、首先在目标远程服务器下生成 SSH 密钥对 ssh-keygen然…
阅读更多...
css设置透明的几种办法

css设置透明的几种办法

在CSS中，有几种方法可以设置元素的透明度。以下是主要的几种方式： 1. 使用 opacity 属性 定义：opacity 属性用于设置元素的整体透明度，包括其内容和背景。取值范围：取值从0（完全透明）到1&…
阅读更多...
4，双向带头循环链表

4，双向带头循环链表

目录 1，双向带头循环链表的定义 2，双向带头循环链表的实现 A，函数的声明 B，函数的定义 1，双向带头循环链表的定义 带头双向循环链表：结构复杂，一般用在单独存储数据。实际中使用的链表数据…
阅读更多...
谷粒商城—分布式基础

谷粒商城—分布式基础

1. 整体介绍 1）安装vagrant 2）安装Centos7 $ vagrant init centos/7 A `Vagrantfile` has been placed in this directory. You are now ready to `vagrant up` your first virtual environment! Please read the comments in the Vagrantfile as well as documentation on…
阅读更多...
TimesFM（Time Series Foundation Model）安装（2）

TimesFM（Time Series Foundation Model）安装（2）

TimesFM（Time Series Foundation Model）安装简介 readme TimesFM（Time Series Foundation Model）安装简介（1）-CSDN博客https://blog.csdn.net/chenchihwen/article/details/144359861?spm1001.2014.3001…
阅读更多...
Cesium进阶教程——自定义图形、外观、绘图基础、现有着色器移植至Cesium、ShadowMapping、视频GIS、模型压平、卷帘

Cesium进阶教程——自定义图形、外观、绘图基础、现有着色器移植至Cesium、ShadowMapping、视频GIS、模型压平、卷帘

基础必看 https://blog.csdn.net/m0_55049655/article/details/139720401 参考路线 http://www.xt3d.online/tutorial/further/article.html 自定义图形 https://blog.csdn.net/m0_55049655/article/details/138908327 https://blog.csdn.net/m0_55049655/article/details/14…
阅读更多...
国际荐酒师（香港）协会亮相第六届地博会助力中欧地标交流合作

国际荐酒师（香港）协会亮相第六届地博会助力中欧地标交流合作

国际荐酒师（香港）协会亮相第六届知交会暨地博会，助力中欧地理标志产品交流合作 12月9日，第六届粤港澳大湾区知识产权交易博览会暨国际地理标志产品交易博览会（以下简称“第六届知交会暨地博会”）在中新广州…
阅读更多...
Apache Spark 的基本概念和在大数据分析中的应用。

Apache Spark 的基本概念和在大数据分析中的应用。

Apache Spark是一个开源大数据处理框架，被广泛应用于大规模数据分析、机器学习和图形处理等领域。它具有以下几个基本概念： RDD（Resilient Distributed Dataset）：RDD是Spark中最基本的数据抽象概念，代表了一…
阅读更多...
spring boot之@Import注解的应用

spring boot之@Import注解的应用

我们知道spring boot会通过ComponentScan定义包扫描路径进行业务定义的bean的加载，但是对于很多不在此包路径下定义的bean怎么办呢？比如其他jar包中定义的。这时候import就发挥作用了，通过它也可以实现bean的定义。具体是怎么做的呢&#xff…
阅读更多...
Horovod：分布式深度学习训练库；Horovod库中DistributedOptimizer

Horovod：分布式深度学习训练库；Horovod库中DistributedOptimizer

目录 Horovod：分布式深度学习训练库 环境准备 代码示例 运行脚本 Horovod库中DistributedOptimizer DistributedOptimizer的作用 举例说明 Horovod：分布式深度学习训练库 Horovod是一个开源的分布式深度学习训练库，它能够在多个节点（机器）和多个GPU上高效地并行运行…
阅读更多...
【Liunx篇】基础开发工具 - vim

【Liunx篇】基础开发工具 - vim

文章目录 一.vim的基本概念1.正常/命令模式2.插入模式3.底行模式/末行模式4.视图模式5.替换模式 二.vim的基本操作1.进入vim：2.退出vim: 三.vim正常模式命令集1.光标定位：2.复制/粘贴3.撤销4.剪切/删除5. 更改 四.vim底行模式命令集1.保存/退出2.调出行号…
阅读更多...
Windows安装WSL子系统及docker，以及WSL和docker配置、使用及问题解决

Windows安装WSL子系统及docker，以及WSL和docker配置、使用及问题解决

在Windows操作系统中，Ubuntu子系统（也称为Windows Subsystem for Linux, WSL）为开发者提供了一个在Windows环境下运行Linux环境的平台。然而，有时用户在按照Ubuntu子系统或者使用WSL时，可能会遇到各种问题，下面总结一下解决方式。 想要在Windows上安装Docker（实际上是基…
阅读更多...
构建Modbus TCP写多个寄存器指令详解

构建Modbus TCP写多个寄存器指令详解

构建Modbus TCP写多个寄存器指令详解 在Modbus TCP通信中，构建正确的指令对于实现设备间的数据交换至关重要。本文将详细解释如何构建一个Modbus TCP指令，用于向设备地址为1的从站，从地址200（0xC8）开始，连…
阅读更多...
【Golang】Go语言编程思想（六）：Channel，第三节，使用Channel实现树的遍历

【Golang】Go语言编程思想（六）：Channel，第三节，使用Channel实现树的遍历

使用 Channel 实现树的遍历 tree 在此处简单回顾一下之前学过的二叉树遍历，首先新建一个名为 tree 的目录，并在其下对文件和子目录进行如下组织： 其中 node.go 存放的是 Node 的定义： package treeimport "fmt"type…
阅读更多...
最新文章

Copyright @ 2022~2023