comp-wrap

A Vue 2 component library with enhanced charts, maps and form components.
4,497
vue components echarts element-ui vue-amap
Install
npm install comp-wrap
Latest Version:3.4.3
Vue:2
License:MIT
Last Updated:Aug 9, 2026
Links: npm
Maintainer: tcheng8866

English | 中文

comp-wrap

npm version npm downloads license

A curated Vue 2 component library for everyday web development — battle-tested wrappers that smooth over the rough edges of native components and chart libraries, so you ship features instead of re-inventing widgets.

Pure components only: this package ships no utility functions, enhanced storage, or style system. Pair it with comp-wrap-kit when you also need tools and styles.

Why comp-wrap

  • 📊 Chart components (ECharts) — bar / horizontal / line / pie that are fully data-driven: switch a series on or off, change length, push new points — the chart re-renders without you touching a single setOption. No more "one extra data item and the fixed config blows up".
  • 🥧 Pie / donut center slot — a unified, predictable way to render content in the hole: the component only positions your slot at center_x / center_y and passes no data, so you fully control what shows (total, rate, label). No more ad-hoc absolute positioning that drifts when the center moves.
  • 🗺️ Map components (AMap) — marker list view and point picker dialog, wired up and ready; just pass data and listen for events.
  • ✏️ InputPlus — fixes the native <input> gotchas: maxlength that actually works, plus built-in number handling (negative toggle, decimal-limit) so weird pasted / special input won't corrupt your value.
  • 📦 Zero CSS setup — styles are inlined into the JS bundle (css.extract: false); Vue.use() and you're done.

Installation & Quick Start

npm install comp-wrap

import compWrap from 'comp-wrap'
// No separate CSS import needed — styles are bundled into the JS (css.extract: false)

Vue.use(compWrap)

Component List

  1. BarChartPlus — enhanced bar chart with rich config and interaction.
  2. HorChartPlus — enhanced horizontal bar chart for sideways data display.
  3. LineChartPlus — enhanced line chart with dynamic data and custom styling.
  4. PieChartPlus — enhanced pie / donut chart with proportion display and slot-based center content.
  5. MapMarkerListView — map marker list view for showing point info on AMap.
  6. MapPointPickerDialog — map point picker dialog for selecting coordinates.
  7. InputPlus — enhanced input that fixes native quirks (e.g. broken maxlength).

Component Usage Examples

1. BarChartPlus Bar Chart

Basic Usage
<bar-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></bar-chart-plus>
Full Configuration
<bar-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="400px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></bar-chart-plus>

2. HorChartPlus Horizontal Chart

Basic Usage
<hor-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></hor-chart-plus>
Full Configuration
<hor-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="300px" 
  height="400px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="30" 
  minSpan="50" 
  x_rotate="45" 
  x_axisLine 
  x_splitLine 
  y_name="金额" 
  y_type="value"
></hor-chart-plus>

3. LineChartPlus Line Chart

Basic Usage
<line-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></line-chart-plus>
Full Configuration
<line-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="600px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  smooth 
  step 
  symbol="emptyCircle" 
  symbolSize="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></line-chart-plus>

4. PieChartPlus Pie Chart

The center content is customized through the default slot: the component only positions the content at the center of the pie chart (center_x/center_y) and does not pass any data to the slot. What to display and how to calculate it are entirely handled by the business side.

Basic Usage (Solid Pie, No Center Content)
<pie-chart-plus 
  :seriesData="[{ name: '直接访问', value: 335 }, { name: '搜索引擎', value: 310 }, { name: '邮件营销', value: 234 }]"
></pie-chart-plus>
Donut + Center Slot (Business Side Prepares and Passes Content)
<pie-chart-plus 
  :seriesData="[{ name: '直接访问', value: 335 }, { name: '搜索引擎', value: 310 }, { name: '邮件营销', value: 234 }]" 
  width="400" 
  height="400" 
  theme="light" 
  :color="['#f00', '#0f0', '#00f']" 
  :radius="['45%', '70%']" 
  center_x="50%" 
  center_y="50%" 
  :legend="{ orient: 'horizontal', bottom: '2%', left: 'center' }" 
  label 
  borderWidth="2" 
  roseType="radius"
>
  <!-- The business-side computed value is directly written into the slot div -->
  <div class="ring-center">
    <span class="ring-center__label">统计量</span>
    <span class="ring-center__value">{{ total }}</span>
  </div>
</pie-chart-plus>

