Example of Echarts line chart

There are three steps to using the eharts chart.The first step is to create two js files.One to format the chart and one to render the data using ajax.

First step, create a js file to format the chart

/*Format*/
var configuration_option = {
    tooltip: {
         formatter:'{a0}: {c0}'+'Viruses'
    },
    color: [],
    legend: {
        x: 'right',
        data: []
    },
    toolbox: {
        show: false
    },
    /*Set the spacing between the chart and the div container*/
    grid: {
        x: 10,
        y: 25,
        x2: 28,
        y2: 40,
        borderWidth: 1
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {

                interval: 0,//Display all horizontal information
                rotate: -30,//-30 degree tilt display
                textStyle:{
                    fontSize:'10'    //x-axis font size
                }
            }
        }],
    yAxis: [
        {
            show: false,
            type: 'value'// Definition of Y-axis
        }
    ],
    series: [{
        name: '',
        type: 'line',
        label: {normal: {
               show: true
           }},
        data: [],
        showAllSymbol: true,

    }]
}

The second step is to create a js file to render the data:

/*ajax Data Rendering*/

var oLoading = true;
var treatTrend_option;
window.onresize = function () {
    treatTrend_option.resize();  //Chart Adaptive Size
}

function index_ajax_option(ec) {
    treatTrend_option = ec.init(document.getElementById('threadtrend'),"macarons");

    if (oLoading) {

        treatTrend_option.showLoading({
            text: 'Loading data...',
            effectOption: { backgroundColor: '#fff' },
            textStyle: {
                fontSize: 15,
                color: '#999'
            }
        });
    }

    getIndex("/main/threat/trend");/**/
    function getIndex(URL) {
        $.ajax({
            dataType: "json",
            type: "GET",
            url: URL,
            async: true,  //ajax Asynchronous true
            success: function (json) {
                var labels = [];
                var counts = [];
                var status = json.status;
                var treat_date = [];
                var treat_datas =[];
                var date_arr =[];
                var count_final = [];
                var Item = function(){
                    return {
                        name:'',
                        type:'line',
                        data:[]
                    }
                };
                if (status == 0) {
                    if (json.data.length != 0 &&json.dates.length != 0 ) {
                        $("#thread5").remove();
                        treat_datas = json.data;
                        treat_date = json.dates;
                        console.log(treat_datas+treat_date);
                        //Traverse to get x-axis date data
                        for (var i = 0; i < treat_date.length; i++) {
                            date_arr.push((treat_date[i])[1]);
                        }
                        /* console.log(date_arr);*/

                        for (var i = 0; i < treat_datas.length; i++) {
                            var count_new = [];
                            var count_after = [];
                            var it = new Item();

                            labels[i] = treat_datas[i].label;
                            counts[i] = treat_datas[i].data;
                            count_new = counts[i];

                            for (var j = 0; j < count_new.length; j++) {
                                count_after.push(count_new[j][1]);
                            }
                            it.name = labels[i];
                            it.data = count_after;
                            count_final.push(it);
                        }
                        /* console.log(count_final);*/

                        configuration_option.legend.data = labels; //Label assignment
                        configuration_option.xAxis[0].data = date_arr;  //**The x-axis assignment uses configuration_because the line graph can set the upper and lower x-axesOption.xAxis[0].data**

configuration_option.series = count_final;                  
treatTrend_option.setOption(configuration_option, true);
 if (oLoading) treatTrend_option.hideLoading();
       }
                }else{
                }
            },
            error:function(){ 
            }
        });
    }

}
require.config({
    paths: {
        echarts: '/static/js/chart'
    }
});
// Load echarts dynamically and start using them in callback functions, taking care to keep loading structures on demand to define graph paths
require(
    [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/line',
        'echarts/chart/map',
        'echarts/chart/pie'
    ],
    index_ajax_option
);

The third step is to create a div in the html file to hold the graph.

<div class="card-box">
      <div id="threadtrend" class="treat_loading" style="height: 351px;text-align: center"></div>                                       
</div>                     

Special note: Many people write the first two js files well and create a container holder chart, but the chart just can't appear. Usually, because your container, such as the div above, needs to set its height chart to appear.

Tags: JSON

Posted on Thu, 14 May 2020 12:25:01 -0400 by gc40