<script>
import { projectVehicles } from "../api/api";
export default {
name: "tabvehicle",
data() {
return {
activeNames: ["1"],
vehicleData: [],
TabsData: [],
aaaa: [],
option: [
{
name: "方案场景",
children: [
{
name: "analytics",
},
{
name: "animate",
},
{
name: "data",
},
],
},
],
};
},
created() {
// console.log(this.sss[0]);
},
mounted() {
this.showVehicle();
var chartDom = document.getElementById("main");
var myChart = this.$echarts.init(chartDom);
var option;
// myChart.setOption(this.option);
// myChart.showLoading();
// console.log(this.option);
myChart.setOption(
(option = {
tooltip: {
trigger: "item",
triggerOn: "mousemove",
},
series: [
{
type: "tree",
data: [this.option[0]],
top: "0%",
bottom: "14%", //距离
layout: "radial", //分布的方式
symbol: "circle", //点的形状
symbolSize: 40, //圆点的大小
initialTreeDepth: 1, //默认展开多少层
animationDurationUpdate: 750, //展开动画的时常
emphasis: {
focus: "descendant",
},
subtextStyle:{
align:"left",
}
},
],
})
);
option && myChart.setOption(option);
},
echarts树形图的使用
最新推荐文章于 2024-04-19 13:28:21 发布
该博客主要展示了如何在Vue应用中使用Echarts库创建一个树状图,并进行数据加载和配置。通过`import`引入`projectVehicles`数据,初始化并设置图表的各个属性,包括布局、符号大小、动画效果等。同时,还展示了如何在图表加载完成后设置选项并更新图表。
摘要由CSDN通过智能技术生成