/* The business side styles it into a circular div */
.ring-center {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(238, 102, 102, 0.08);
  border: 2px solid rgba(238, 102, 102, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
Notes
  • radius defaults to ['0%', '75%'] for a solid pie; the center slot is recommended for use with donut charts (e.g. ['45%', '70%']), otherwise the content will cover the pie.
  • The center slot layer defaults to pointer-events: none, so it does not block pie chart hover/click; if the slot content needs interaction, set pointer-events: auto on the inner element.
  • The center content always follows center_x/center_y, so changing the center position will not cause misalignment.
  • The component does not pass data to the slot; the business side calculates and passes the content to display.

5. MapMarkerListView Map Marker List Component

<template>
  <div class="map-demo">
    <map-marker-list-view 
      :markerList="markerList"
      :mapConfig="mapConfig"
      @marker-click="handleMarkerClick">
    </map-marker-list-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapConfig: {
        zoom: 12,
        center: [116.397428, 39.90923]
      },
      markerList: [
        { id: 1, position: [116.397428, 39.90923], title: '天安门', icon: '/marker1.png' },
        { id: 2, position: [116.405285, 39.904989], title: '北京站前' },
        { id: 3, position: [116.443709, 39.914167], title: '东直门' }
      ]
    }
  },
  methods: {
    handleMarkerClick(item) {
      console.log('点击标记：', item)
    }
  }
}
</script>

6. MapPointPickerDialog Map Point Picker Dialog

<template>
  <div>
    <el-button @click="visible = true">选择地点</el-button>
    <map-point-picker-dialog 
      :visible.sync="visible" 
      mode="point" 
      :in-point="currentPoint" 
      @confirm="handlePointMapConfirm">
    </map-point-picker-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      currentPoint: null
    }
  },
  methods: {
    handlePointMapConfirm(point) {
      console.log('选中的地点坐标：', point)
      // point: { lng, lat, address }
    }
  }
}
</script>

7. InputPlus Enhanced Input Component

<template>
  <div>
    <!-- Basic usage -->
    <input-plus
      v-model="form.name"
      placeholder="请输入姓名"
      maxlength="20"
    ></input-plus>

    <!-- Amount input (negative numbers disabled + 2 decimal places) -->
    <input-plus
      v-model="form.price"
      type="number"
      :accept-minus="false"
      :decimal-limit="2"
      placeholder="请输入金额"
    ></input-plus>

    <!-- Negative numbers allowed -->
    <input-plus
      v-model="form.temperature"
      type="number"
      :accept-minus="true"
      :decimal-limit="1"
      placeholder="温度"
    ></input-plus>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        price: '',
        temperature: ''
      }
    }
  }
}
</script>

API Documentation

Common Chart Props (BarChartPlus / HorChartPlus / LineChartPlus / PieChartPlus)

Prop Description Type Default
width Chart width String / Number '100%'
height Chart height String / Number '300px'
theme Theme String 'light'
loading Whether to show loading animation Boolean false
emptyText Empty data prompt text String '暂无数据'
error Error state; can pass text Boolean / String false
notMerge Whether setOption should not merge Boolean false
lazyUpdate Whether setOption should update lazily Boolean false

Common Chart Methods (Called via ref)

Method Description Parameters
getInstance Get ECharts instance -
getDataURL Export image opts
dispatchAction Trigger ECharts action payload
resize Manually trigger resize -
clear Clear chart -

BarChartPlus / HorChartPlus / LineChartPlus Specific Props

Prop Description Type Default
seriesData Series data [{ name, data }] Array Required
xAxisData X-axis category data Array Required
colorStart Gradient start / default palette Array See code
colorEnd Gradient end Array []
colorCenter Gradient middle Array []
textColor Axis text color String '#7D7D7D'
label Whether to show labels Boolean false
minSpan dataZoom minimum span ratio String / Number 100
x_rotate X-axis label rotation angle String / Number 0
y_name Y-axis name String ''
y_axisLine Whether to show Y-axis axis line Boolean false
y_splitLine Whether to show Y-axis split line Boolean false
y_type Y-axis type String 'value'

BarChartPlus / HorChartPlus Specific Props

Prop Description Type Default
borderRadius Bar border radius Boolean false
barWidth Bar width String / Number 16

LineChartPlus Specific Props

Prop Description Type Default
smooth Smooth curve Boolean false
step Step line Boolean false
symbol Vertex shape String 'emptyCircle'
symbolSize Vertex size String / Number 4

PieChartPlus Specific Props

Prop Description Type Default
seriesData Pie chart data [{ name, value }] Array Required
color Color palette Array See code
radius Radius ['inner', 'outer'] Array ['0%', '75%']
center_x Center X String '50%'
center_y Center Y String '50%'
legend Legend configuration Object See code
label Whether to show labels Boolean false
borderWidth Sector spacing String / Number 0
roseType Nightingale type String null

