123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <!DOCTYPE>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="lib/esl.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <script src="lib/testHelper.js"></script>
- <link rel="stylesheet" href="lib/reset.css">
- </head>
- <body>
- <style>
- h1 {
- line-height: 60px;
- height: 60px;
- background: #146402;
- text-align: center;
- font-weight: bold;
- color: #eee;
- font-size: 14px;
- }
- .chart {
- height: 500px;
- }
- </style>
- <div class="chart" id="main"></div>
- <script>
- var echarts;
- var chart;
- var myChart;
- var groupCategories = [];
- var groupColors = [];
- require([
- 'echarts'
- // 'echarts/chart/line',
- // 'echarts/chart/bar',
- // 'echarts/chart/pie',
- // 'echarts/chart/scatter',
- // 'echarts/chart/map',
- // 'echarts/chart/parallel',
- // 'echarts/chart/radar',
- // 'echarts/chart/graph',
- // 'echarts/component/grid',
- // 'echarts/component/polar',
- // 'echarts/component/geo',
- // 'echarts/component/singleAxis',
- // 'echarts/component/legend',
- // 'echarts/component/tooltip',
- // 'echarts/component/toolbox',
- // 'echarts/component/visualMap',
- // 'echarts/component/dataZoom'
- ], function (ec) {
- echarts = ec;
- option = {
- "title": {
- "text": "兴趣点",
- "top": "top",
- "left": "left"
- },
- "tooltip": { },
- "legend": [
- {
- "data": [ "长期", "短期" ],
- "selected": {
- "长期": true,
- "短期": true
- },
- "orient": "vertical",
- "left": "right"
- }
- ],
- "series": [
- {
- "type": "graph",
- "layout": "force",
- "data": [
- {
- "name": "戴胜",
- "value": 31,
- "symbolSize": 0.6,
- "category": 1,
- "x": null,
- "y": null,
- "label": {
- "normal": {
- "position": "right",
- "show": true
- }
- }
- }, {
- "name": "石榴",
- "value": 30,
- "symbolSize": 0.3,
- "category": 1,
- "x": null,
- "y": null,
- "label": {
- "normal": {
- "position": "right",
- "show": true
- }
- }
- }, {
- "name": "水果",
- "value": 30,
- "symbolSize": 0.3,
- "category": 1,
- "x": null,
- "y": null,
- "label": {
- "normal": {
- "position": "right",
- "show": true
- }
- }
- }
- ],
- "links": [
- {
- "source": "石榴",
- "target": "水果"
- }
- ],
- "categories": [
- {
- "key": "longAttentionList",
- "name": "长期"
- }, {
- "key": "shortAttentionList",
- "name": "短期"
- }
- ],
- "roam": true,
- "focusNodeAdjacency": true,
- "label": {
- "emphasis": {
- "position": "right",
- "show": true
- }
- },
- "lineStyle": {
- "normal": {
- "width": 0.5,
- "curveness": 0.3,
- "opacity": 0.7
- }
- }
- }
- ]
- };
- testHelper.createChart(echarts, 'main', option);
- });
- </script>
- </body>
- </html>
|