Vue使用echarts树图

本文使用echarts版本：v5.3.3 项目相关依赖版本信息

参考文档：Documentation - Apache ECharts

自定义传入初始化数据treeData

效果如下图：

①安装echarts：yarn add echarts

②创建树图组件TreeChart.vue：

<template><div class="echarts-container"></div>
</template>
<script>
import * as echarts from 'echarts/core'
import { TooltipComponent } from 'echarts/components'
import { TreeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
var myChart
var option
export default {name: 'TreeChart',props: {treeData: { // 树图数据type: Object,default: () => {return {}}}},mounted () {this.init()// 监听树图节点的点击事件myChart.on('click', (e) => {console.log('e:', e)this.$emit('clickNode', e.data)})},methods: {init () {// console.log('$el:', this.$el)myChart = echarts.init(this.$el)option = {tooltip: { // 提示框浮层设置trigger: 'item',triggerOn: 'mousemove', // 提示框触发条件enterable: true, // 鼠标是否可进入提示框浮层中，默认falseconfine: true, // 是否将tooltip框限制在图表的区域内formatter: function (params) { // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式// console.log('params:', params)return params.marker + params.name + '<br/>' + '$ ' + (params.value || '--')},// valueFormatter: function (value) { // tooltip 中数值显示部分的格式化回调函数//   return '$' + value.toFixed(2)// },backgroundColor: '#FFF', // 提示框浮层的背景颜色borderColor: '#1890FF', // 提示框浮层的边框颜色borderWidth: 1, // 提示框浮层的边框宽borderRadius: 8, // 提示框浮层圆角padding: [6, 8], // 提示框浮层的内边距textStyle: { // 提示框浮层的文本样式color: '#333', // 文字颜色fontWeight: 400, // 字体粗细fontSize: 16, // 字体大小lineHeight: 20, // 行高width: 60, // 文本显示宽度// 文字超出宽度是否截断或者换行；只有配置width时有效overflow: 'breakAll', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行ellipsis: '...'},extraCssText: 'box-shadow: 0 0 9px rgba(0, 0, 0, 0.3);text-align: right;' // 额外添加到浮层的css样式},series: [{type: 'tree',data: [this.treeData],name: '树图',top: '1%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%left: '7%', // 组件离容器左侧的距离bottom: '1%', // 组件离容器下侧的距离right: '20%', // 组件离容器右侧的距离layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种orient: 'LR', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效edgeShape: 'curve', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效roam: false, // 是否开启鼠标缩放或平移，默认falseinitialTreeDepth: 2, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开// symbol: 'arrow', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none// symbolRotate: 270, // 配合arrow图形使用效果较好symbolSize: 16, // 大于0时是圆圈，等于0时不展示，标记的大小itemStyle: { // 树图中每个节点的样式color: '#1890FF', // 节点未展开时的填充色borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色borderWidth: 1, // 描边线宽，为0时无描边borderType: 'dotted', // 描边类型borderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，squareshadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色shadowBlur: 16, // 图形阴影的模糊大小opacity: 1 // 图形透明度},label: { // 每个节点对应的文本标签样式show: true, // 是否显示标签distance: 8, // 文本距离图形元素的距离position: 'left', // 标签位置verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottomalign: 'center', // 文字水平对齐方式，默认自动，left，right，centerfontSize: 16, // 字体大小color: '#333', // 字体颜色backgroundColor: '#F0F5FA', // 文字块的背景颜色borderColor: '#1890FF', // 文字块边框颜色borderWidth: 1, // 文字块边框宽度borderType: 'solid', // 文字块边框描边类型 solid dashed dottedborderRadius: 4, // 文字块的圆角padding: [6, 12], // 文字块内边距shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色shadowBlur: 6, // 文字块的背景阴影长度width: 60,// 文字超出宽度是否截断或者换行；只有配置width时有效overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行ellipsis: '...'},lineStyle: { // 树图边的样式color: 'rgba(0,0,0,.35)', // 树图边的颜色width: 2, // 树图边的宽度curveness: 0.5, // 树图边的曲度shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色shadowBlur: 10 // 图形阴影的模糊大小},emphasis: { // 树图中图形和标签高亮的样式disabled: false, // 是否关闭高亮状态，默认false// 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果focus: 'self', // none不淡出其他图形（默认）；self只聚焦当前高亮的数据图形；series聚焦当前高亮的数据所在系列的所有图形；ancestor聚焦所有祖先节点；descendant聚焦所有子孙节点；relative聚焦所有子孙和祖先节点blurScope: 'coordinateSystem', // 开启focus时，配置淡出的范围，coordinateSystem淡出范围为坐标系（默认）；series淡出范围为系列；global淡出范围为全局itemStyle: { // 该节点的样式color: '#1890FF', // 图形的颜色// borderColor: 'rgba(255, 144, 0, 1)', // 图形的描边颜色borderWidth: 1, // 描边线宽，为0时无描边borderType: 'solid', // 描边类型 solid dashed dottedborderCap: 'square', // 指定线段末端的绘制方式butt方形结束，round圆形结束，squareshadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色shadowBlur: 12, // 图形阴影的模糊大小opacity: 1 // 图形透明度},lineStyle: { // 树图边的样式color: 'rgba(0,0,0,.45)', // 树图边的颜色width: 2, // 树图边的宽度curveness: 0.5, // 树图边的曲度shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色shadowBlur: 6 // 图形阴影的模糊大小},label: { // 高亮标签的文本样式color: '#333',fontWeight: 600}},blur: { // 淡出状态的相关配置，开启emphasis.focus后有效itemStyle: {}, // 节点的样式lineStyle: {}, // 树图边的样式label: {} // 淡出标签的文本样式},leaves: { // 叶子节点的特殊配置label: { // 叶子节点的文本标签样式distance: 8,// color: '#1890FF',position: 'right',verticalAlign: 'middle',align: 'left'},itemStyle: {}, // 叶子节点的样式emphasis: {}, // 叶子节点高亮状态的配置blur: {}, // 叶子节点淡出状态的配置select: {} // 叶子节点选中状态的配置},animation: true, // 是否开启动画expandAndCollapse: true, // 子树折叠和展开的交互，默认打开animationDuration: 550, // 初始动画的时长animationEasing: 'linear', // 初始动画的缓动效果animationDelay: 0, // 初始动画的延迟animationDurationUpdate: 750, // 数据更新动画的时长animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果animationDelayUpdate: 0 // 数据更新动画的延迟}]}myChart.setOption(option)}}
}
</script>
<style lang="less" scoped>
.echarts-container {width: 100%;height: 100%;
}
</style>

③在要使用的页面引入：

<TreeChart :treeData="treeData" @clickNode="getNodeData" />
import TreeChart from '@/components/TreeChart'
components: {TreeChart
},
treeData: {name: 'tree',children: [{name: '比较',value: 29,children: [{name: '折线图',value: 1},{name: '面积图',value: 2},{name: '柱状图',value: 3}]},{name: '趋势趋势趋势趋势趋势趋势趋势趋势趋势趋势',value: 9,children: [{name: '折线图',value: 1},{name: '阶梯图',value: 2},{name: '面积图',value: 3},{name: '堆叠面积图',value: 4}]},{name: '组成'}]
},
getNodeData (data) {console.log('data:', data)
}

Vue使用echarts树图相关推荐

vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图一.预科知识 Vue CLI ECharts 二.资源在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
vue使用echarts可视化图形插件
1.安装echarts: cnpm/npm i echarts -S 2.main.js中 import echarts from 'echart' Vue.prototype.$echa ...
echarts grid的样式位置_vue使用Echarts vue使用Echarts滚动条
最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下 github: loever/vueEchartsg ...
Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件一.下载vendor插件下载 vendor 文件放置项目的 src 目录下链接:https://pan.baidu.com/s/1XYYQ186zo ...
vue项目echarts通过cdn或npm引入
1. vue版本号: 2.6.11 2. vue-cli版本号: 4.5.11 3. 通过CDN的方式引入 3 3.1 .线上链接 1.首先先在public文件夹下的html页面中引入 <scr ...

Vue使用echarts树图

Vue使用echarts树图相关推荐

最新文章

热门文章