ES6 chart plugin zp-chart, similar to et

Add-ons

2026-07-26 04:34 4 次浏览 • 0 次下载 9.3KB

Plugin description: Written in ES6 and transpiled into ES5 using Babel. The styling is relatively simple.

zp-chart

The existing zp-chart charts include bar charts, line charts, pie charts, doughnut charts, radar charts, scatter charts, and bubble charts. The following sections briefly explain how to use each chart:

Last updated: 2019-12-23 15:29:42

Each chart requires two parameters. The first is the ID of the element where the chart will be displayed (type: str). The second contains the parameters required by the chart:

<div id="barChart"></div>
// Bar chart
new barChart("barChart", lineChartOption);

For detailed usage instructions, please read the content below:

Usage

npm init
npm install

Transpile ES6 into ES5 that browsers can understand using Babel.

1	`npm run babel`

1. Bar chart

A: Vertical bar chart

If the type parameter is not provided for a bar chart, it defaults to a vertical bar chart.

var lineChartOption = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',//line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'line',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'line',
    }]
};
// Bar chart
new barChart("barChart", lineChartOption);

B: Horizontal Bar Chart

The parameters for horizontal bar charts are the same as those for vertical bar charts. The only difference is that the type property is changed to "horizon";

1	`new` `barChart("barChartHorizon", {...lineChartOption,type:"horizon"});`

2. Line Chart

A: Line Chart Without Area Fill

The parameters for line charts are the same as those for bar charts. The only difference is the class being called.

var lineChartOption = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',//line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'line',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'line',
    }]
};
// Line chart
new lineChart("lineChart", lineChartOption);

B: Area Line Chart

For this type of line chart, change the type parameter to "area".

var lineChartOptionArea = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'area',//line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'area',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'area',
    }]
};
// Line chart with area fill color
new lineChart("lineChartArea", lineChartOptionArea);

C: Mixed Line Chart

This type of line chart supports both area-filled and regular line sections. Simply set the type of the data that requires area filling to "area", and set the type of the data that only requires a line to "line".

var lineChartOption = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',//line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'line',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'area',
    }]
};
new lineChart("lineChart", lineChartOption);

D: Annotated Line Chart

Simply add the tag property to the data, and annotations will automatically appear on the chart.

var lineChartTagOption = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'area',
        tag:'CNY'
    }]
};
// Annotations are displayed on the line
new lineChart("lineChartTag", lineChartTagOption);

3. Pie Chart & Doughnut Chart

Pie charts and doughnut charts use the same class. Clicking the corresponding color block or label highlights the selected item.

A: Pie Chart

For a pie chart, set type to "pie".

// Pie chart
var pieDatas = { 
    title: "Weekly Sales Report",
    defalutIndex:0,
    type:"pie",//pie、circle
    data: [
        { title: "Monday", num:620 },
        { title: "Tuesday", num:832 },
        { title: "Wednesday", num:800 },
        { title: "Thursday", num: 864}, 
        { title: "Friday", num:1090 },
        { title: "Saturday", num:1000 }, 
        { title: "Sunday", num:1020 },
    ] ,
    callback:function(i){
        console.log(i);
        }
    }
new pieChart("pieChart", pieDatas);

B: Doughnut Chart

For a doughnut chart, set type to "circle".

var pieDatas = { 
    title: "Weekly Sales Report",
    defalutIndex:0,
    type:"circle",//pie、circle
    data: [
        { title: "Monday", num:620 },
        { title: "Tuesday", num:832 },
        { title: "Wednesday", num:800 },
        { title: "Thursday", num: 864}, 
        { title: "Friday", num:1090 },
        { title: "Saturday", num:1000 }, 
        { title: "Sunday", num:1020 },
    ] ,
    callback:function(i){
        console.log(i);
        }
    }
new pieChart("circleChart", pieDatas);

4. Radar Chart

The radar chart automatically adds an option for displaying all items. Clicking the corresponding label displays the selected item.

