鸿蒙图表——三方库

import { chartInterface, McBarChart, McLineChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State McBarChart: Options|null =  null
  @State dataZoomOption: Options|null = null



  aboutToAppear(): void {
    this.getBarChart()
    this.getLineChart()
  }

  //绘制柱状图
  getBarChart(){
    this.McBarChart = new Options({
      xAxis:{
        axisLine: { // 轴线样式
          show: true, // 是否显示
          lineStyle: {
            color: '#ccc',
            width: 1
          }
        },
        axisTick: { // 刻度线配置
          show: false, // 是否显示
          length: 4, // 刻度的长度
          lineStyle: {
            color: '#ccc', // 刻度线颜色
            width: 2 // 刻度线宽度
          }
        },
        axisLabel: {  // x轴文本标签样式
          fontWeight: '600',
          fontFamily: 'sans-serif',
          fontSize: 30,
        },
        // formatter: (name: string) => { // 自定义文本标签
        //   return '周六'
        // },
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      yAxis:{
        name:'温度'
      },
      series:[
        {
          name:'最高气温',
          data:[11, 110, 15, 130, 12, 130, 10]
        }
      ]
    })
  }

  // 绘制折线图
  getLineChart(){
    this.dataZoomOption =new Options({
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      series:[
        {
          name:'最高气温',
          color: '#ff2659f5', // 自定义颜色
          lineStyle: { // 折线样式配置
            width: 2,
            type: 'solid'
          },
          label: { // 文本标签样式
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 30,
            // 自定义文本
            // formatter: (params: chartInterface.InterfaceObj): string => {
            //   return params.name
            // },
          },
          itemStyle: { // 转折点的样式
            symbol: 'solidCircle',
            symbolSize: 2,
            symbolColor: '#fff',
            borderWidth: 1,
            borderType: 'solid',
            borderColor: '#ff2659f5'
          },
          // 平滑曲线
          smooth: true,
          // 区域颜色，线性渐变
          // areaStyle: {
          //   color: {
          //     direction: [0, 1, 0, 0], // 渲染角度
          //     colors: [ // 颜色的分布
          //       {
          //         offset: 0,
          //         color: '#f72659f5'
          //       },
          //       {
          //         offset: 0.5,
          //         color: '#f72659f5'
          //       },
          //       {
          //         offset: 1,
          //         color: '#002659f5'
          //       }
          //     ]
          //   }
          // },
          data:[11, 110, 15, 130, 12, 130, 10] // 数据
        }
      ]
    })
  }
  build() {
    Stack() {
      McBarChart({
        options: this.McBarChart
      })
        .zIndex(88)
        .margin({top:-9})
      McLineChart({
        options: this.dataZoomOption
      })
    }
    .height('50%')
    .align(Alignment.Top)
  }
}