mccharts HarmonyOS鸿蒙Next
mccharts HarmonyOS鸿蒙Next 安装mccharts步骤：点击项目右键-打开范围-Terminal-输入 ohpm install @mcui/mccharts
@Component
export struct BarCharts {
@State defOptions: Options = new Options({
legend: {
top: '5%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#ffff0000',
fontSize: 30,
fontWeight: '800'
}
},
yAxis: {
name: '人民币',
axisTick: {
length: 6,
lineStyle: {
color: '#FFFFFF',
width: 1
}
},
axisLine: {
show: true
},
splitLine: {
show: true,
lineStyle: {
color: '#D9D9D9',
width: 1
}
},
axisLabel: {
color: '#999999',
fontSize: 28,
fontWeight: '600'
},
},
xAxis: {
axisLabel: {
color: '#999999',
fontSize: 28,
fontWeight: '600'
},
axisTick: {
show: true,
length: 6,
interval: 4,
lineStyle: {
color: '#FFFFFF',
width: 1
}
},
axisLine: {
show: true,
lineStyle: {
color: '#D9D9D9',
width: 1,
type: 'solid'
}
},
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, 30, 72, 75, 50, 67, 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: [30, 55, 29, 19, 27, 15, 51]
}
],
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%')
}
}
@Component
export struct LineCharts {
@State defOptions: Options = new Options({
legend: {
top: '5%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#ff000000',
fontSize: 40,
fontWeight: '500'
}
},
xAxis: {
axisLabel: {
color: '#ff838383',
fontSize: 28,
fontWeight: '600'
},
axisTick: {
show: true,
length: 6,
interval: 4,
lineStyle: {
color: '#ff838383',
width: 1
}
},
axisLine: {
show: true,
lineStyle: {
color: '#ff838383',
width: 1,
type: 'solid'
}
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
name: '降水量',
axisTick: {
length: 6,
lineStyle: {
color: '#ff838383',
width: 1
}
},
axisLine: {
show: true
},
splitLine: {
show: true,
lineStyle: {
color: '#ffe5e5e5',
width: 1
}
},
axisLabel: {
color: '#ff838383',
fontSize: 35,
fontWeight: '500'
},
},
series: [
{
name: "周最高降水量",
color: '#ffff0002',
lineStyle: {
width: 2,
color: '#ffff0002'
},
itemStyle: {
symbol: 'solidCircle',
symbolSize: 4
},
data: [10, 8, 9, 10, 11, 18, 8]
},
{
name: "周最低降水量",
color: '#52C41A',
lineStyle: {
width: 2,
color: '#52C41A'
},
itemStyle: {
symbol: 'solidCircle',
symbolSize: 4
},
data: [5, 0, 1, 5, 7, 3, 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%')
}
}
@Component
export struct PieCharts {
@State defOptions: Options = new Options({
color: ['#FAAD14', '#3C73FF', '#52C41A', '#FF4D4F'],
legend: {
top: '5%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#ff00b4ff',
fontSize: 30,
fontWeight: '800'
}
},
series: [
{
center: ['50%', '30%'],
data: [
{ name: '黄金', value: 500 },
{ name: '白银', value: 638 },
{ name: '期货', value: 256 },
{ name: '股票', value: 309 },
],
labelLine: {
length: 10,
length2: 30,
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%')
}
}
@Component
export struct KPieCharts {
@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: '黄金', value: 200 },
{ name: '白银', value: 328 },
{ name: '期货', value: 176 },
{ name: '股票', value: 252 },
],
labelLine: {
length: 10,
length2: 30,
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%')
}
}
更多关于mccharts HarmonyOS鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
mccharts 是一个用于数据可视化的组件库，支持在鸿蒙OS（HarmonyOS）上进行图表绘制和展示。鸿蒙Next是鸿蒙OS的下一代版本，意味着mccharts在该版本中可能会得到进一步的优化和功能扩展。
在鸿蒙Next中，mccharts可能会支持更多的图表类型，如折线图、柱状图、饼图、雷达图等，并且会针对鸿蒙OS的分布式能力和性能进行优化。开发者可以通过鸿蒙的ArkUI框架调用mccharts的API，实现数据的可视化展示。
mccharts在鸿蒙Next中的使用方式与之前版本类似，开发者可以通过引入相应的库文件，并在代码中配置图表数据源、样式和交互事件。鸿蒙Next可能会提供更简洁的API接口和更高效的渲染机制，以提升开发效率和用户体验。
此外，mccharts可能会与鸿蒙OS的其他特性深度集成，如分布式数据共享、跨设备协同等，使得图表可以在不同设备间无缝展示和交互。开发者需要关注鸿蒙Next的官方文档和更新，以获取mccharts的最新特性和使用方法。
更多关于mccharts HarmonyOS鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
