跳到主要内容

自定义图表组件

柱状图​

引用方式​
import Bar from '/@/components/chart/Bar.vue';
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​
[
    {
        "name": "1月",
        "value": 320
    },
    {
        "name": "2月",
        "value": 457
    },
    {
        "name": "3月",
        "value": 182
    }
]
代码示例​
<template>
     <Bar :chartData="chartData"></Bar>
</template>

<script lang="ts" setup>
    import Bar from '/@/components/chart/Bar.vue';
    const chartData = [
         {
             "name": "1月",
             "value": 320
         },
         {
             "name": "2月",
             "value": 457
         },
         {
             "name": "3月",
             "value": 182
         }
     ]
</script>

<style></style>

多列柱状图​

引用方式​
import BarMulti from '/@/components/chart/BarMulti.vue';
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​
[
     {
         "name": "1月",
         "value": 320,
         "type": "2021"
     },
     {
         "name": "2月",
         "value": 457,
         "type": "2021"
     },
     {
         "name": "3月",
         "value": 182,
         "type": "2021"
     },
     {
          "name": "1月",
          "value": 240,
          "type": "2022"
      },
      {
          "name": "2月",
          "value": 357,
          "type": "2022"
      },
      {
          "name": "3月",
          "value": 456,
          "type": "2022"
      }
 ]

迷你柱状图​

同柱形图，修改配置即可

面积图​

引用方式​
import Line from '/@/components/chart/Line.vue';
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​
[
    {
     "name": "1月",
     "value": 320
     },
    {
     "name": "2月",
     "value": 457
    },
    {
     "name": "3月",
     "value": 182
    }
]

多行折线图​

引用方式​
import LineMulti from '/@/components/chart/LineMulti.vue';
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​

同柱形图

饼状图​

引用方式​
import Pie from '/@/components/chart/Pie'
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​
[
    { "name": "一月", "value": 40 },
    { "name": "二月", "value": 21 },
    { "name": "三月", "value": 17 },
    { "name": "四月", "value": 13 },
    { "name": "五月", "value": 9 }
]

雷达图​

引用方式​
import Radar from '/@/components/chart/Radar'
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
widthnumber图表宽度
heightnumber图表高度
optionobject配置项
chartData 示例​
[
{ value: 75, name: '政治',type:'文综',max:100 },
{ value: 65, name: '历史',type:'文综',max:100 },
{ value: 55, name: '地理',type:'文综',max:100 },
{ value: 74, name: '化学',type:'文综',max:100 },
{ value: 38, name: '物理',type:'文综',max:100 },
{ value: 88, name: '生物',type:'文综',max:100 },
]

仪表盘​

引用方式​
import Gauge from '/@/components/chart/Gauge'
参数列表​
参数名类型必填说明
chartDataarray✔️图表数据源
optionobject图表的配置项
widthstring图表宽度
heightstring图表高度
chartData 示例​
{
name:'出勤率',
value:70
}

排名列表​

引用方式​
import RankList from '@/components/chart/RankList'
参数列表​
参数名类型必填说明
titlestring图表标题
listarray排名列表数据
heightnumber图表高度，默认自适应高度
list 示例​
[
    { "name": "北京朝阳 1 号店", "total": 1981 },
    { "name": "北京朝阳 2 号店", "total": 1359 },
    { "name": "北京朝阳 3 号店", "total": 1354 },
    { "name": "北京朝阳 4 号店", "total": 263 },
    { "name": "北京朝阳 5 号店", "total": 446 },
    { "name": "北京朝阳 6 号店", "total": 796 }
]