用echarts的simplegraph做的功能隨筆

1.html中引用echarts.min.js的js，定義一個div放echarts畫的圖。比如id為"main";<div>要放在寫的js上面；否則加載不上，
2.像官網中的option似的，給option賦值；
var myChart = echarts.init(document.getElementById('main'));
option ...此處省略...
myChart.setOption(option);
myChart.on('click', function (param){//(param) {
   var needParam = param.data.detail;
   createDetailTable(needParam);
  });
  console.log(data);
 }

 3.option中的data和links我們可以根據需求拼接json或jsonArray，
 （1）可以用字符串拼接，
 （2）也可以定義變量拼接   例如：
 var datatemp[];
 var jsontemp = {};
 jsontemp["id"] = "001";
 jsontemp["name"] = "james";
 datatemp.push(jsontemp);
注意：最后拼接好的要轉換一下，才可以賦值給data或links；
   var datas;
   datas = JSON.stringify(datatemp);
   datas = JSON.parse( datas )
 4.示例代碼如下：

var myChart = echarts.init(document.getElementById('main'));
    var datas;
      datas = JSON.stringify(datatemp);
      datas = JSON.parse( datas )
      var links1 ;
      links1 = JSON.stringify(datatemp);
      links1 = JSON.parse( links1 )
      option = {
      title: {
          text: 'Graph 簡單示例'
      },
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series : [
          {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              itemStyle:{
                  normal:{color:'#6c8ab6'}
              },
              label: {
                  normal: {
                      show: true,
                      position:'bottom',
                      color:'#000000'
                  }
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                  normal: {
                      textStyle: {
                          fontSize: 20
                          }
                      }
                  },
              data: datas,
              links:links1,
              }
          ]
      };
      myChart.setOption(option);
      myChart.on('click', function (param){//(param) {
          var needParam = param.data.detail;
          createDetailTable(needParam);
      });
      console.log(data);
   }

5.其中itemStyle:{normal:{color:'#6c8ab6'}},是設置節點顏色
   這個是設置標簽在節點下面和設置顏色
   label: {
                  normal: {
                      show: true,
                      position:'bottom',
                      color:'#000000'
                  }
              },
6.點擊標簽的回調我們可以在data按照需求封裝的數據中封裝自定義的變量，回調中param.data.'變量名'可以取出數據。
7.單個data節點中可以拼接這些可以改變顏色形狀
   {
                name: '節點1',
                x: 300,
                symbol:'roundRect',//形狀roundRect,triangle,diamond,circle,pin,arrow
                itemStyle:{
                    normal:{
                        color:'#dc7403'//顏色
                    }
                },
                y: 300
            },
8.data節點中還可以把形狀改成圖片;把symbol改一下就可以,${ctxStatic}/images/standard_library.png在項目中可以找到圖片的路徑

symbol:'image://${ctxStatic}/images/standard_library.png'