Echarts繪圖使用經驗

摘要
1.如何查找echarts相對路徑中的數據文件(針對動態加載)；
2.他山之石可以攻玉(通過類比echarts其他代碼中的相同鍵值對的書寫，做相同字段的靜態直接替換，或者對近義詞字段直接做替換來繪圖)

1.查找echarts相對路徑中的數據文件(針對動態加載)
以 https://echarts.baidu.com/echarts2/doc/example/webkit-dep2.html 這個和絃圖爲例，右鍵"查看元素">“程序員開發工具(左上角的小箭頭)”>選中待查找字段"data/webkit-dep.json">定位到html腳本代碼"data/webkit-dep.json">“網絡”>過濾器輸入欄中輸入"data/webkit-dep.json">“刷新頁面”>通過"GET"的方式，我們就找到了相對路徑的數據，實際請求的絕對路徑：https://echarts.baidu.com/echarts2/doc/example/data/webkit-dep.json 。看到這裏，以後你就知道你要查找的所有例程，他們的數據文件的前綴都是:https://echarts.baidu.com/echarts2/doc/example/ 。

2.字段的同義詞、近義詞替換(靜態的直接改寫和數據替換)
針對靜態數據，主要的部分就是data、nodes、links、groups(==category)等幾個字段。

2.1.修改前的代碼:

option = {
    title : {
        text: 'webkit內核依賴',
        subtext: '數據來自網絡',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter : "{b}"
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {
                show: true,
                type: ['force', 'chord'],
                option: {
                    chord: {
                        minRadius : 2,
                        maxRadius : 10,
                        ribbonType: false,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    rotate: true
                                },
                                chordStyle: {
                                    opacity: 0.2
                                }
                            }
                        }
                    },
                    force: {
                        minRadius : 5,
                        maxRadius : 8,
                        itemStyle : {
                            normal : {
                                label: {
                                    show: false
                                },
                                linkStyle : {
                                    opacity : 0.5
                                }
                            }
                        }
                    }
                }
            },
            saveAsImage : {show: true}
        }
    },
    legend : {
    ######################需要修改的部分begin##############################
        data : ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other'],
    ######################需要修改的部分end##############################
        orient : 'vertical',
        x : 'left'
    },
    noDataEffect: 'none',
    series :[{
        //FIXME No data
        type: 'force',
    }],
};
$.ajax({
    url: 'data/webkit-dep.json',
    dataType: 'json',
    success: function (data) {
        option.series[0] = {
            type: 'chord',
            ribbonType: false,
            name: 'webkit-dep',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        rotate: true
                    },
                    chordStyle: {
                        opacity: 0.2
                    }
                }
            },
           ######################需要修改的部分begin##############################
            categories: data.categories,
            nodes: data.nodes,
            links: data.links,
           ######################需要修改的部分end##############################
            minRadius: 2,
            maxRadius: 10,
            gravity: 1.1,
            scaling: 1.1,
            steps: 20,
            large: true,
            useWorker: true,
            coolDown: 0.995
        };
        myChart.setOption(option);
        myChart.hideLoading();
    }
});
                    

2.2.修改後的代碼

option = {
    title : {
        text: 'webkit內核依賴',
        subtext: '數據來自網絡',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter : "{b}"
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {
                show: true,
                type: ['force', 'chord'],
                option: {
                    chord: {
                        minRadius : 2,
                        maxRadius : 10,
                        ribbonType: false,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    rotate: true
                                },
                                chordStyle: {
                                    opacity: 0.2
                                }
                            }
                        }
                    },
                    force: {
                        minRadius : 5,
                        maxRadius : 8,
                        itemStyle : {
                            normal : {
                                label: {
                                    show: false
                                },
                                linkStyle : {
                                    opacity : 0.5
                                }
                            }
                        }
                    }
                }
            },
            saveAsImage : {show: true}
        }
    },
    legend : {
     ######################需要修改的部分begin##############################
        data:['root','A', 'B'],
     ######################需要修改的部分end##############################
        orient : 'vertical',
        x : 'left'
    },
    noDataEffect: 'none',
    series :[{
        //FIXME No data
        type: 'force',
    }],
};
$.ajax({
    url: 'data/webkit-dep.json',
    dataType: 'json',
    success: function (data) {
        option.series[0] = {
            type: 'chord',
            ribbonType: false,
            name: 'webkit-dep',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        rotate: true
                    },
                    chordStyle: {
                        opacity: 0.2
                    }
                }
            },
            ######################需要修改的部分begin##############################
            categories:['root','A', 'B'],
             nodes: [
                {name:'root'},
                {name:'A'},
                {name:'B'},
                {name:'d1'},
                {name:'d2'},
                {name:'d3'},
                {name:'d4'}
              
            ],
             links: [
                {source: 'root', target: 'A', weight:1, name: '效力'},
                {source: 'root', target: 'B', weight:1, name: '效力'},
                {source: 'A', target: 'd1', weight:1, name: '效力'},
                {source: 'A', target: 'd3', weight:1, name: '效力'},
                {source: 'B', target: 'd2', weight:1, name: '效力'},
                {source: 'B', target: 'd4', weight:1, name: '效力'},
              // Ribbon Type 的和絃圖每一對節點之間必須是雙向邊
                {target: 'A', source: 'root', weight: 1},
                {target: 'B', source: 'root', weight: 1},
                {source: 'd1', target: 'A', weight:1, name: '效力'},
                {source: 'd3', target: 'A', weight:1, name: '效力'},
                {source: 'd2', target: 'B', weight:1, name: '效力'},
                {source: 'd4', target: 'B', weight:1, name: '效力'
             ],
            ######################需要修改的部分end##############################
            minRadius: 2,
            maxRadius: 10,
            gravity: 1.1,
            scaling: 1.1,
            steps: 20,
            large: true,
            useWorker: true,
            coolDown: 0.995
        };

        myChart.setOption(option);
        myChart.hideLoading();
    }
});