vue 图表组件_用于制作图表的简单轻巧的Vue组件

vue 图表组件

纯Vue图表 (Pure Vue Chart)

A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies.

一个简单而轻巧的vue组件,用于制作不依赖大型图表库且不会膨胀您的依赖关系的图表。

(Example)

<pure-vue-chart
  :points="[3,5,2,5,4]"
  :width="400"
  :height="200"
/>

charts

When props are updated the graph will automatically animate to the new values.

更新道具时,图形将自动设置为新值的动画。

安装 (Install)

npm i pure-vue-chart

Import it:

导入它:

import PureVueChart from 'pure-vue-chart';

Register it in your component:

将其注册到您的组件中:

components: {
    PureVueChart,
},

用它 (Use it)

<pure-vue-chart
  :points="[3,5,2,5,4]"
  :width="400"
  :height="200"
/>

选件 (Options)

To further control the display of data, you can use simple props to manipulate the charts. Here are some examples:

为了进一步控制数据的显示,您可以使用简单的道具来操纵图表。 这里有些例子:

chart-examples

以下大多数可用道具都是不言自明的: (Most of the available props below are self-explanatory:)
:points=[1,4,5,3,4]
:show-y-axis="false"
:show-x-axis="true"
:width="400"
:height="200"
:show-values="true"
:use-month-labels="true"
:months="['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']"

附加功能: (Additional Features:)

趋势线 (Trendline)

You can add a simple linear trend line by using the following props:

您可以使用以下道具添加简单的线性趋势线:

:show-trend-line="true"
:trend-line-width="2"
trend-line-color="lightblue"

X轴标签: (X-axis labels:)

X-axis labels, by default will be from 1 - length-of-data. But you can automatically use Months by using the prop :use-month-labels="true". Or you can provide the data as an array of objects, each with a value and label like so:

X轴标签默认为1-数据长度。 但是您可以通过使用prop :use-month-labels="true"自动使用Months。 或者,您可以将数据作为对象数组提供,每个对象都有一个valuelabel如下所示:

:points=[{label: 'N', value: 41.1}, {label: 'NW', value: 1}, {label: 'W', value: 15}]

贡献 (Contributing)

我愿意接受任何问题或请求,只要它们简单,易于阅读,使用package.json中的eslint设置并遵循commitizen风格的提交格式即可。 只需在github上打开一个问题并开始讨论。 -纯文字图表问题-https://github.com/djaxho/pure-vue-chart/issues

作者或致谢 (Authors or Acknowledgments)

  • Danny Jackson

    丹尼·杰克逊

功能清单 ( List of features )

  • Simple bar charts

    简单的条形图

  • Line charts (planned)

    折线图(计划中)

  • Pie charts (planned)

    饼图(计划的)

  • Rose charts (planned)

    玫瑰图(计划的)

翻译自: https://vuejsexamples.com/a-simple-and-lightweight-vue-component-for-making-charts/

vue 图表组件

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值