记录用echarts实现产业链图谱

先来看一下实现效果:

图表难点在于节点上的加减号、节点的点击事件、节点的文字样式的格式化等。

上代码：

 getchartnewTwo(id, chartData) {
  let myChart = echarts.init(document.getElementById(id))
  let newData = this.handleData(chartData)
  // console.log('最终数据', newData)
  let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: (params) => {
        // console.log('悬浮窗样式', params)
        let str = `${params.data.name} ${params.data.value}`
        return str
      },
      textStyle: {
        color: '#fff',
        fontSize: 36,
      },
      backgroundColor: '#041b34',
      borderColor: '#035693',
      borderWidth: 8,
      padding: [20, 30, 20, 30]
    },
    dataZoom: {
      type: 'inside'
    },
    series: [{
      type: "tree",
      roam: true,
      // silent: true,
      // initialTreeDepth: -1,
      initialTreeDepth: 1,
      data: newData,
      top: "0%",
      left: "20%",
      bottom: "0%",
      right: "0%",
      symbolSize: 50,
      zoom: 0.8,
      edgeShape: "polyline", //链接线是折现还是曲线
      symbol: (value, params) => {
        // console.log('图标', params)
        let icon = ''
        if (params.data.children.length < 1) {
          icon = ''
        } else if (params.collapsed) {
          icon = `image://data:image/png;base64,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`
        } else if (!params.collapsed) {
          icon = `image://data:image/png;base64,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`
        }
        return icon
      },
      itemStyle: {
        color: 'rgba(255,255,255,0)',
        // padding: 20, // 节点之间的间距
        // borderWidth: 13,
        // borderColor: '#0091FF'
      },
      symbolOffset: [20, 0],
      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          // align: 'center',
          // align: 'left',
          distance: -2,
          // distance: -20,
          overflow: 'truncate',
          ellipsis: '...',
          color: '#fff',
          formatter: (params) => {
            let str = `${params.data.name} ${params.data.value == 0 ? '' : params.data.value}`
            if (str.length > 8) {
              str = str.slice(0, 8) + '...'
            }
            let menu = `{d|${str}}`
            if (params.data.ldlx == '断链') {
              menu = `{a|${str}}`
            } else if (params.data.ldlx == '弱链') {
              menu = `{b|${str}}`
            } else if (params.data.ldlx == '强链') {
              menu = `{c|${str}}`
            }
            return menu
          },
          rich: {
            a: {
              fontSize: 36,
              width: 360,
              height: 80,
              // padding: [20, 30, 20, 30],
              color: '#fff',
              align: 'middle',
              // backgroundColor: 'rgba(240, 96, 96, .3)',
              backgroundColor: '#492c42',
              borderRadius: 10,
              overflow: 'truncate',
              ellipsis: '...',
              borderWidth: 3,
              // borderColor: 'rgba(240, 96, 96, 1)'
              borderColor: '#e85e5f'
            },
            b: {
              fontSize: 36,
              width: 360,
              height: 80,
              // padding: [20, 30, 20, 30],
              color: '#fff',
              align: 'middle',
              // backgroundColor: 'rgba(0, 145, 255, .3)',
              backgroundColor: '#04457c',
              borderRadius: 10,
              overflow: 'truncate',
              ellipsis: '...',
              borderWidth: 3,
              // borderColor: 'rgba(0, 145, 255, 1)'
              borderColor: '#026dc1'
            },
            c: {
              fontSize: 36,
              width: 360,
              height: 80,
              // padding: [20, 30, 20, 30],
              color: '#fff',
              align: 'middle',
              // backgroundColor: 'rgba(19, 194, 194, .3)',
              backgroundColor: '#095269',
              borderRadius: 10,
              overflow: 'truncate',
              ellipsis: '...',
              borderWidth: 3,
              // borderColor: 'rgba(19, 194, 194, 1)'
              borderColor: '#11aaaf'
            },
            d: {
              fontSize: 36,
              width: 360,
              height: 80,
              // padding: [20, 30, 20, 30],
              color: '#fff',
              align: 'middle',
              backgroundColor: '#395372',
              borderRadius: 10,
              overflow: 'truncate',
              ellipsis: '...',
              borderWidth: 3,
              borderColor: '#bad3ff'
            }
          }
        }
      },
      lineStyle: {
        color: 'rgba(255, 255, 255, .5)',
        width: 5,
        curveness: 0.5,
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750,
    }]
  }
 
  myChart.setOption(option)
 
  myChart.on('mousedown', (e) => {
    // console.log('鼠标下', e)
    const name = e.data.name
    const nodeList = myChart._chartsViews[0]._data.tree._nodes
    const curNode = nodeList.filter(item => {
      return item.name === name && item.children.length == e.data.children.length
    })
    // console.log('鼠标下', name, curNode)
    const dataIndex = curNode[0].dataIndex
    const curIsExpand = JSON.parse(JSON.stringify(curNode[0].isExpand))
    if (e.event.topTarget.style.text) {
      // console.log('点击了label', dataIndex, curIsExpand)
      nodeList.forEach(item => {
        if (item.dataIndex == dataIndex && item.name == name && !curIsExpand) {
          // console.log('走这里吗', item)
          item.isExpand = true
        } else if (item.dataIndex == dataIndex && item.name == name && curIsExpand) {
          // console.log('走这里吗222', item)
          item.isExpand = false
        }
      })
      this.queryQyList(name)
    }
  })
},复制

