用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);
   }

View Code

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'