vue3-echarts-wrap

EcharsWrapper

集合了大部分echarts图表组件的封装，方便快速搭建图表 包括柱状图、折线图、饼状图、散点图、3d图表等

安装

npm install vue3-echarts-wrap

示例

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/line

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/pie

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/bar

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/3Dbar

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/3Dpie

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/scatter

官方文档配置说明

https://static-mp-9a949f8f-3c3a-442c-92b0-f5d49157b2fc.next.bspapp.com/#/index

基本应用

<template>
  <EChartsWrapper :options="chartOptions" />
</template>

<script setup>
import { ref } from 'vue'
import { EChartsWrapper } from 'vue3-echarts-wrap'
   
   
const chartOptions = ref({
    titleData: { cTitle: 'bar', titleSize: 0.16, titleColor: '#000' },
    type: 'bar',
    xAxisData: { xAxisDataList: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], xColor: '#000' },
    charColor: ['228, 255, 152', '129, 182, 244'],
    showTip: true,
    grid: ['20%', '10%', '10%', '10%'],
    seriesData: [{ data: [150, 230, 224, 218, 135, 147, 260] }]
})
</script>


# 多数据源合并示例
<template>
  <EChartsWrapper 
    :options="baseOptions"
    :dataFn="fetchData"
    :wsConfig="wsConfig"
  />
</template>

<script setup>
import { ref } from 'vue'
import { EChartsWrapper } from 'vue3-echarts-wrap'

const baseOptions = ref({ /* 基础配置 */ })

const fetchData = async () => {
  const res = await fetch('/api/chart-data')
  //返回格式
  // return{
  //     seriesData: [],
  //     xAxisData:[],
  //     yAxisData:[]
  // }
  return res.json()
}

const wsConfig = ref({
  url: 'wss://example.com/realtime',
  reconnect: true
})

</script>