echarts2.0 引用

  html

 

 js引用

 


 js代码

require.config({
           paths: {
               echarts: './js/dist'
           }
       });
       require(
           [
               'echarts',
               'echarts/theme/sakura',
               'echarts/chart/force'
               // 使用柱状图就加载bar模块,按需加载
           ],
           function  optionData(ec,theme) {
               var dataLink={},dataNode={};
               var ec=ec;

           //    $("#canvas-add").append('
');//动态加载 loading                var  myChart = ec.init(document.getElementById('chart'),theme);                // myChart.showLoading({                //      text: '正在努力的读取数据中...',    //loading话术                //  });                var ecConfig = require('echarts/config');                myChart.setOption(dealscatter());  //调用图表代码                // myChart.hideLoading();            }         );       function dealscatter(){   // echart图表生成         var option = {           title : {               text: '节点关系',               subtext: '数据来自网络',               x:'right',               y:'bottom'           },           tooltip : {               trigger: 'item',               formatter: '{a} : {b}'           },           toolbox: {               show : true,               feature : {                   restore : {show: true},                   magicType: {show: true, type: ['force', 'chord']},                   saveAsImage : {show: true}               }           },           legend: {               x: 'left',               data:['org','peer','order','CA','orderAll']           },           series : [               {                   type:'force',                   name : "节点关系",                   ribbonType: false,                   categories : [                       {                           name: 'org'                       },                       {                           name:'peer'                       },                       {                           name: 'order'                       },                       {                           name:'CA'                       },                       {                           name:'orderAll'                       }                   ],                   itemStyle: {                       normal: {                           label: {                               show: true,                               textStyle: {                                   color: '#333'                               }                           },                           nodeStyle : {                               brushType : 'both',                               borderColor : 'rgba(255,215,0,0.4)',                               borderWidth : 1                           },                           linkStyle: {                               type: 'line'                           }                       },                       emphasis: {                           label: {                               show: false                               // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE                           },                           nodeStyle : {                               //r: 30                           },                           linkStyle : {}                       }                   },                   useWorker: false,                   minRadius : 15,                   maxRadius : 25,                   gravity: 1.1,                   scaling: 1.1,                   roam: 'move',                   nodes:[                       {category:0, name: 'org1', value : 5},                       {category:1, name: 'peer1.1',value : 0},                       {category:1, name: 'peer1.2',value : 0},                       {category:1, name: 'peer1.3',value : 0},                       {category:1, name: 'peer1.4',value : 0},                       {category:2, name: 'order1',value : 2},                       {category:0, name: 'org2', value : 5},                       {category:1, name: 'peer2.1',value : 0},                       {category:1, name: 'peer2.2',value : 0},                       {category:1, name: 'peer2.3',value : 0},                       {category:1, name: 'peer2.4',value : 0},                       {category:2, name: 'order2',value :2},                       {category:0, name: 'org3', value : 5},                       {category:1, name: 'peer3.1',value : 0},                       {category:1, name: 'peer3.2',value : 0},                       {category:1, name: 'peer3.3',value : 0},                       {category:1, name: 'peer3.4',value : 0},                       {category:2, name: 'order3',value : 2},                       {category:0, name: 'org4', value : 5},                       {category:1, name: 'peer4.1',value : 0},                       {category:1, name: 'peer4.2',value : 0},                       {category:1, name: 'peer4.3',value : 0},                       {category:1, name: 'peer4.4',value : 0},                       {category:2, name: 'order4',value : 2},                       {category:0, name: 'org5', value : 5},                       {category:1, name: 'peer5.1',value : 0},                       {category:1, name: 'peer5.2',value : 0},                       {category:1, name: 'peer5.3',value : 0},                       {category:1, name: 'peer5.4',value : 0},                       {category:2, name: 'order5',value : 2},                       {category:3, name: 'CA',value : 5},                       {category:4, name: 'orderALL',value : 5}                   ],                   links : [                       {source : 'CA', target : 'org1', weight : 3},                       {source : 'CA', target : 'org2', weight : 3},                       {source : 'CA', target : 'org3', weight : 3},                       {source : 'CA', target : 'org4', weight : 3},                       {source : 'CA', target : 'org5', weight : 3},                       {source : 'org1', target : 'peer1.1', weight : 2},                       {source : 'org1', target : 'peer1.2', weight : 2},                       {source : 'org1', target : 'peer1.3', weight : 2},                       {source : 'org1', target : 'peer1.4', weight : 2},                       {source : 'org1', target : 'order1', weight : 2},                       {source : 'org2', target : 'peer2.1', weight : 2},                       {source : 'org2', target : 'peer2.2', weight : 2},                       {source : 'org2', target : 'peer2.3', weight : 2},                       {source : 'org2', target : 'peer2.4', weight : 2},                       {source : 'org2', target : 'order2', weight : 2},                       {source : 'org3', target : 'peer3.1', weight : 2},                       {source : 'org3', target : 'peer3.2', weight : 2},                       {source : 'org3', target : 'peer3.3', weight : 2},                       {source : 'org3', target : 'peer3.4', weight : 2},                       {source : 'org3', target : 'order3', weight : 2},                       {source : 'org4', target : 'peer4.1', weight : 2},                       {source : 'org4', target : 'peer4.2', weight : 2},                       {source : 'org4', target : 'peer4.3', weight : 2},                       {source : 'org4', target : 'peer4.4', weight : 2},                       {source : 'org4', target : 'order4', weight : 2},                       {source : 'org5', target : 'peer5.1', weight : 2},                       {source : 'org5', target : 'peer5.2', weight : 2},                       {source : 'org5', target : 'peer5.3', weight : 2},                       {source : 'org5', target : 'peer5.4', weight : 2},                       {source : 'org5', target : 'order5', weight : 2},                       {source : 'orderALL', target : 'order1', weight : 3},                       {source : 'orderALL', target : 'order2', weight : 3},                       {source : 'orderALL', target : 'order3', weight : 3},                       {source : 'orderALL', target : 'order4', weight : 3},                       {source : 'orderALL', target : 'order5', weight : 3}                   ]               }           ]       };       return option;       }

 

你可能感兴趣的:(echarts)