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)']],