[echarts-for-react] 리액트 차트 라이브러리

< series - type >

const initState = {

  chart: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line', // bar 등등
    ]},
  },
};

#line

 

#bar

 

#pie

 

chart1: {
        // xAxis: {
        //     type: 'category',
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // },
        // yAxis: {
        //     type: 'value',
        // },
        series: [{
            data: [
                {
                    name: 'Mon',
                    value: 820,
                },
                {
                    name: 'Tue',
                    value: 932,
                },
                {
                    name: 'Wed',
                    value: 901,
                },
                {
                    name: 'Thu',
                    value: 934,
                },
                {
                    name: 'Fri',
                    value: 1290,
                },
                {
                    name: 'Set',
                    value: 1330,
                },
                {
                    name: 'Sun',
                    value: 1320,
                },
            ],
            type: 'pie', // type - bar, line,
        }],
    },
};

 

#scatter

const initState = {
    chart1: {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'scatter', // type - bar, line,
        }],
    },
};

 

#effectScatter

 

#radar

const dataBJ = [
    [820, 932, 901, 934, 1290, 1330, 1320],
];

const initState = {
    chart1: {
        // xAxis: {
        //     type: 'category',
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // },
        // yAxis: {
        //     type: 'value',
        // },
        radar: {
            indicator: [
                {
                    name: 'Mon',
                    max: 1500,
                },
                {
                    name: 'Tue',
                    max: 1500,
                },
                {
                    name: 'Wed',
                    max: 1500,
                },
                {
                    name: 'Thu',
                    max: 1500,
                },
                {
                    name: 'Fri',
                    max: 1500,
                },
                {
                    name: 'Sat',
                    max: 1500,
                },
                {
                    name: 'Sun',
                    max: 1500,
                },
            ],
            shape: 'circle',
        },
        series: [{
            data: dataBJ,
            type: 'radar',
        }],
    },
};

 

#tree

const dataTree = [
    {
        name: 'root',
        children: [
            {
                name: 'Child A',
                children: [
                    {
                        name: 'Leaf C',
                    },
                    {
                        name: 'Leaf D',
                    },
                    {
                        name: 'Leaf E',
                    },
                    {
                        name: 'Leaf F',
                    },
                ],
            },
            {
                name: 'Child B',
                children: [
                    {
                        name: 'Leaf G',
                    },
                    {
                        name: 'Leaf H',
                    },
                ],
            },
            {
                name: 'Child D',
            },
            {
                name: 'Child F',
                children: [
                    {
                        name: 'Leaf J',
                    },
                    {
                        name: 'Leaf K',
                    },
                ],
            },
        ],
    },
];

const initState = {
    chart1: {
        // xAxis: {
        //     type: 'category',
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // },
        // yAxis: {
        //     type: 'value',
        // },
        series: [{
            data: dataTree,
            type: 'tree',
            label: {
                position: 'right',
            },
        }],
    },
};

 

더 자세한 문서는 아래 링크로 

출처 : echarts.apache.org/en/option.html#series-line