PieChartPlus Slots

Slot Name Description
default Center content; component only handles positioning

MapMarkerListView

Prop Description Type Default
markerList Marker list [{ id, position, title, icon, label }] Array []
mapConfig Map configuration; will be merged with default config Object {}
defaultIcon Default icon URL String Amap default icon
label Whether to show label text (default: icon only) Boolean false

MapMarkerListView Events

Event Name Description Callback Parameters
map-init Map initialization completed Map instance
marker-click Marker clicked Current marker data

MapPointPickerDialog

Prop Description Type Default
visible Whether to show (supports .sync) Boolean false
mode Mode: add / edit / detail String 'add'
inPoint Passed point { lng, lat, address } Object {}
searchType Search method: searchBox / custom String 'searchBox'
mapConfig Map configuration Object {}

MapPointPickerDialog Events

Event Name Description Callback Parameters
update:visible Dialog visibility change Boolean
confirm Confirm point selection { lng, lat, address }

InputPlus

Prop Description Type Default
value / v-model Bound value String / Number ''
type Input type String 'text'
acceptMinus Whether negative numbers are allowed (valid for number) Boolean true
decimalLimit Decimal places limit (valid for number) Number / String null
placeholder Placeholder String '请输入'
maxlength Maximum length (passed via attrs) String / Number -

InputPlus Events

Event Name Description Callback Parameters
input Value change (triggered immediately during input, and again on blur with formatted value) Current value
blur Blur FocusEvent

comp-wrap

一套精心打磨的 Vue 2 常用组件库——针对原生组件与图表库的痛点做了封装，让你专注业务、少写重复轮子。

纯组件库：本包不含工具方法、增强存储与样式系统。若同时需要工具与样式，请搭配 comp-wrap-kit 使用。

为什么选 comp-wrap

  • 📊 图表组件（ECharts）：柱状 / 横向 / 折线 / 饼图全部数据驱动——增删系列、改长度、推新点，组件自动重渲染，你不用再碰一行 setOption。告别「多一个数据项，写死的配置就崩了」。
  • 🥧 饼图 / 圆环圆心：统一的圆心内容方案——组件只把你的插槽定位到 center_x / center_y 且不传数据，展示什么由你说了算（合计、占比、文字）。不用再为「圆心内容怎么摆」手写绝对定位、一挪中心就错位。
  • 🗺️ 地图组件（高德）：标记列表视图、点位选择弹框，接好数据、监听事件即可用。
  • ✏️ InputPlus：修复原生 <input> 的各种坑——maxlength 真正生效，并内置数值处理（正负号开关、小数位限制），粘贴的特殊 / 异常输入也不会污染你的数据。
  • 📦 零样式配置：组件样式已内联进 JS 产物（css.extract: false），Vue.use() 即用。

安装与快速上手

npm install comp-wrap

import compWrap from 'comp-wrap'
// 无需单独引入 CSS：组件样式已内联进 JS 产物（构建配置 css.extract: false）

Vue.use(compWrap)

组件列表

  1. BarChartPlus — 增强型柱状图，配置丰富、交互完善。
  2. HorChartPlus — 增强型横向柱状图，适合数据横向展示。
  3. LineChartPlus — 增强型折线图，支持动态数据与自定义样式。
  4. PieChartPlus — 增强型饼图 / 环形图，支持占比展示与插槽式圆心内容。
  5. MapMarkerListView — 高德地图标记列表视图，展示点位信息。
  6. MapPointPickerDialog — 地图点位选择弹框，用于坐标选取。
  7. InputPlus — 增强型输入框，修复原生缺陷（如 maxlength 失效）。

组件使用示例

1. BarChartPlus 柱状图组件

基础用法
<bar-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></bar-chart-plus>
全量配置
<bar-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="400px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></bar-chart-plus>

2. HorChartPlus 横向图表组件

基础用法
<hor-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></hor-chart-plus>
全量配置
<hor-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="300px" 
  height="400px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="30" 
  minSpan="50" 
  x_rotate="45" 
  x_axisLine 
  x_splitLine 
  y_name="金额" 
  y_type="value"
></hor-chart-plus>

3. LineChartPlus 折线图组件

基础用法
<line-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]"
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
></line-chart-plus>
全量配置
<line-chart-plus 
  :seriesData="[{ name: '销量', data: [120, 200, 150, 80, 70] }, { name: '利润', data: [60, 90, 70, 40, 30] }]" 
  :xAxisData="['一月', '二月', '三月', '四月', '五月']"
  width="600px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  smooth 
  step 
  symbol="emptyCircle" 
  symbolSize="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></line-chart-plus>

