HTML5 css3 JS 树图echarts和antv g6均可
UI图
孝感数字招商平台的产业链截图
echarts
{extend name="index@base/layout" /}
{block name="title"}产业链{/block}
{block name="header"}
<style type="text/css">
#container {
width: 100%;
position: fixed !important;
top: 24vw;
left: 0;
right: 0;
bottom: 55vw;
margin-bottom: 0;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
:root {
--van-floating-panel-header-height: 4vw;
--van-floating-panel-bar-width: 12vw;
--van-floating-panel-bar-height: 2vw;
--van-floating-panel-bar-color: rgba(0, 0, 0, 0.5);
}
.van-floating-panel {
background: transparent;
}
.van-floating-panel__content {
border-radius: 5vw;
}
.block2_con {
margin: 0 auto;
margin-top: 3vw;
width: 88vw;
height: 51vw;
background-color: #ffffff;
border-radius: 1vw;
}
.block2_item {
width: 20%;
text-align: center;
float: left;
margin-top: 4vw;
}
.block2_item img {
width: 9vw;
height: 9vw;
background-color: #ffffff;
border-radius: 50%;
}
.block2_item div {
height: 2em;
line-height: 1em;
padding-top: 2vw;
font-family: MicrosoftYaHei;
font-size: 3vw;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.van-floating-panel__content {
background: #f6f7f9;
}
.shows .van-floating-panel__content {
background: #ffffff;
}
.node {
background: linear-gradient(to right, #FFD700, #FFA500);
/* 渐变色 */
}
.node-label {
fill: #333;
/* 文本颜色 */
font-size: 14px;
/* 字体大小 */
}
</style>
{/block}
{block name="bodyer"}
<div>
<div class="sn_box"></div>
<div class="sn_box sn_con">
产业链
</div>
<div id="container"></div>
<div id="app"></div>
<div id="tmp">
<van-floating-panel class="shows"
v-model:height="heights"
:anchors="[mins,maxs,heights]"
:content-draggable="false"
@height-change="hcs">
<div class="block2_con">
{volist name="industrial" id="vo"}
<a class="block2_item"
href="/index/pro/index/iid/{$vo.id}">
<img src="{$vo.thumb}"
alt=""
style="box-shadow: 0vw 0vw 5vw 0vw {$vo.bs_color};" />
<div>{$vo.names}</div>
</a>
{/volist}
<div style="clear: both;"></div>
</div>
</van-floating-panel>
</div>
</div>
{/block}
{block name="js"}
<!-- echarts -->
<!-- <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
<script type="text/javascript">
$(function () {
layui.use([
"layer",
], function () {
layer = layui.layer;
var myChart = echarts.init(
document.getElementById("container"),
null,
{
// renderer: "svg"
}
);
myChart.clear();
$.ajaxSetup({
async: false, //ajax请求按顺序执行
});
function get_tree(iid) {
$.post("/index/pro/gets_tree", {
iid: iid,
}, function (params) {
datas = params.infos;
}, "json");
}
get_tree(`{$iid}`);
var option = {
// tooltip: {
// trigger: "item",
// triggerOn: "mousemove",
// backgroundColor: "#dfdfdf",
// textStyle: {
// color: "black",
// },
// },
series: [
{
type: "tree",
symbolSize: [window.innerWidth * 0.21, window.innerWidth * 0.09],
symbol: "roundRect",
edgeShape: "polyline",
edgeForkPosition: "50%",
initialTreeDepth: 2,
orient: "vertical",
itemStyle: {
color: "black",
borderColor: "black",
},
expandAndCollapse: false,
animationDuration: 550,
animationDurationUpdate: 750,
lineStyle: {
color: "#a4aabb",
width: 1,
},
label: {
show: true,
position: "inside",
textStyle: {
fontSize: 15,
color: "#fff",
},
},
leaves: {
label: {
position: "inside",
color: "#fff",
},
itemStyle: {
color: "#dfdfdf",
borderColor: "#dfdfdf",
},
},
data: [datas],
itemStyle: {
borderCap: "round",
},
},
],
};
option && myChart.setOption(option);
console.log(option);
myChart.on("click", function (params) {
if (params.componentType === "series") {
console.log(params);
var clickedNodeDepth = params.data.depth;
console.log("被点击节点的层级：", clickedNodeDepth);
}
});
});
});
</script>
<script type="text/javascript">
// vue3代码
var app = Vue.createApp({
data() {
return {
maxs: Math.round(window.innerHeight - (window.innerWidth * 0.3)),
heights: Math.round((window.innerWidth * 0.51) + $(".tab_con").outerHeight(true)),
};
},
template: $("#tmp").html(),
mounted() {
that = this;
// that.mins = Math.round($(".van-floating-panel__header").outerHeight(true) + $(".tab_con").outerHeight(true));
that.mins = Math.round((window.innerWidth * 0.44) + $(".tab_con").outerHeight(true));
console.log("mins", that.mins);
// console.log(parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sat")));
},
methods: {
hcs: function (params) {
if (that.mins > params.height) {
that.heights = 0; //解决高度设置不生效的问题
that.heights = that.mins;
}
if (that.maxs < params.height) {
that.heights = 0; //解决高度设置不生效的问题
that.heights = that.maxs;
}
},
},
});
app.use(vant);
app.mount("#app");
</script>
{/block}
调好几天还没调出来
希望一起交流学习
谢谢
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7744342
- 这篇博客也不错, 你可以看下js中使用echarts
- 除此之外, 这篇博客: 【css + echarts】实现两种时钟展示中的 js 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
<script> import getToday from '@/helpers/getToday' import { getCurrentInstance, onMounted, ref, watch } from 'vue' export default { name: 'homepage', setup () { const { proxy } = getCurrentInstance() const today = getToday() const nowdate = ref('') const nowTime = ref('') const loading = ref(true) const getTime = () => { loading.value = true // 等执行完全部数据的展示再取消loading setInterval(() => { nowdate.value = new Date().toLocaleString('chinese', { hour12: false }) // 电子钟一般都是24小时计，所以改了时间 nowTime.value = nowdate.value.slice(-8) loading.value = false }, 1000); } onMounted(() => { getTime() }) return { today, nowTime, loading, } } } </script> - 您还可以看一下 李游Leo老师的JavaScript - Echarts经典教程课程中的 数据交互与多级互动小节, 巩固相关知识点
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^