使用echarts做圖表展示（基礎展示demo代碼）

echarts官方給的5分鐘上手教程鏈接，可參考：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 

一、實現基礎展示三部曲

---

1、在頁面中準備一個具備高寬的 DOM 容器，用於echarts展示。

<div id="product_report" style="width: 100%;height:400px;"></div>

2、在頁面中引入echarts.min.js。

本地沒有的可以去echarts官網下載。官網提供在線定製功能，可以在線選擇需要的圖表、座標、組件等生成並下載echarts.min.js。在線定製鏈接：https://www.echartsjs.com/zh/builder.html

3、在js中初始加載時通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖

$(function () {
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('product_report'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
});

4、效果預覽

至此，基礎展示就已經實現了~

 

在我的開發場景中，需要的圖表較上述的略複雜一些，在這裏記錄一下代碼，閱讀者可自行忽略以下內容。

二、略複雜場景展示代碼

---

//整體顏色集
var colors = ['#d14a61','#5793f3', '#675bba'];

//初始加載
$(function () {
    init_chart("manufactor_report","system/report/manufactor_hitch_percent","過去10個月廠家故障與關閉率","廠家故障率","廠家故障關閉率");
    init_chart("product_report","system/report/product_hitch_percent","過去10個月產品故障與關閉率","產品故障率","產品故障關閉率");
});

//加載廠家圖表
function init_chart(id,url,title,legend1,legend2){
    var myChart = echarts.init(document.getElementById(id));

    // 顯示標題，圖例和空的座標軸
    myChart.setOption({
        title: {
            //圖表標題
            text: title
        },
        color: colors,
        tooltip: {
            formatter: function (params) {
                return params.seriesName + '<br/>' + params.marker + params.name + ':' + params.data + '%';
            }
        },
        legend: {
            data:[legend1,legend2]
        },
        xAxis: {
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: legend1,
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} %'
                }
            },{
                type: 'value',
                name: legend2,
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series: [{
            name: legend1,
            type: 'bar',
            data: []
        },{
            name: legend2,
            type: 'line',
            data: []
        }]
    });

    //顯示加載動畫
    myChart.showLoading();

    var xData=[];    //實際用來盛放X軸座標值
    var yDataLeft=[];    //實際用來盛放左側Y座標值
    var yDataRight=[];    //實際用來盛放右側Y座標值

    $.ajax({
        type : "get",
        url : ctx + url,
        dataType : "json",
        success : function(result) {
            //請求成功時執行該函數內容，result即爲服務器返回的json對象
            if (result != null) {
                //後臺返回數據格式Map<key,List<Object>>
                var occur = result["occur"];
                var close = result["close"];
                //只取前10名
                var length = occur.length > 10 ? 10 : occur.length;
                for(var i = 0 ; i < length ; i ++){
                    if(id == "manufactor_report"){
                        xData.push(occur[i].manufactor);
                        yDataLeft.push((occur[i].percent * 100).toFixed(2));
                        for(var j = 0 ; j < close.length ; j ++){
                            if(occur[i].manufactor == close[j].manufactor){
                                yDataRight.push(((close[j].percent == null ? 0.00 : close[j].percent) * 100).toFixed(2));
                            }
                        }
                    }else if(id == "product_report"){
                        xData.push(occur[i].producttypename);
                        yDataLeft.push((occur[i].percent * 100).toFixed(2));
                        for(var j = 0 ; j < close.length ; j ++){
                            if(occur[i].producttypename == close[j].producttypename){
                                yDataRight.push(((close[j].percent == null ? 0.00 : close[j].percent) * 100).toFixed(2));
                            }
                        }
                    }
                }
                //隱藏加載動畫
                myChart.hideLoading();
                //加載數據圖表
                myChart.setOption({
                    xAxis: {
                        data: xData
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: legend1,
                        data: yDataLeft
                    },{
                        // 根據名字對應到相應的系列
                        name: legend2,
                        data: yDataRight
                    }]
                });
            }else{
                //沒數據時顯示空圖表
                myChart.hideLoading();
            }
        },
        error : function(errorMsg) {
            //請求失敗時執行該函數
            alert("圖表請求數據失敗!"+errorMsg);
            myChart.hideLoading();
        }
    })
}

 

效果圖