4. PieChartPlus 饼图组件

圆心内容通过普通插槽自定义：组件只负责把内容定位到饼图圆心（center_x/center_y），不向插槽传递任何数据，要显示什么、怎么算，完全由业务方自行处理后再传进来。

基础用法（实心饼，无圆心内容）
<pie-chart-plus 
  :seriesData="[{ name: '直接访问', value: 335 }, { name: '搜索引擎', value: 310 }, { name: '邮件营销', value: 234 }]"
></pie-chart-plus>
环形 + 圆心插槽（业务方自行准备内容并传入）
<pie-chart-plus 
  :seriesData="[{ name: '直接访问', value: 335 }, { name: '搜索引擎', value: 310 }, { name: '邮件营销', value: 234 }]" 
  width="400" 
  height="400" 
  theme="light" 
  :color="['#f00', '#0f0', '#00f']" 
  :radius="['45%', '70%']" 
  center_x="50%" 
  center_y="50%" 
  :legend="{ orient: 'horizontal', bottom: '2%', left: 'center' }" 
  label 
  borderWidth="2" 
  roseType="radius"
>
  <!-- 业务方自己算好的值，直接写进插槽里的 div -->
  <div class="ring-center">
    <span class="ring-center__label">统计量</span>
    <span class="ring-center__value">{{ total }}</span>
  </div>
</pie-chart-plus>

/* 业务方自行处理成圆形 div */
.ring-center {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(238, 102, 102, 0.08);
  border: 2px solid rgba(238, 102, 102, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
说明
  • radius 默认 ['0%', '75%'] 为实心饼；圆心插槽建议配合环形（如 ['45%', '70%']）使用，否则内容会盖在饼上。
  • 圆心插槽层默认 pointer-events: none，不拦截饼图的 hover/点击；若插槽内容需要交互，给内部元素单独设置 pointer-events: auto 即可。
  • 圆心内容始终跟随 center_x/center_y，改动圆心位置不会错位。
  • 组件不向插槽传递数据，业务方自行计算要显示的内容后传入即可。

5. MapMarkerListView 地图标记列表组件

<template>
  <div class="map-demo">
    <map-marker-list-view 
      :markerList="markerList"
      :mapConfig="mapConfig"
      @marker-click="handleMarkerClick">
    </map-marker-list-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapConfig: {
        zoom: 12,
        center: [116.397428, 39.90923]
      },
      markerList: [
        { id: 1, position: [116.397428, 39.90923], title: '天安门', icon: '/marker1.png' },
        { id: 2, position: [116.405285, 39.904989], title: '北京站前' },
        { id: 3, position: [116.443709, 39.914167], title: '东直门' }
      ]
    }
  },
  methods: {
    handleMarkerClick(item) {
      console.log('点击标记：', item)
    }
  }
}
</script>

6. MapPointPickerDialog 地图点选择对话框组件

<template>
  <div>
    <el-button @click="visible = true">选择地点</el-button>
    <map-point-picker-dialog 
      :visible.sync="visible" 
      mode="point" 
      :in-point="currentPoint" 
      @confirm="handlePointMapConfirm">
    </map-point-picker-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      currentPoint: null
    }
  },
  methods: {
    handlePointMapConfirm(point) {
      console.log('选中的地点坐标：', point)
      // point: { lng, lat, address }
    }
  }
}
</script>

7. InputPlus 增强型输入框组件

<template>
  <div>
    <!-- 基础用法 -->
    <input-plus
      v-model="form.name"
      placeholder="请输入姓名"
      maxlength="20"
    ></input-plus>

    <!-- 金额输入（禁止负数 + 2 位小数） -->
    <input-plus
      v-model="form.price"
      type="number"
      :accept-minus="false"
      :decimal-limit="2"
      placeholder="请输入金额"
    ></input-plus>

    <!-- 支持负数 -->
    <input-plus
      v-model="form.temperature"
      type="number"
      :accept-minus="true"
      :decimal-limit="1"
      placeholder="温度"
    ></input-plus>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        price: '',
        temperature: ''
      }
    }
  }
}
</script>

API 文档

公共图表属性（BarChartPlus / HorChartPlus / LineChartPlus / PieChartPlus）

