漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案

简介: 漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案

var colors=[
  "#00ADD0",
  "#FFA12F",
  "#B62AFF",
  "#604BFF",
  "#6E35FF",
  "#002AFF",
  "#20C0F4",
  "#95F300",
  "#04FDB8",
  "#AF5AFF"
]
var getdata=function getData() {
      let data = {
        name: "35",
        value: 0,
        children: []
      };
      for (let i = 1; i <= 8; i++) {
        let obj = {
          name: " " + i,
          value: i,
          children: [],
        };
        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: 0,
            curveness:0.5,
        }
      }
    ]
  };


lockdatav Done!

相关文章
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
119 1
Vue3使用echarts树图(tree)
|
3月前
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
144 0
Vue2使用echarts树图(tree)
|
3月前
|
数据可视化
为什么Echarts数据可视化大屏不好做?
为什么Echarts数据可视化大屏不好做?
|
3月前
|
数据可视化 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
3月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
3月前
|
数据可视化
动漫形象平台 Echarts数据可视化大屏
动漫形象平台 Echarts数据可视化大屏
|
3月前
|
数据可视化
为什么不建议你拿下Echarts数据可视化?
为什么不建议你拿下Echarts数据可视化?
|
3月前
|
数据可视化
Echarts数据可视化开发| 移动效能平台附源码
Echarts数据可视化开发| 移动效能平台附源码
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
52 1
|
30天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
203 0

热门文章

最新文章