西北乱跑娃 --- echarts一个不依赖后端生成的可视化工具

最新推荐文章于 2023-08-21 16:23:04 发布

西北乱跑娃

最新推荐文章于 2023-08-21 16:23:04 发布

阅读量184

点赞数

分类专栏：可视化前端

本文链接：https://blog.csdn.net/human_soul/article/details/113104895

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

可视化

5 篇文章 0 订阅

订阅专栏

一、创建项目文件结构

项目文件夹下你需要创建一个html文件，文件名随意，我这里命名为echarts.html，然后你需要下载js中的几个文件，wordcloud.js非必要文件，如果你要做词云图的话，就必须下载此文件。
在这里插入图片描述

二、创建html（同上echart.html）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入js文件-->
    <script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/echarts-4.2.1.min.js"></script>
	<script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div style="width: 800px; height: 500px" id="main1"></div>
</body>
<script type="application/javascript">
    // 实例化echart类，如果创建多个图标，依次类推，增加对应的容器以及实例
    var myChart= echarts.init(document.getElementById('main1'));
    // js内调用下面函数
    init_myChart();

    // 创建图标函数
    function init_myChart() {
        // 网站给定数据格式开始
        var colors=[
            "#00ADD0",
            "#FFA12F",
            "#B62AFF",
            "#604BFF",
            "#6E35FF",
            "#002AFF",
            "#20C0F4",
            "#95F300",
            "#04FDB8",
            "#AF5AFF"
        ]
        var getdata=function getData() {
              let data = {
                name: "根节点1",
                value: 0,
                children: []
              };
              for (let i = 1; i <= 10; i++) {
                let obj = {
                  name: "节点" + i,
                  value: i,
                  children: [],
                };
                for (let j = 1; j <= 5; j++) {
                  let obj2 = {
                    name: `节点1-${i}-${j}`,
                    value: 1 + "-" + i + "-" + j,
                  };
                  if(j%2==1){
                    obj2.children=[]
                    for (let k = 1; k <= 3; k++) {
                      let obj3 = {
                        name: `节点1-${i}-${j}-${k}`,
                        value: 1 + "-" + i + "-" + j+'-'+k,
                      };
                      obj2.children.push(obj3);
                    }
                  }

                  obj.children.push(obj2);
                }

                data.children.push(obj);
              }
              let arr=[]
              arr.push(data)
              //
              arr=handle(arr,0)
                    console.log(arr);
              return arr;
            }
        var handle=function handleData(data,index,color='#00f6ff'){
          //index标识第几层
          return data.map((item,index2)=>{
             //计算出颜色
            if(index==1){
              color = colors.find((item, eq) => eq == index2 % 10);
            }
            // 设置节点大小
            if(index===0 || index===1){
                item.label= {
                  position: "inside",
                //   rotate: 0,
                //   borderRadius: "50%",
                }
            }
            // 设置label大小
            switch(index){
              case 0:
                item.symbolSize=70
                break;
              case 1:
                item.symbolSize=50
                break;
              default:
                item.symbolSize=10
                break;
            }
            // 设置线条颜色
            item.lineStyle= { color: color }

            if (item.children) {//存在子节点
              item.itemStyle = {
                borderColor: color,
                color:color
              };
              item.children=handle(item.children,index+1,color)
            } else {//不存在
              item.itemStyle = {
                color:'transparent',
                borderColor: color
              };
            }
            return item
          })
        }
        var option = {
            type: "tree",
            backgroundColor: "#000",
            toolbox: { //工具栏
              show: true,
              iconStyle: {
                borderColor: "#03ceda"
              },
              feature: {
                restore: {}
              }
            },
            tooltip: {//提示框
              trigger: "item",
              triggerOn: "mousemove",
              backgroundColor: "rgba(1,70,86,1)",
              borderColor: "rgba(0,246,255,1)",
              borderWidth: 0.5,
              textStyle: {
                fontSize: 10
              }
            },
            series: [
              {
                type: "tree",
                hoverAnimation: true, //hover样式
                data:getdata(),
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
                layout: "radial",
                symbol: "circle",
                symbolSize: 10,
                            nodePadding: 20,
                animationDurationUpdate: 750,
                expandAndCollapse: true, //子树折叠和展开的交互，默认打开
                initialTreeDepth: 2,
                roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
                focusNodeAdjacency: true,
                itemStyle: {
                  borderWidth: 1,
                },
                label: { //标签样式
                  color: "#fff",
                  fontSize: 10,
                  fontFamily: "SourceHanSansCN",
                   position: "inside",
                  rotate: 0,
                },
                lineStyle: {
                  width: 1,
                                curveness:0.5,
                }
              }
            ]
          };
        // 网站给定数据格式结束

        // 将组件添加至容器
        myChart.setOption(option);
    }
    
    // 添加图标点击事件
    myChart.on('click', function (params) {
        // params会返回所有的option参数，每个图标单元都会有对应的至，你可以根据对应组件值指定事件
        console.log(params)
        // window.location = "http://www.baidu.com/";
    });
</script>
</html>

三、查看效果

在这里插入图片描述

四、应用网站

https://www.makeapie.com/editor.html?c=x8cCUQhaF
在这里插入图片描述
你只需要将网站图标给定的左边插件添加到指定矩形框的位置即可，就可以返回任何你中意的图表了

五、后端交互版格式

function init_myChart() {
	$.ajax({
	   async: true,
	   type: 'get',
	   url: "/wordcloud",
	   success: function (result) {
	   		// 此处替换为ajax返回的值
	   		var data = result.wordcloud;
		    // console.log(data)
			option = {
				// backgroundColor: 'rgb(9,12,82, 0.5)',
				series: [{
					type: 'wordCloud',
					gridSize: 7,
					sizeRange: [15, 40],
					rotationRange: [-90, 90],
					// rotationStep: 45,
					shape: 'circle',
					width: '100%',
					height: '100%',
					drawOutOfBound: false,
					textStyle: {
						normal: {
							color: function() {
								return (
									'rgb(' + [
										Math.round(Math.random() * 500),
										Math.round(Math.random() * 300),
										Math.round(Math.random() * 200)
									].join(',') +
									')'
								)
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#ffffff'
						}
					},
					data: data
				}]
			};
			// 此处位置已经为ajax内添加配置
			myChart.setOption(option);
	   }
	});
}

西北乱跑娃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
西北乱跑娃 --- echarts一个不依赖后端生成的可视化工具

一、创建项目文件结构项目文件夹下你需要创建一个html文件，文件名随意，我这里命名为echarts.html，然后你需要下载js中的几个文件，wordcloud.js非必要文件，如果你要做词云图的话，就必须下载此文件。二、创建html（同上echart.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t
复制链接

扫一扫