story-chart

一款提高echart图表配置的工具story-chart

是开发者尽可能少量的编写echart配置项，从而达到实现图标样式的组件

安装

pnpm install story-chart
npm install story-chart

使用

全局注册

#main.js中全局注册
import storyChart from 'story-chart'
const app = createApp(App);

app.use(storyMap).mount('#app')

局部注册

# 在组件中
import {SCard} from 'story-chart'

页面中使用

<template>
  <div class="chart-main">
    <s-chart type="line" :option-data="optionData"></s-chart>
  </div>
</template>
<script setup>
const optionData = {
  color: ['#000'],
  dataset: {
    dimensions: ['product', '2015'],
    source: [
      ['1月', 1243.3],
      ['2月', 83.1],
      ['3月', 86.4],
      ['4月', 182.4],
      ['5月', 272.4],
      ['6月', 172.4]
    ]
  }
}
</script>
<style lang="less" scoped>
.chart-main{
  width:300px;
  height:400px;
}
</style>

属性

参数	说明	类型	默认值	参数范围	示例
type	图表类型，表示想要生成何种样式的图表	String,Array	line	line:折线图,bar:柱状图,pie:饼图,annular:环形图,gauge:仪表盘,liquidFill:水滴图	'line,bar' | ['line','bar']
optionData	echart配置项参考下方具体配置，只用编写少量配置即可生成echarts图表	Object
tooltipSlide	提示框是否自动滑动	Boolean	false	false:不滑动，true:滑动	false
tooltipSlideTime	提示框自动滑动时间间隔	String, Number	2000	默认2000ms	2000 | '2000'