对jqcloud和echats,joint,使用踩的坑

最新推荐文章于 2020-07-05 00:52:06 发布

LMF283

最新推荐文章于 2020-07-05 00:52:06 发布

阅读量294

点赞数

分类专栏：画图插件

本文链接：https://blog.csdn.net/LMF283/article/details/103705305

版权

画图插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jqcloud词云的使用大体框架：
- 设计词数据，数据模式必须为：$scope.tabelList={text:allList[tab].contents[info].name};将全局页面的数据放到text中，再将类型的数据保存到scope数据中，实现数据的转换
- {text:xxxx , link:xxxx, html:xxxx}
- 在最后实例化jqcloud的数据，通过
```
 ```
 $(function() {
```
“use strict”;
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲labelwall").jQC\dots$ scope.labelList,{
removeOverflowing:true,
width:500,
height:500,
shape :“rectangular”,});
});
```
- 清除实例，采用了（“#labelwall”）.empty()
```
echarts的使用大体框架：
- echarts的使用。显示初始化一个echarts的使用，通过调用echarts的init()

var relationmap = echarts.init(document.getElementById("relation"));

- 设置echarts的数据：采用的是echarts的wordcloud参数，数据设计中必须有{name：xxx,value:xxx}，没有value值，也必须要设计一个value满足数据的需要，否者无法渲染页面的。采用echarts的graph数据设计中，如果采用的layout的布局方式，则在数据中必须要设计x,y坐标的值，否值页面报错在高亮提示处，无法定位错误。采用的echarts的实例不能把div直接至empty，而是必须要采用echarts的实例销毁方法。

echarts.init(document.getElementById('relationmap')).dispose();//销毁前一个实例

- echarts的设计中在前面设计好option和series的数据值，最后将
relationmap.setOption(option);即可。
3. joint的使用：
4. 定义一个graph的模型，在定义一个画布，将所有的元素放到画布中。

var graph = new joint.dia.Graph;
	var paper = new joint.dia.Paper({
	
		el: document.getElementById('showrelationmap'),//放graph的容器
		width:600,
		height:400,
		model:graph,
		layout: true,
		gridSize: 10,
        drawGrid: true,
        background: {
            color: 'rgba(0, 255, 0, 0.3)'
        }
		
	});

	var rect=new joint.shapes.basic.Rect({  //绘制矩形元素
		rect.position(100, 30),
        size: {width: 100 ,height: 30},
        attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} }
    });
    //克隆一个头实体和尾实体
    var headrect=rect.clone();
    var tailrect=rect.clone();
    tailrect.translate(300, 0);
    
    var rhombus=new joint.shapes.basic.rhombus({  //绘制菱形元素
        size: {width: 100 ,height: 30},
        attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} }
    });
     var link=new joint.dia.Link({
        source: {headrect},
        target: {tailrect}
    });
    var link1=link.clone();
    var link2=link.clone();
    //将元素添加到画布中
     graph.addCells([headrect,tailrect,link1,link2,rhombus]);
},