pf-vue2-wheel

开始

安装

npm install pf-vue2-wheel -S

引入

main.js文件

import pfVue2Wheel from "pf-vue2-wheel";
import "pf-vue2-wheel/dist/pf-vue2-wheel.css";
Vue.use(pfVue2Wheel);

组件使用

App.vue 文件

<templete>
  <div id="app">
    <div class="chart-box">
      <LineTime />
    </div>
  </div>
</templete>

<style>
.chart-box{
width: 500px;
height: 500px
}
<style>

注意：外层div盒子一定要给宽高

组件列表

组件名	说明
LineTime	折线图
BarStock	堆叠柱图

LineTime 组件

属性名(props参数)	说明	数据格式
series	曲线条数	array
chartData	图标数据	array
xAxisData	x轴数据	array
color	曲线颜色	array
unit	单位	string

---

//props参数配置 
series: [{ name: '使用率' },],
chartData: [[
        {
          "name": "2023-06-13 16:15:22",
          "value": 0.13411458333333334
        },
        {
          "name": "2023-06-13 16:15:23",
          "value": 0.137179487179487
        },
        {
          "name": "2023-06-13 16:15:24",
          "value": 0.15234375
        },
]],
xAxisData: [
        "2023-06-13 16:15:22",
        "2023-06-13 16:15:23",
        "2023-06-13 16:15:24",
],
color: [['rgba(253, 161, 133,1)', 'rgba(253, 161, 133,0.2)']],
unit: '%',

BarStock 组件

属性名(props参数)	说明	数据格式
series	曲线条数	array
chartData	图标数据	array
xAxisData	x轴数据	array
color	曲线颜色	array

---

//props参数配置 
series: [{ name: '已用(G)' }, { name: '剩余(G)' }],
chartData: [
        [320, 302, 301, 334, 390, 330, 320],
        [120, 132, 101, 134, 90, 230, 210]
],
xAxisData: ['C:', 'D:', 'E:', 'F:', 'G:', 'H:', 'I:'],
color: [['rgba(253, 161, 133,1)', 'rgba(253, 161, 133,0.2)']],