xl-chart

install

npm install xl-chart --save-dev

import

import xlChart  from "xl-chart"

use

Normal

const data = Array.from(Array(6).keys()).map((item)=>{
    return {
        num1:Math.floor(Math.random()*1000+1),
        num2:Math.floor(Math.random()*1000+1),
        record:"维度"+(item+1)
    };
});
new xlChart.Normal(
    dom,
    {
        data,
        dataField: ["num1", "num2"],
        recordField: "record",
        seriesField: {
            num1: {
                name: "我是数据1",
                type: "line",
                color: "#6BEDD1",
            },
            num2: {
                name: "我是数据2",
                type: "bar",
                color: "#00C49A"
            }
        }
    }
);

StackX

const data = Array.from(Array(6).keys()).map((item)=>{
    return {
        num1:Math.floor(Math.random()*1000+1),
        num2:Math.floor(Math.random()*1000+1),
        record:"维度"+(item+1)
    };
});
new xlChart.StackX(
    dom,
    {
        data,
        dataField: ["num1", "num2"],
        recordField: "record",
        seriesField: {
            num1: {
                name: "我是数据1",
                type: "bar",
                stack:"1",
                color: "#6BEDD1",
            },
            num2: {
                name: "我是数据2",
                type: "bar",
                stack:"1",
                color: "#00C49A"
            }
        }
    }
);

StackY

const data = Array.from(Array(6).keys()).map((item)=>{
    return {
        num1:Math.floor(Math.random()*1000+1),
        num2:Math.floor(Math.random()*1000+1),
        record:"维度"+(item+1)
    };
});
new xlChart.StackY(
    dom,
    {
        data,
        dataField: ["num1", "num2"],
        recordField: "record",
        seriesField: {
            num1: {
                name: "我是数据1",
                type: "bar",
                stack:"1",
                color: "#6BEDD1",
            },
            num2: {
                name: "我是数据2",
                type: "bar",
                stack:"1",
                color: "#00C49A"
            }
        }
    }
);

BarGrey

const data = Array.from(Array(6).keys()).map((item)=>{
    return {
        num1:Math.floor(Math.random()*1000+1),
        num2:Math.floor(Math.random()*1000+1),
        record:"维度"+(item+1)
    };
});
new xlChart.BarGrey(
    dom,
    {
        data,
        dataField: ["num1", "num2"],
        recordField: "record",
        seriesField: {
            num1: {
                name: "我是数据1",
                type: "line",
                color: "#6BEDD1",
            },
            num2: {
                name: "我是数据2",
                type: "bar",
                color: "#00C49A"
            }
        }
    }
);

BarGrey

const data = Array.from(Array(6).keys()).map((item)=>{
    return {
        num1:Math.floor(Math.random()*1000+1),
        num2:Math.floor(Math.random()*1000+1),
        record:"维度"+(item+1)
    };
});
new xlChart.BarExtreme(
    dom,
    {
        data,
        dataField: ["num1", "num2"],
        recordField: "record",
        seriesField: {
            num1: {
                name: "我是数据1",
                type: "bar",
                color: "#6BEDD1",
            },
            num2: {
                name: "我是数据2",
                type: "bar",
                color: "#00C49A"
            }
        }
    }
);

BarGrey

new xlChart.Pie(
        dom,
        {
           data:{
               num1:Math.floor(Math.random()*1000+1),
               num2:Math.floor(Math.random()*1000+1),
               num3:Math.floor(Math.random()*1000+1),
           },
           dataField: ["num1", "num2", "num3"],
           seriesField: {
               num1: {
                   name: "我是数据1",
                   type: "bar",
                   color: "#6BEDD1",
               },
               num2: {
                   name: "我是数据2",
                   type: "line",
                   color: "#00C49A"
               },
               num3: {
                   name: "我是数据3",
                   type: "line",
                   color: "#FA8F67"
               }
           }
        }
);