属性 说明 类型 默认值
width 图表宽度 String / Number '100%'
height 图表高度 String / Number '300px'
theme 主题 String 'light'
loading 是否显示加载动画 Boolean false
emptyText 空数据提示文案 String '暂无数据'
error 错误状态，可传文案 Boolean / String false
notMerge setOption 是否不合并 Boolean false
lazyUpdate setOption 是否延迟更新 Boolean false

公共图表方法（通过 ref 调用）

方法 说明 参数
getInstance 获取 ECharts 实例 -
getDataURL 导出图片 opts
dispatchAction 触发 ECharts 动作 payload
resize 手动触发 resize -
clear 清空图表 -

BarChartPlus / HorChartPlus / LineChartPlus 专有属性

属性 说明 类型 默认值
seriesData 系列数据 [{ name, data }] Array 必填
xAxisData X 轴类目数据 Array 必填
colorStart 渐变色开始 / 默认调色盘 Array 见代码
colorEnd 渐变色结束 Array []
colorCenter 渐变色中段 Array []
textColor 坐标轴文字颜色 String '#7D7D7D'
label 是否显示标签 Boolean false
minSpan dataZoom 最小缩放比例 String / Number 100
x_rotate X 轴标签旋转角度 String / Number 0
y_name Y 轴名称 String ''
y_axisLine 是否显示 Y 轴轴线 Boolean false
y_splitLine 是否显示 Y 轴分割线 Boolean false
y_type Y 轴类型 String 'value'

BarChartPlus / HorChartPlus 专有属性

属性 说明 类型 默认值
borderRadius 柱子圆角 Boolean false
barWidth 柱子宽度 String / Number 16

LineChartPlus 专有属性

属性 说明 类型 默认值
smooth 平滑曲线 Boolean false
step 阶梯线 Boolean false
symbol 顶点形状 String 'emptyCircle'
symbolSize 顶点大小 String / Number 4

PieChartPlus 专有属性

属性 说明 类型 默认值
seriesData 饼图数据 [{ name, value }] Array 必填
color 调色盘 Array 见代码
radius 半径 ['内', '外'] Array ['0%', '75%']
center_x 圆心 X String '50%'
center_y 圆心 Y String '50%'
legend 图例配置 Object 见代码
label 是否显示标签 Boolean false
borderWidth 扇区间隔 String / Number 0
roseType 南丁格尔类型 String null

PieChartPlus 插槽

插槽名 说明
default 圆心内容，组件仅负责定位

MapMarkerListView

属性 说明 类型 默认值
markerList 标记点列表 [{ id, position, title, icon, label }] Array []
mapConfig 地图配置，会合并默认配置 Object {}
defaultIcon 默认图标地址 String 高德默认图标
label 是否显示标签文字（默认只显示图标） Boolean false

MapMarkerListView 事件

事件名 说明 回调参数
map-init 地图初始化完成 map 实例
marker-click 点击标记点 当前标记点数据

MapPointPickerDialog

属性 说明 类型 默认值
visible 是否显示（支持 .sync） Boolean false
mode 模式：add / edit / detail String 'add'
inPoint 传入点位 { lng, lat, address } Object {}
searchType 搜索方式：searchBox / custom String 'searchBox'
mapConfig 地图配置 Object {}

MapPointPickerDialog 事件

事件名 说明 回调参数
update:visible 弹框显隐变化 Boolean
confirm 确认选点 { lng, lat, address }

InputPlus

属性 说明 类型 默认值
value / v-model 绑定值 String / Number ''
type 输入类型 String 'text'
acceptMinus 是否允许负数（number 有效） Boolean true
decimalLimit 小数位数限制（number 有效） Number / String null
placeholder 占位符 String '请输入'
maxlength 最大长度（通过 attrs 传入） String / Number -

InputPlus 事件

事件名 说明 回调参数
input 值变化（输入过程即时触发，blur 时再次触发格式化后值） 当前值
blur 失焦 FocusEvent

Related Packages

vue-echarts-generator

generate dynamic charts page by GUI

1,345
echarts element-ui vue generator
cms-fronted-ui

封装自定义常用组件

8,864
echarts element-ui vue animate.css axios vxe-table
cms-finance-ui

封装自定义常用组件

2,616
echarts element-ui vue animate.css axios vxe-table
irdd

vue组件深度封装和方法库

1,605 2
element-ui
v-charts

Vue Echarts Components

152,118 6,746
echarts vue

Version History

Version Released Vue License
3.4.3 >=2.6.0 <3.0.0 MIT
3.4.2 >=2.6.0 <3.0.0 MIT
3.4.1 >=2.6.0 <3.0.0 MIT
3.4.0 >=2.6.0 <3.0.0 MIT
3.3.0 >=2.6.0 <3.0.0 MIT