uni-echarts

<template>
  <uni-echarts :option="option" @click="onClick" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// easycom 已自动注册，无需 import

const option = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
})

const onClick = (params: any) => {
  console.log('点击了', params.name, params.value)
}
</script>

// main.ts 或入口文件
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent, TooltipComponent, GridComponent, LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  BarChart, LineChart, PieChart,
  TitleComponent, TooltipComponent, GridComponent, LegendComponent,
  CanvasRenderer
])

# npm
npm install uni-echarts echarts

# pnpm
pnpm add uni-echarts echarts

# DCloud 插件市场导入
# https://ext.dcloud.net.cn/plugin?id=15250

{
  "easycom": {
    "custom": {
      "uni-echarts": "uni-echarts/components/uni-echarts/uni-echarts.vue"
    }
  }
}

<template>
  <view class="chart-container">
    <uni-echarts
      ref="chartRef"
      :option="option"
      :loading="loading"
      @click="onChartClick"
      @finished="onChartFinished"
    />
    <button @click="updateData">刷新数据</button>
    <button @click="exportImage">导出图片</button>
  </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'

const chartRef = ref()
const loading = ref(false)

// 使用 shallowRef 包装 echarts option（性能优化）
const option = shallowRef({
  title: { text: '销售数据', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['销售额', '利润'], bottom: 0 },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: { type: 'value', name: '万元' },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110],
      itemStyle: { color: '#5470c6' }
    },
    {
      name: '利润',
      type: 'line',
      data: [60, 95, 75, 40, 35, 55],
      itemStyle: { color: '#91cc75' }
    }
  ]
})

const updateData = () => {
  loading.value = true
  setTimeout(() => {
    option.value = {
      ...option.value,
      series: option.value.series.map(s => ({
        ...s,
        data: s.data.map(() => Math.round(Math.random() * 200 + 50))
      }))
    }
    loading.value = false
  }, 500)
}

const exportImage = () => {
  const instance = chartRef.value?.getEchartsInstance()
  if (instance) {
    const url = instance.getDataURL({
      type: 'png',
      pixelRatio: 2,
      backgroundColor: '#fff'
    })
    console.log('图片 URL:', url)
    // uni.saveImageToPhotosAlbum({ filePath: url })
  }
}

const onChartClick = (params: any) => {
  console.log('点击：', params.componentType, params.name, params.value)
}

const onChartFinished = () => {
  console.log('图表渲染完成')
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
</style>