echarts 树形图基于vue

效果如图

父组件

<template><div><tree-chart></tree-chart></div>
</template>
<script>
import treeChart from "@/views/my_components/charts/treeChart";
export default {components: { treeChart },data() {return {};},created() {},methods: {},
};
</script>

子组件

<template><div :class="className" :style="{ height: height, width: width }" />
</template><script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'const animationDuration = 6000;export default {//   mixins: [resize],props: {className: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "500px",},// chartData: {//   type: Object,//   required: true// }},data() {return {chart: null,};},mounted() {setTimeout(() => {this.initChart();}, 400);},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {this.chart = echarts.init(this.$el, "macarons");this.setOptions(this.chartData);},setOptions({seriesData,chartTitleText,chartTitleColor,chartTitleFontSize,} = {}) {this.chart.setOption({// title: {//   text: "手机品牌",//   subtext: "子标题",//   textStyle: {//     color: chartTitleColor || "#333", // 文字颜色//     fontSize: chartTitleFontSize || 14, // 文字大小//   },// },tooltip: {trigger: "item",triggerOn: "mousemove",},series: [{type: "tree",orient: "vertical",top: "10%",left: "8%",bottom: "22%",right: "20%",edgeShape: "polyline", //折线lineStyle: {width: 1,// color: "#000",// type: "solid", // 'curve'|'broken'|'solid'|'dotted'|'dashed'},label: {//每个节点的labelbackgroundColor: "#F0F2F5",position: "left",verticalAlign: "middle",align: "right",},data: [{name: "手机",value: 6,symbolSize: [70, 70],//图片大小symbol:'image://' + require('@/assets/logo/logo.png'),// 使用本地图片// "image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",// itemStyle: {//     normal: {//         label: {//             show: false//         }//     }// },children: [{name: "小米",value: 4,symbol:"image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",symbolSize: [60, 60],children: [{name: "小米1",symbol: "circle",symbolSize: 20,value: 4,itemStyle: {normal: {color: "#fa6900",label: {show: true,position: "right",},},emphasis: {label: {show: false,},borderWidth: 0,},},},{name: "小米2",value: 4,symbol: "circle",symbolSize: 20,itemStyle: {normal: {label: {show: true,position: "right",formatter: "{b}",},color: "#fa6900",borderWidth: 2,borderColor: "#cc66ff",},emphasis: {borderWidth: 0,},},},{name: "小米3",value: 2,symbol: "circle",symbolSize: 20,itemStyle: {normal: {label: {position: "right",},color: "#fa6900",brushType: "stroke",borderWidth: 1,borderColor: "#999966",},emphasis: {borderWidth: 0,},},},],},{name: "苹果",symbol:"image://http://www.viastreaming.com/images/apple_logo2.png",symbolSize: [60, 60],value: 4,},{name: "华为",symbol:"image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",symbolSize: [60, 60],value: 2,},{name: "联想",symbol:"image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",symbolSize: [60, 60],value: 2,},],},],},],});},},
};
</script>

echarts 树形图基于vue相关推荐

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
vue-element-admin台前端解决方案: 基于 vue 和 element-ui实现
介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型 ...
vue族谱架构_基于 Vue 实现动态家谱图/组织结构图
Vue-Tree-Chart 最近一个项目里有个前端绘制家谱图的需求,大概是下面这个样子: 点击节点会弹出操作菜单,实现增删改查等操作,查阅网上资料发现,现有案例基本都是基于orgchart这个jQu ...
vue部门结构图_基于 Vue 实现动态组织结构图
基于 Vue 实现动态组织结构图最近一个项目里有个前端绘制家谱图的需求, 大概是下面这个样子: 点击节点会弹出操作菜单, 实现增删改查等操作, 查阅网上资料发现, 现有案例基本都是基于 orgcha ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
基于Vue和SpringBoot的电商管理系统的设计与实现
作者主页:Designer 小郑作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
基于Vue的高德离线地图开发--省市县
基于Vue的高德离线地图离线地图优势环境需要下载地图离线资源包本项目功能具体代码离线地图优势高德地图接口,个人每天免费调用次数为500次,渲染速度受网络波动影响,又或许项目部署在局域网, ...

echarts 树形图基于vue

echarts 树形图基于vue相关推荐

最新文章

热门文章

echarts 树形图 基于vue

echarts 树形图 基于vue相关推荐

最新文章

热门文章

echarts 树形图基于vue

echarts 树形图基于vue相关推荐