记录用echarts实现产业链图谱

监听其他音频播放时暂停正在播放的音频

基于vue jsmind jquery的自定义扩展的思维导图

web数据可视化(Echarts版)4-9基本漏斗图(代码仅供参考)

springboot echarts mysql制作数据可视化大屏（滑动大屏）

Bootstrap echarts实现轮播效果第二屏echarts图不显示

echarts使用案例

Java中的反应式编程：RxJava与Project Reactor

echarts 饼图自动高亮展示数据

关于在vue2中echarts折线图双Y轴刻度线对齐的问题

原生小程序使用echarts图表 ec-canvas

前端哥

监听其他音频播放时暂停正在播放的音频

[Java基础]单元测试

矩阵碰一碰发视频之 API 接口接入技术开发全解析，支持OEM

pyrender 自动计算相机 pose

【音视频】编解码相关概念总结

cv2.solvePnP 报错求相机位姿

高清下载油管视频到本地

websocket

光谱相机的市场发展趋势

[ISP] AE 自动曝光

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

	getchartnewTwo(id, chartData) {
	let myChart = echarts.init(document.getElementById(id))
	let newData = this.handleData(chartData)
	// console.log('最终数据', newData)
	let option = {
	tooltip: {
	trigger: 'item',
	triggerOn: 'mousemove',
	formatter: (params) => {
	// console.log('悬浮窗样式', params)
	let str = `${params.data.name} ${params.data.value}`
	return str
	},
	textStyle: {
	color: '#fff',
	fontSize: 36,
	},
	backgroundColor: '#041b34',
	borderColor: '#035693',
	borderWidth: 8,
	padding: [20, 30, 20, 30]
	},
	dataZoom: {
	type: 'inside'
	},
	series: [{
	type: "tree",
	roam: true,
	// silent: true,
	// initialTreeDepth: -1,
	initialTreeDepth: 1,
	data: newData,
	top: "0%",
	left: "20%",
	bottom: "0%",
	right: "0%",
	symbolSize: 50,
	zoom: 0.8,
	edgeShape: "polyline", //链接线是折现还是曲线
	symbol: (value, params) => {
	// console.log('图标', params)
	let icon = ''
	if (params.data.children.length < 1) {
	icon = ''
	} else if (params.collapsed) {
	icon = `image://data:image/png;base64,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`
	} else if (!params.collapsed) {
	icon = `image://data:image/png;base64,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`
	}
	return icon
	},
	itemStyle: {
	color: 'rgba(255,255,255,0)',
	// padding: 20, // 节点之间的间距
	// borderWidth: 13,
	// borderColor: '#0091FF'
	},
	symbolOffset: [20, 0],
	label: {
	normal: {
	position: 'left',
	verticalAlign: 'middle',
	// align: 'center',
	// align: 'left',
	distance: -2,
	// distance: -20,
	overflow: 'truncate',
	ellipsis: '...',
	color: '#fff',
	formatter: (params) => {
	let str = `${params.data.name} ${params.data.value == 0 ? '' : params.data.value}`
	if (str.length > 8) {
	str = str.slice(0, 8) + '...'
	}
	let menu = `{d\|${str}}`
	if (params.data.ldlx == '断链') {
	menu = `{a\|${str}}`
	} else if (params.data.ldlx == '弱链') {
	menu = `{b\|${str}}`
	} else if (params.data.ldlx == '强链') {
	menu = `{c\|${str}}`
	}
	return menu
	},
	rich: {
	a: {
	fontSize: 36,
	width: 360,
	height: 80,
	// padding: [20, 30, 20, 30],
	color: '#fff',
	align: 'middle',
	// backgroundColor: 'rgba(240, 96, 96, .3)',
	backgroundColor: '#492c42',
	borderRadius: 10,
	overflow: 'truncate',
	ellipsis: '...',
	borderWidth: 3,
	// borderColor: 'rgba(240, 96, 96, 1)'
	borderColor: '#e85e5f'
	},
	b: {
	fontSize: 36,
	width: 360,
	height: 80,
	// padding: [20, 30, 20, 30],
	color: '#fff',
	align: 'middle',
	// backgroundColor: 'rgba(0, 145, 255, .3)',
	backgroundColor: '#04457c',
	borderRadius: 10,
	overflow: 'truncate',
	ellipsis: '...',
	borderWidth: 3,
	// borderColor: 'rgba(0, 145, 255, 1)'
	borderColor: '#026dc1'
	},
	c: {
	fontSize: 36,
	width: 360,
	height: 80,
	// padding: [20, 30, 20, 30],
	color: '#fff',
	align: 'middle',
	// backgroundColor: 'rgba(19, 194, 194, .3)',
	backgroundColor: '#095269',
	borderRadius: 10,
	overflow: 'truncate',
	ellipsis: '...',
	borderWidth: 3,
	// borderColor: 'rgba(19, 194, 194, 1)'
	borderColor: '#11aaaf'
	},
	d: {
	fontSize: 36,
	width: 360,
	height: 80,
	// padding: [20, 30, 20, 30],
	color: '#fff',
	align: 'middle',
	backgroundColor: '#395372',
	borderRadius: 10,
	overflow: 'truncate',
	ellipsis: '...',
	borderWidth: 3,
	borderColor: '#bad3ff'
	}
	}
	}
	},
	lineStyle: {
	color: 'rgba(255, 255, 255, .5)',
	width: 5,
	curveness: 0.5,
	},
	expandAndCollapse: true,
	animationDuration: 550,
	animationDurationUpdate: 750,
	}]
	}

	myChart.setOption(option)

	myChart.on('mousedown', (e) => {
	// console.log('鼠标下', e)
	const name = e.data.name
	const nodeList = myChart._chartsViews[0]._data.tree._nodes
	const curNode = nodeList.filter(item => {
	return item.name === name && item.children.length == e.data.children.length
	})
	// console.log('鼠标下', name, curNode)
	const dataIndex = curNode[0].dataIndex
	const curIsExpand = JSON.parse(JSON.stringify(curNode[0].isExpand))
	if (e.event.topTarget.style.text) {
	// console.log('点击了label', dataIndex, curIsExpand)
	nodeList.forEach(item => {
	if (item.dataIndex == dataIndex && item.name == name && !curIsExpand) {
	// console.log('走这里吗', item)
	item.isExpand = true
	} else if (item.dataIndex == dataIndex && item.name == name && curIsExpand) {
	// console.log('走这里吗222', item)
	item.isExpand = false
	}
	})
	this.queryQyList(name)
	}
	})
	},

记录用echarts实现产业链图谱

微信扫一扫：分享