First ECharts chart

ECharts is a highly customized data visualization chart library developed by Baidu team. Its underlying layer relies on the lightweight Canvas class library ZRender, which is a pure JavaScript icon library, compatible with (IE8/9/10/11, Chrome, Firefox, Safari, etc.) mainstream browsers, and can run on PC and mobile devices.

1.ECharts official website

http://echarts.baidu.com/index.html

Click on any chart

It can be seen from the example that there are many chart types available for data display on the official website, which helps us generate most of the data.
Take the line chart as an example.

2.echarts.js file

Download path: http://echarts.baidu.com/download.html

Click the type you want to download and it will be downloaded automatically. As a development, I use the source code.
Put the next good js file into the project

3. Background data return


In the controller layer, I return six lists < string > for data display

4. front end

1. Reference the echart.js file in the html page

2. Prepare a div in the body to receive the line graph

<div id="sell_data" style="height:400px"></div>

3.js file

//Order statistics line chart
$(function() {

    var toPayList;
    var toconfirm;
    var done;
    var payexpired;
    var refunded;
    var datetime;

    $.ajax({
        type:"post",
        url:prefix+"/chart",
        async:false,
        success:function(d){
            //Get background data
            toPayList=d.toPayList
            datetime=d.datetime
            toconfirm=d.toconfirm
            done=d.done
            payexpired=d.payexpired
            refunded=d.refunded
        }
    });

    var option = {
        title: {
            text: 'Line chart stacking'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['To be paid', 'To be confirmed', 'Completed', 'Expired', 'Refunded']//Line name
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:datetime
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: 'To be paid',
                type: 'line',
                stack: 'total',
                data: toPayList
            },
            {
                name: 'To be confirmed',
                type: 'line',
                stack: 'total',
                data: toconfirm
            },
            {
                name: 'Completed',
                type: 'line',
                stack: 'total',
                data: done
            },
            {
                name: 'Expired',
                type: 'line',
                stack: 'total',
                data: payexpired
            },
            {
                name: 'Refunded',
                type: 'line',
                stack: 'total',
                data: refunded
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('sell_data'));

    myChart.setOption(option);

});

5. Effect display

6. Error checking

1. Is the echarts.js file referenced successfully in HTML, and is the path written correctly?
2. Is the background data in the form of json or array?

Tags: Javascript Firefox Mobile JSON

Posted on Sun, 05 Jan 2020 20:59:44 -0800 by inosent1