鸿蒙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，一经查实，立即删除！

相关文章

unity打包sdk热更新笔记

unity打包sdk热更新笔记

Unity3D项目Plugins目录组织 https://blog.csdn.net/linxinfa/article/details/102978005 IPreprocessBuild 继承提供打包前，打包后接口 BuildAssetBundles UnityWebRequest’s DownloadHandlerAssetBundle / LoadFromFile / LoadFromMemoryAsync 数据完整性校…
阅读更多...
使用秘钥登录服务器

使用秘钥登录服务器

在我们测试或生产环境中，为了服务器安全性，有时可能需要以 SSH 密钥的方式登录服务器，接下来，将演示如何通过 SSH 私钥的方式来远程服务器。 一、远程服务器生成密钥对 1、首先在目标远程服务器下生成 SSH 密钥对 ssh-keygen然…
阅读更多...
谷粒商城—分布式基础

谷粒商城—分布式基础

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日，第六届粤港澳大湾区知识产权交易博览会暨国际地理标志产品交易博览会（以下简称“第六届知交会暨地博会”）在中新广州…
阅读更多...
spring boot之@Import注解的应用

spring boot之@Import注解的应用

我们知道spring boot会通过ComponentScan定义包扫描路径进行业务定义的bean的加载，但是对于很多不在此包路径下定义的bean怎么办呢？比如其他jar包中定义的。这时候import就发挥作用了，通过它也可以实现bean的定义。具体是怎么做的呢&#xff…
阅读更多...
【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（实际上是基…
阅读更多...
【Golang】Go语言编程思想（六）：Channel，第三节，使用Channel实现树的遍历

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

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

IDEA 2024 版本配置热部署

在实际开发过程中，每次修改代码就得将项目重启，重新部署，对于一些大型应用来说，重启时间需要花费大量的时间成本。对于一个后端开发者来说，重启过程确实很难受啊 采用下面三步骤可以完成 1.在IDEA中settings中搜索Debb…
阅读更多...
【目标跟踪】DUT Anti-UAV数据集详细介绍

【目标跟踪】DUT Anti-UAV数据集详细介绍

DUT Anti-UAV数据集是大连理工大学的团队公开的数据集（DUT是他们学校的简称），其中包括了两个子数据集：目标检测和目标跟踪（也就是说，目标检测和目标跟踪都可以用这个数据集）。该数据集为可见光模…
阅读更多...
经典多模态模型CLIP - 直观且详尽的解释

经典多模态模型CLIP - 直观且详尽的解释

阅读原文 在本文中，您将了解“contrastive language-image pre-training”（CLIP），这是一种创建视觉和语言表示的策略，效果非常好，可用于制作高度特定且性能卓越的分类器，而无需任何训练数据。本…
阅读更多...
探索云原生安全解决方案的未来

探索云原生安全解决方案的未来

我们是否充分意识到云端所面临的网络安全威胁？ 在当今互联互通的世界中，维护安全的环境至关重要。云的出现扩大了潜在威胁的范围，因为它催生了机器身份（称为非人类身份 (NHI)）及其秘密。随着组织越来越多地转向云原生…
阅读更多...
项目组件框架介绍[etcd]

项目组件框架介绍[etcd]

文章目录 前言etcd安装Ubuntu 上通过包管理器安装通过源码安装配置 客户端开发包开发包的安装接口介绍添加一个键值对获取一个键值对租约保活机制监听 封装服务注册与发现服务注册服务发现 前言 Etcd 是一个 golang 编写的分布式、高可用的一致性键值存储系统，用于配…
阅读更多...
在Windows 10中使用SSH远程连接服务器（附花生壳操作方法）

在Windows 10中使用SSH远程连接服务器（附花生壳操作方法）

SSH 在 linux 中是一种重要的系统组件，用户可以使用 SSH 来远程连接 linux 系统的计算机，或者传输文件。不过在 win10 以前，windows 并不原生支持 SSH，需要借助第三方工具来使用 SSH 功能。而实际上，微软在 2015 年就曾…
阅读更多...
【环境搭建】Jeecg-Boot v3.5.0 Docker搭建

【环境搭建】Jeecg-Boot v3.5.0 Docker搭建

前言 最近需要复现JeecgBoot的SQL注入漏洞，必须要搭建JeecgBoot v3.5.0这个版本才行，DockerHub没人push这个版本的，相关博客也比较少，所以自己来搭建，记录一下过程。 前置环境 Ubuntu 20.04Docker version 27.3.1do…
阅读更多...
【人工智能基础06】人工神经网络（练习题）：神经网络的计算、激活函数的选择与神经网络的退化

【人工智能基础06】人工神经网络（练习题）：神经网络的计算、激活函数的选择与神经网络的退化

文章目录 1. 基于神经网络计算心理健康程度2. 添加激活函数的神经网络计算3. 使用神经网络预测小胖是否会变胖4. 激活函数选择的讨论5. 神经网络的设计6. 深度线性模型的表达能力线性模型7. 神经网络退化 主要讨论的内容 什么是人工神经网络，相关计算反向传播算法的…
阅读更多...
STM32 串口收发文本数据包

STM32 串口收发文本数据包

单片机学习！ 目录 前言 一、文本数据包格式 二、串口收发文本数据包代码 三、代码解析 3.1 标志位清除 3.2 数据包接收 四、代码问题改进 总结 前言 本文介绍了串口收发文本数据包程序设计的思路并详解代码作用。 一、文本数据包格式 文本数据包的格式的定义…
阅读更多...
预言机调研

预言机调研

预言机 1. 概述 预言机主要承担两个工作，一是验证信息可靠性，二是传递信息。 如果没有预言机，区块链的信息来源将仅限于其内部数据，其广泛使用的潜力和可能性将会大大降低。 区块链预言机是区块链与外部世界之间的桥梁。它们使区…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023