A histogram

Reference way
import Bar from '@/components/chart/Bar'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
dataSource array ✔ ️ Report data source
height number Report height: 254 by default
The dataSource sample
[{"x": "January"."y": 320
    },
    {
        "x": "February"."y": 457
    },
    {
        "x": "March"."y": 182}]Copy the code
Code sample
<template>
    <bar title="Bar chart" :dataSource="dataSource" :height="420"/>
</template>

<script>
    import Bar from '@/components/chart/Bar'

    export default {
        name: 'ChartDemo'.components: {
            Bar
        },
        data() {
            return {
                dataSource: [{"x": "January"."y": 320
                    },
                    {
                        "x": "February"."y": 457
                    },
                    {
                        "x": "March"."y": 182}]}}}</script>

<style></style>
Copy the code

Multi-column bar chart

Reference way
import BarMultid from '@/components/chart/BarMultid'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
fields array List of primary column fields
dataSource array Report data source
height number Report height: 254 by default
Fields of sample
["Jan."."Feb."."Mar."."Apr."."May"."Jun."."Jul."."Aug."]
Copy the code
The dataSource sample
[{"type": "Jeecg"./ / column name
        "Jan.": 18.9."Feb.": 28.8."Mar.": 39.3."Apr.": 81.4."May": 47."Jun.": 20.3."Jul.": 24."Aug.": 35.6
    },
    {
        "type": "Jeebt"."Jan.": 12.4."Feb.": 23.2."Mar.": 34.5."Apr.": 99.7."May": 52.6."Jun.": 35.5."Jul.": 37.4."Aug.": 42.4}]Copy the code

Mini bar chart

Bar chart without title and data axis

Reference way
import MiniBar from '@/components/chart/MiniBar'
Copy the code
The list of parameters
Parameter names type mandatory instructions
width number Report width, default adaptive width
height number The report height is 200 by default
dataSource array Report data source
The dataSource sample
[{"x": "January"."y": 320
    },
    {
        "x": "February"."y": 457
    },
    {
        "x": "March"."y": 182}]Copy the code

Area chart

Reference way
import AreaChartTy from '@/components/chart/AreaChartTy'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
dataSource array ✔ ️ Report data source
height number Report height: 254 by default
lineSize number Line thickness, default 2
The dataSource sample
[{"x": "January"."y": 320
    },
    {
        "x": "February"."y": 457
    },
    {
        "x": "March"."y": 182}]Copy the code

Multiline line chart

Reference way
import LineChartMultid from '@/components/chart/LineChartMultid'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
fields array List of primary column fields
dataSource array Report data source
height number Report height: 254 by default
Fields of sample
["jeecg"."jeebt"]
Copy the code
The dataSource sample
[{"type": "Jan"./ / column name
        "jeecg": 7."jeebt": 3.9
    },
    { "type": "Feb"."jeecg": 6.9."jeebt": 4.2 },
    { "type": "Mar"."jeecg": 9.5."jeebt": 5.7 },
    { "type": "Apr"."jeecg": 14.5."jeebt": 8.5 },
    { "type": "May"."jeecg": 18.4."jeebt": 11.9 },
    { "type": "Jun"."jeecg": 21.5."jeebt": 15.2 },
    { "type": "Jul"."jeecg": 25.2."jeebt": 17 },
    { "type": "Aug"."jeecg": 26.5."jeebt": 16.6 },
    { "type": "Sep"."jeecg": 23.3."jeebt": 14.2 },
    { "type": "Oct"."jeecg": 18.3."jeebt": 10.3 },
    { "type": "Nov"."jeecg": 13.9."jeebt": 6.6 },
    { "type": "Dec"."jeecg": 9.6."jeebt": 4.8}]Copy the code

The pie chart

Reference way
import Pie from '@/components/chart/Pie'
Copy the code
The list of parameters
Parameter names type mandatory instructions
dataSource array Report data source
height number Report height: 254 by default
The dataSource sample
[
    // All of the percent add up to 100
    { "item": "Month"."percent": 40 },
    { "item": "February"."percent": 21 },
    { "item": "March"."percent": 17 },
    { "item": "April"."percent": 13 },
    { "item": "May"."percent": 9}]Copy the code

Radar map

Reference way
import Radar from '@/components/chart/Radar'
Copy the code
The list of parameters
Parameter names type mandatory instructions
dataSource array Report data source
height number Report height: 254 by default
The dataSource sample
[
    // score has a minimum value of 0 and a maximum value of 100
    { "item": "Month"."score": 40 },
    { "item": "February"."score": 20 },
    { "item": "March"."score": 67 },
    { "item": "April"."score": 43 },
    { "item": "May"."score": 90}]Copy the code

The progress bar

Reference way
import MiniProgress from '@/components/chart/MiniProgress'
Copy the code
The list of parameters
Parameter names type mandatory instructions
percentage number Current progress percentage, default 0, maximum 100
target number Target value, default 10
height number The height of the progress bar is 10 by default
color string Progress bar color, default #13C2C2

The dashboard

Reference way
import DashChartDemo from '@/components/chart/DashChartDemo'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
value number Current value, 6.7 by default and 9 at most
height number Report height: 254 by default

The ranking list

Reference way
import RankList from '@/components/chart/RankList'
Copy the code
The list of parameters
Parameter names type mandatory instructions
title string Report titles
list array Ranked list data
height number Report height, default adaptive height
The list of sample
[{"name": "No.1 Chaoyang Store, Beijing"."total": 1981
    },
    { "name": "No. 2 Chaoyang Store, Beijing"."total": 1359 },
    { "name": "No. 3 Chaoyang Store, Beijing"."total": 1354 },
    { "name": No.4 Chaoyang Store, Beijing."total": 263 },
    { "name": "Beijing Chaoyang Store no. 5"."total": 446 },
    { "name": "No.6 Chaoyang Store, Beijing"."total": 796}]Copy the code