一款提高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' |