minichat-uni-charts

Reusable uni-app chart components for H5, mini programs, and app builds.

The package ships source Vue SFC components so the consuming uni-app project can compile them for its target platform. The first component is McBarChart, a canvas-based bar chart with an ECharts-like option subset.

Install

pnpm add minichat-uni-charts

or:

npm install minichat-uni-charts

Usage

Register globally in main.ts:

import { createSSRApp } from 'vue'
import App from './App.vue'
import MinichatCharts from 'minichat-uni-charts'

export function createApp() {
  const app = createSSRApp(App)
  app.use(MinichatCharts)
  return { app }
}

Use in a page:

<template>
  <mc-bar-chart :option="chartOption" :height="280" @click="handleChartClick" />
</template>

<script setup lang="ts">
import type { BarChartClickEvent, BarChartOption } from 'minichat-uni-charts'

const chartOption: BarChartOption = {
  title: { text: 'Monthly Sales' },
  tooltip: { show: true },
  legend: { show: true },
  xAxis: { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
  yAxis: { splitNumber: 5 },
  series: [
    {
      name: 'Online',
      type: 'bar',
      data: [120, 200, 150, 80, 170, 230]
    },
    {
      name: 'Store',
      type: 'bar',
      data: [90, 160, 120, 100, 130, 190]
    }
  ]
}

function handleChartClick(event: BarChartClickEvent) {
  console.log(event)
}
</script>

Or import only the component:

<script setup lang="ts">
import McBarChart from 'minichat-uni-charts/bar-chart'
</script>

Easycom

For auto import in pages.json, add:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^mc-bar-chart$": "minichat-uni-charts/src/components/mc-bar-chart/mc-bar-chart.vue"
    }
  }
}

Supported option subset

const option = {
  color: ['#5470c6', '#91cc75'],
  backgroundColor: '#ffffff',
  title: { text: 'Title', subtext: 'Subtitle', left: 'left' },
  tooltip: { show: true },
  legend: { show: true },
  grid: { top: 48, right: 16, bottom: 46, left: 44, containLabel: true },
  xAxis: { data: ['A', 'B', 'C'], name: 'Category' },
  yAxis: { min: 0, max: 100, splitNumber: 5, name: 'Value' },
  series: [
    {
      name: 'Series',
      type: 'bar',
      data: [10, 20, 30],
      barWidth: 18,
      itemStyle: { color: '#5470c6', borderRadius: 4 },
      label: { show: true, position: 'top' }
    }
  ]
}

Development

pnpm install
pnpm run typecheck
pnpm run build

Before publishing, update package.json name/version and run:

npm publish --access public