tag-echart v0.1.0

VueTagEcharts

可插入自定义标签的 echarts

安装

$ npm install vue-tag-echarts -S

使用

在 main.js 文件中引入插件并注册

# main.js
import VueTagEcharts from 'vue-tag-echarts'
import 'vue-tag-echarts/lib/vue-tag-echarts.css'
Vue.use(VueTagEcharts)

在项目中用使用 VueTagEcharts

<template>
  <vue-echarts v-model="text" />
</template>
<script>
  export default {
    data () {
      return {
        text: 'demo'
      }
    }
  }
</script>

注意：标签为 <vue-echarts>

特点

1. 可以插入自定义的标签，默认为 <wise>
2. 基于自定义标签，可以满足模版文案的需求

参数

自定义 tag 的时候，需要添加该标签的样式

事件

Add 事件详解

工具栏可以通过 tools 参数进行配置，tools 的元素是一个包含 type 和 text 的对象，其中 text 为工具栏按钮的文字。
当点击工具栏按钮的时候，触发 add 事件，接收一个 type 参数，该参数为 tools 中定义的 type 属性值。
具体的交互逻辑需要自行开发，最后需要通过 $refs 调用 VueTagEcharts 内部的 addLink() 或者 addTag() 方法，完成添加标签。
当调用 addTag() 的时候，需要传入一个 text 参数，值为标签的文本内容。
当调用 addLink() 的时候，需要传入 url 和 text，其中 url 为超链接地址，text 为超链接文本。
VueTagEcharts 最终返回的值是一个 innerHTML。