Echarts折线图的实例

使用eharts图表一共三步。第一步是创建两个js文件。一个用来设置图表格式，一个用来使用ajax渲染数据。

第一步，创建设置图表格式的js文件

/*设置格式*/
var configuration_option = {
    tooltip: {
         formatter:'{a0}: {c0}'+'个病毒'
    },
    color: [],
    legend: {
        x: 'right',
        data: []
    },
    toolbox: {
        show: false
    },
    /*设置图表与div容器的间距*/
    grid: {
        x: 10,
        y: 25,
        x2: 28,
        y2: 40,
        borderWidth: 1
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {

                interval: 0,//横轴信息全部显示
                rotate: -30,//-30度角倾斜显示
                textStyle:{
                    fontSize:'10'    //x轴字体大小
                }
            }
        }],
    yAxis: [
        {
            show: false,
            type: 'value'// Y轴的定义
        }
    ],
    series: [{
        name: '',
        type: 'line',
        label: {normal: {
               show: true
           }},
        data: [],
        showAllSymbol: true,

    }]
}

第二步，创建渲染数据的js文件：

/*ajax数据渲染*/

var oLoading = true;
var treatTrend_option;
window.onresize = function () {
    treatTrend_option.resize();  //图表自适应大小
}

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

    if (oLoading) {

        treatTrend_option.showLoading({
            text: '正在加载数据中...',
            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异步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);
                        //遍历获取x轴日期数据
                        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; //标签赋值
                        configuration_option.xAxis[0].data = date_arr;  //**X轴赋值 因为折线图能设置上下两个x轴，所以用configuration_option.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'
    }
});
// 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
    [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/line',
        'echarts/chart/map',
        'echarts/chart/pie'
    ],
    index_ajax_option
);

第三步，在html文件中创建一个div来盛放图表。

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

特别注意：很多人前两个的js文件的写的没问题，也创建了一个容器盛放图表，但是图表就是出现不了，一般情况下，是因为你的容器，比如说上面的那个div，需要设置它的height图表才能出现。