var radarDatas={
    defalutIndex:0,
    title:"Hero Ability Assessment",
    axis:["Health","Defense","Crowd Control","Mobility","Damage Output","Burst Damage"],
    data:[
        {
            name:"Chang'e",
            num:[80,60,68,50,60,57]
        },
        {
            name:"Hou Yi",
            num:[70,50,50,70,90,87]
        },
        {
            name:"Cai Wenji",
            num:[100,100,70,60,30,20]
        },
        {
            name:"Zhen Ji",
            num:[70,44,33,89,64,32]
        },
        {
            name:"Zhuge Liang",
            num:[19,46,45,88,90,87]
        },
        {
            name:"Xiao Qiao",
            num:[67,69,70,80,37,45]
        },
    ]
}
new radarChart("radarChart", {...radarDatas,callback:function(i){console.log(i)}});

5. Scatter Chart

A: Scatter Chart

var scatterChartoption = {
    type: 'scatter',
    title:"Scatter Chart of Salaries by Experience in the IT Industry",
    xTag: "Year",
    xTagNum:5,
    yTag:"K",
    yTagNum:5,
    symbolSize:null,
    series:  [
        {
            name:"JAVA",
            data:[{x:5,y:13},{x:1,y:3},]
        },
        {
            name:"Python",
            data:[{x:2,y:13},{x:3,y:10},]
        },
        {
            name:"Golang",
            data:[{x:10,y:18},{x:2.5,y:8},]
        }
    ],
};
// Since there is too much data to write manually, I use a loop to calculate the series data values.
scatterChartoption.series.map((item,i)=>{
    item.data=[];
    for(let i=0;i<30;i++){
        var x=Math.random()*50;
        var y=x*(Math.random()*1.5+i*0.5);
        item.data.push({x,y})
    }
})
new scatterChart("scatterChart",scatterChartoption)

B: Bubble Chart

The parameters for bubble charts are the same as those for scatter charts. The only difference is that a z field is added to the data to represent bubble size. In addition, the type parameter is changed to "bubble".

var bubbleChartoption = {
    type: 'bubble',
    title:"Bubble Chart Showing the Relationship Between Per Capita Income and Happiness in Beijing, Shanghai, and Guangzhou Over the Past 100 Years (Fictional Data)",
    xTag: "Year",
    xTagNum:5,
    yTag:"10,000 People",
    yTagNum:5,
    symbolSize:null,
    series:  [
        {
            name:"Beijing",
            data:[
                {x:100,y:20,z:30},
                //***
                ]
        },
        {
            name:"Shanghai",
            data:[
                {x:100,y:20,z:30},
                //***
                ]
        },
        {
            name:"Guangzhou",
            data:[
                {x:100,y:20,z:30},
                //***
                ]
        }
    ],
};
// Simulated data
bubbleChartoption.series.map((item,i)=>{
    item.data=[];
    for(let i=0;i<10;i++){
        var x=Math.random()*100+1920;
        var y=Math.random()*(i+2)*(x-1920)*(x-1920)+2000;
        var z=Math.random()*90+10;
        item.data.push({x,y,z})
    }
})
new scatterChart("bubbleChart",bubbleChartoption);

Last updated: 2019-12-01 22:36:47

Although it is not as feature-rich as ECharts, it is still very practical. Most importantly, its file size is only 17 KB, and it is very easy to integrate and use. Everyone is welcome to try it.

Currently, only line charts and bar charts have been implemented. Pie charts, doughnut charts, and other chart types will be added in future updates.

var lineChartOptionArea = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'area', //line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'area',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'area',
    }]
};
var lineChartOption = {
    title: "Weekly Sales Report",
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Email Marketing',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line', //line or area
    }, {
        name: 'Affiliate Advertising',
        data: [920, 1032, 1001, 1034, 1390, 1430, 1420],
        type: 'line',
    }, {
        name: 'Video Advertising',
        data: [620, 832, 800, 864, 1090, 1000, 1020],
        type: 'line',
    }]
};
// Bar chart
new barChart("barChart", lineChartOption);
// Line chart
new lineChart("lineChart", lineChartOption);
// Line chart with area fill color
new lineChart("lineChartArea", lineChartOptionArea);