echarts 配置檔案詳解

    本人新手，最近在研究echarts折線圖時，發現了echart2.0版本和3.0版本中有很多屬性改變了，配置echarts時就得按最新版本來配置下面是配置的一些需要注意的地方。

1、js中chart的配置資訊：

var chart= {
    title: {          //标題，每個圖表最多僅有一個标題控件
        text: title,  //主标題文本，
        x: 'center',  //水準安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x坐标，機關px）
        textStyle: {  //主标題文本樣式
            fontSize: 15
        }
    },
    lineStyle: {      //echart主配置中沒有這個屬性，而且改變width沒有變化
        width: 1
    },
    legend: {         //圖例，每個圖表最多僅有一個圖例，混搭圖表共享，同溫濕度傳感器右側的圖例相同，點選時資料隐藏
        show: false,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        data: [location]
    },
    toolbox: {    //則線圖右上角的工具箱
        show: true,  //是否顯示工具箱

        feature: {   //工具箱标志
            mark: {show: true},  //輔助線标志；3.0版本取消該屬性
            dataZoom: {  //框選區域縮放
                show: true,
                iconStyle: {  //3.0版本新出屬性，用于修改icon樣式，也可進行自定義操作
                    normal: {
                        borderColor: "green"
                    }
                }
            },
            dataView: {show: false,  //資料視圖
                readOnly: true,
                iconStyle: {  //設定icon樣式
                    normal: {
                        borderColor: "yellow"
                    }
                }
            },
            magicType: {show: false, type: ['line', 'bar']}, //動态類型切換，特别重要，多圖切換，支援直角系下的折線圖、柱狀圖、
            // 堆積、平鋪轉換，上圖icon左數6~14，分别是切換為堆積，切換為平鋪，
            // 切換折線圖，切換柱形圖，切換為力導向布局圖，切換為和弦圖，切換為餅圖，切換為漏鬥圖

            restore: {show: true,  //還原，複位原始圖表
                iconStyle: {
                    normal: {borderColor: "blue"}
                }
            },
            saveAsImage: {show: true,
                iconStyle: {
                    normal: {borderColor: "#cf0109"}
                }

            } //儲存圖檔（IE8-不支援）
        }
    },
    grid: {  //直角坐标系内繪圖網格
        x: 60,  //直角坐标系内繪圖網格左上角橫坐标，數值機關px，支援百分比（字元串），如'50%'(顯示區域橫向中心)
        y: 30,  //直角坐标系内繪圖網格左上角縱坐标，數值機關px，支援百分比（字元串），如'50%'(顯示區域縱向中心)
        x2: 30, //直角坐标系内繪圖網格右下角橫坐标，數值機關px，支援百分比（字元串），如'50%'(顯示區域橫向中心)
        y2: 40  //直角坐标系内繪圖網格右下角橫坐标，數值機關px，支援百分比（字元串），如'50%'(顯示區域橫向中心)
    },
    calculable: true, //是否啟用拖拽重計算特性。這個也沒有實作，看看後面代碼是否有覆寫

    tooltip: {    //提示框，滑鼠懸浮互動時的資訊提示*******************************************************************************************************
        show: true,
        trigger: 'item'  //觸發類型，預設資料觸發，可選為：'item' | 'axis'
    },
    dataZoom: [{  //3.0版本dataZoom中可選兩種type，inside為滑鼠滑輪滾動縮放，slider為圖表下方滾動條縮放。
        type:'slider',//資料區域縮放,資料展現範圍選擇
        show: true,
        realtime: true,  //縮放變化是否實時顯示，在不支援Canvas的浏覽器中該值自動強制置為false。
        height: 20,
        backgroundColor: 'rgba(12,0,0,0)'//背景顔色，預設透明
    },{type:'inside'}],
    xAxis: [
        {
            type: 'value', //坐标軸類型，橫軸預設為類目型'category'，縱軸預設為數值型'value'
            max: xmax,     //指定的最大值，eg: 100，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[1]
            min: xmin,     //指定的最小值，eg: 0，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[0]
            scale: xscale, //脫離0值比例，放大聚焦到最終_min，_max區間
            axisLabel: {   //坐标軸文本标簽
                formatter: function (value) { //間隔名稱格式器
                    var v = value.toString().length > 8 ? (value.toFixed(6)) : value;
                    return v + xunit;    //{value}s;橫坐标的間隔距離 10s，20s
                },
                textStyle: {  //文本樣式，其中當坐标軸為數值型和時間型時，color接受方法回調，實作個性化的顔色定義，support #226 ?
                    align: 'right',
                    fontSize: 10
                }
            }
        }
    ],
    yAxis: [
        {
            name: '幅值(' + unit + ')',  //y軸名稱
            type: 'value',               //坐标軸類型，橫軸預設為類目型'category'，縱軸預設為數值型'value'
            max: ymax,                  //指定的最大值，eg: 100，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[1]
            min: ymin,                  //指定的最小值，eg: 100，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[1]
            scale: yscale,              //脫離0值比例，放大聚焦到最終_min，_max區間
            boundaryGap: [0.1, 0.1],    //坐标軸兩端空白政策，數組内數值代表百分比，[原始資料最小值與最終最小值之間的差額，原始資料最大值與最終最大值之間的差額]
            axisLabel: {                //坐标軸文本标簽
                formatter: '{value}',   //間隔名稱格式器
                textStyle: {            //文本樣式，其中當坐标軸為數值型和時間型時，color接受方法回調，實作個性化的顔色定義，support #226 ?
                    fontSize: 8
                }
            }
        }
    ]
};       
//給chart中賦series值
chart.series.push({
    name: location, //系列名稱，如啟用legend，該值将被legend.data索引相關
    type: 'line',   //展示類型
    data: array,    //展示資料（資料從資料庫中提取出來時，需要封裝成array）
    symbolSize: 1, //标志圖形大小，如果設定為0時，tooltip工具将無法擷取資料焦點，無法顯示提示框。
    
});       
//提示框文本資訊間隔格式器（params為選取的那個點）
chart.tooltip.formatter = function (params) {

    //得到xstr=時間：2017-11-01 10:30
    var xstr = typeof (params.value[0]) == "undefined" ? params.name : '時間：' + params.value[0] + 's';
    //得到ystr=幅值：2.354cm/ss
    var ystr = typeof (params.value[1]) == "undefined" ? params.value.toFixed(6) : params.value[1].toFixed(6);
    return xstr + '<br/>' + '幅值：' + ystr + rtUnit;
}      
    
//初始化一個 ECharts 執行個體,傳回 echartsInstance。傳入兩個參數dom： 執行個體容器，一般是一個具有高寬的div元素。
//theme：應用的主題。可以是一個主題的配置對象，也可以是使用已經通過 echarts.registerTheme 注冊的主題名稱。
//theme_blue中配置了模闆，
var globalChartOri = echarts.init(document.getElementById('comm_ori' + index), theme_blue);

//設定圖表執行個體的配置項以及資料，萬能接口，所有參數和資料的修改都可以通過setOption完成，ECharts 會合并新的參數和資料，
// 然後重新整理圖表。如果開啟動畫的話，ECharts 找到兩組資料之間的差異然後通過合适的動畫去表現資料的變化。
globalChartOri[i].setOption(chart);      
   
   
   

2、展示效果

第一次寫部落格，内容不算詳盡，希望能給想我一樣的新手有所幫助!!!!!!