@cosmictags/ui-vue

安装依赖

npm install @cosmictags/vue

用法

// 引入组件
import { ChatBi, CosmicBi, CodePanel } from '@cosmictags/vue'
// 引入样式
import '@cosmictags/vue/dist/index.css'

<template>
  <ChatBi :content="chatBiContent"/>
</template>

<script>
import { ChatBi } from '@cosmictags/vue'
// 三个实例数据
const bi =
  '<cosmic-bi title="bi-title">{"chartType":"table","fields":[{"type":"date","alias":"年份","role":"dimension","format":{"dateFormat": "yyyy*MM*dd"}},{"type":"float","alias":"GDP总额","role":"measure","format":{"precision":2,"precisionType":"round","separator":"#,##","prefix":"￥","suffix":"元","pow":"auto"}}],"rows":[["2005-01-01","0.115"],["2005-02-01","0.08900000000000001"]]}</cosmic-bi>'
const bi6 =
  '<cosmic-bi title="bi-title">{"chartType":"table","fields":[{"type":"date","alias":"年份","role":"dimension"},{"type":"float","alias":"GDP总额","role":"measure","format":{"precision":2,"precisionType":"round","separator":"#,##","prefix":"￥","suffix":"元","pow":"auto"}}],"rows":[["2005-01-01","0.115"],["2005-02-01","0.1"],["2005-02-02","0.09"],["2005-02-03","0.12"],["2005-02-04","0.13"],["2005-02-05","0.14"],["2005-02-06","0.08900000000000001"],["2005-02-07","0.08900000000000001"]]}</cosmic-bi>'
const bi16 =
  '<cosmic-bi title="bi-title">{"chartType":"table","fields":[{"type":"date","alias":"年份","role":"dimension"},{"type":"float","alias":"GDP总额","role":"measure","format":{"precision":2,"precisionType":"round","separator":"#,##","prefix":"￥","suffix":"元","pow":"auto"}}],"rows":[["2005-01-01","0.115"],["2005-02-01","0.08900000000000001"],["2005-02-02","0.08900000000000001"],["2005-02-03","0.08900000000000001"],["2005-02-04","0.08900000000000001"],["2005-02-05","0.08900000000000001"],["2005-02-06","0.08900000000000001"],["2005-02-07","0.08900000000000001"],["2005-02-08","0.08900000000000001"],["2005-02-09","0.08900000000000001"],["2005-02-10","0.08900000000000001"],["2005-02-11","0.08900000000000001"],["2005-02-12","0.08900000000000001"],["2005-02-13","0.08900000000000001"],["2005-02-14","0.08900000000000001"],["2005-02-15","0.08900000000000001"]]}</cosmic-bi>'

export default {
  name: 'example',
  components: {
    ChatBi
  },
  data(){
    return {
      chatBiContent: bi6
    }
  }
}
</script>