echarts从后台servlet获取json数据，进行图谱显示

在使用图谱时需要在界面中为图谱建立一个div未图谱安排地方，然后引入jequary等js

div

 <div id="tupu" class="tupu" style="height: 530px;" align="left"></div>

 

引入的js

<script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>

 

 

图谱代码

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('tupu'));
var res_json = {};//{"data":[{"draggable":"true","symbolSize":40,"name":"矮醋栗","id":"Y0","text":"矮醋栗:药物","category":0,"value":"矮醋栗"},{"draggable":"true","symbolSize":40,"name":"地域分布","id":"A0","text":"地域分布:虚拟节点","category":6,"value":"地域分布"},{"draggable":"true","symbolSize":40,"name":"材料原文","id":"B0","text":"材料原文:虚拟节点","category":6,"value":"材料原文"},{"draggable":"true","symbolSize":40,"name":"别名","id":"O0","text":"别名:虚拟节点","category":6,"value":"别名"},{"draggable":"true","symbolSize":40,"name":"性味归经","id":"G0","text":"性味归经:虚拟节点","category":6,"value":"性味归经"},{"draggable":"true","symbolSize":40,"name":"主治功能","id":"F0","text":"主治功能:虚拟节点","category":6,"value":"主治功能"},{"draggable":"true","symbolSize":40,"name":"四川","id":"A00","text":"四川:地理分布","category":1,"value":"四川"},{"draggable":"true","symbolSize":40,"name":"感冒发热","id":"F00","text":"感冒发热:主治功能","category":2,"value":"感冒发热"},{"draggable":"true","symbolSize":40,"name":"咳嗽。","id":"F01","text":"咳嗽。:主治功能","category":2,"value":"咳嗽。"},{"draggable":"true","symbolSize":40,"name":"肺经","id":"G00","text":"肺经:性味归经","category":2,"value":"肺经"},{"draggable":"true","symbolSize":40,"name":"膀胱经","id":"G01","text":"膀胱经:性味归经","category":2,"value":"膀胱经"},{"draggable":"true","symbolSize":40,"name":"苦味中药","id":"G02","text":"苦味中药:性味归经","category":2,"value":"苦味中药"},{"draggable":"true","symbolSize":40,"name":"黄果矮茶藨。","id":"O00","text":"黄果矮茶藨。:药材别名","category":2,"value":"黄果矮茶藨。"},{"draggable":"true","symbolSize":40,"name":"《中华本草》","id":"B01","text":"《中华本草》:药材别名","category":2,"value":"《中华本草》"}],"links":[{"source":"Y0","value":"地理分布","target":"A0"},{"source":"Y0","value":"主治功能","target":"F0"},{"source":"Y0","value":"性味归经","target":"G0"},{"source":"Y0","value":"药材别名","target":"O0"},{"source":"Y0","value":"材料原文","target":"B0"},{"source":"A0","value":"所在地域","target":"A00"},{"source":"F0","value":"主治功能","target":"F00"},{"source":"F0","value":"主治功能","target":"F01"},{"source":"G0","value":"主治功能","target":"G00"},{"source":"G0","value":"主治功能","target":"G01"},{"source":"G0","value":"主治功能","target":"G02"},{"source":"O0","value":"主治功能","target":"O00"},{"source":"B0","value":"主治功能","target":"B01"}],"categories":[{"name":"药物"},{"name":"地理分布"},{"name":"主治功能"},{"name":"性味归经"},{"name":"药材别名"},{"name":"材料原文"},{"name":"虚拟节点"}],"message":"success","status":200};
var data2=[];

$.get('${pageContext.request.contextPath}/TupuServlet?method=zhongyaoTupu',
        
        function(datas){
var res_json=JSON.parse(datas);
var data = res_json.data;
var links = res_json.links;
var categories = res_json.categories;

option = {

color: [
    '#ff7f50',
    '#87cefa',
    '#da70d6',
    '#cd7033',
    '#6495ed',
    '#ff69b4',
    '#ba55d3',
    '#cd5c5c',
    '#ff0d32',
    '#40e0d0',
    '#1e90ff',
    '#ff6347',
    '#7b68ee',
    '#d0648a',
    '#09b0ff',
    '#6b8e23',
    '#4ea397',
    '#3cb371',
    '#b8860b',
    '#7bd9a5'
        ],
    tooltip: {},
    legend: [{
        x: 'center',
        y: 'top',
        orient:'horizontal',
        data: categories.map(function (a) {
            return a.name;
        }),
    }],
    zoom: 2.0,
    animation: true,

    series : [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: function(size) {
                return size;
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: "{c}"
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            focusNodeAdjacency: true,
            roam: true,
            data: data,
            links: links,
            categories: categories,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            force: {
                repulsion: 1000
            },
            tooltip: {

                formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
                    return node.data.text;
                },


            },
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0.3
                }
            },
        }]
};

myChart.setOption(option);
myChart.on('click', function (pointData) {
    window.alert(pointData.value);
} );
});


</script>

echarts原文：

https://www.makeapie.com/editor.html?c=x6DlsF_KIm