|
|
@@ -2,12 +2,12 @@
|
|
|
<div id="main" class="echarts-container" />
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { TreeChart } from 'echarts/charts'
|
|
|
+import { MapChart, TreeChart } from 'echarts/charts'
|
|
|
import { TooltipComponent } from 'echarts/components'
|
|
|
import * as echarts from 'echarts/core'
|
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
|
-
|
|
|
-echarts.use([TooltipComponent, TreeChart, CanvasRenderer])
|
|
|
+import { ToolboxComponent, DataZoomSliderComponent } from 'echarts/components'
|
|
|
+echarts.use([TooltipComponent, TreeChart, CanvasRenderer, ToolboxComponent, DataZoomSliderComponent])
|
|
|
// let this.myChart;
|
|
|
let option
|
|
|
|
|
|
@@ -33,10 +33,12 @@ export default {
|
|
|
return {
|
|
|
myChart: null,
|
|
|
centerLoca: [],
|
|
|
- fontSize: 6,
|
|
|
+ fontSize: 7,
|
|
|
chartWidth: 0,
|
|
|
chartHeight: 0,
|
|
|
- center: [this.chartWidth, '50%']
|
|
|
+ center: [this.chartWidth, '50%'],
|
|
|
+ option: '',
|
|
|
+ imgUrl: ''
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -57,7 +59,6 @@ export default {
|
|
|
},
|
|
|
chartWidth: {
|
|
|
handler(newValue, old) {
|
|
|
- console.log(newValue)
|
|
|
if (newValue) {
|
|
|
this.init()
|
|
|
}
|
|
|
@@ -230,9 +231,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ dataZoom: [{}],
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ feature: {
|
|
|
+ dataZoom: {
|
|
|
+
|
|
|
+ },
|
|
|
+ saveAsImage: {
|
|
|
+ show: true,
|
|
|
+ pixelRatio: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- width: that.chartWidth + 'px',
|
|
|
+ width: that.chartWidth,
|
|
|
height: '100%',
|
|
|
type: 'tree',
|
|
|
data: [this.treeData],
|
|
|
@@ -293,7 +307,7 @@ export default {
|
|
|
padding: [5, 6], // 文字块内边距
|
|
|
shadowColor: 'rgba(0,121,221,0.6)', // 文字块的背景阴影颜色
|
|
|
shadowBlur: 6, // 文字块的背景阴影长度
|
|
|
- width: 80,
|
|
|
+ width: 95,
|
|
|
// 文字超出宽度是否截断或者换行；只有配置width时有效
|
|
|
overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
|
|
|
ellipsis: '...',
|
|
|
@@ -376,7 +390,7 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
-
|
|
|
+ this.option = option
|
|
|
option && that.myChart.setOption(option, true)
|
|
|
that.resize()
|
|
|
|
|
|
@@ -387,8 +401,7 @@ export default {
|
|
|
// console.log(currentOption);
|
|
|
if (currentOption.series[0]) {
|
|
|
const zoom = currentOption.series[0].zoom
|
|
|
- // that.fontSize = 10 * zoom
|
|
|
- currentOption.textStyle.fontSize = 10 * zoom
|
|
|
+ currentOption.textStyle.fontSize = 8 * zoom
|
|
|
currentOption.series[0].label.fontSize = 8 * zoom
|
|
|
currentOption.series[0].label.width = 110 * zoom
|
|
|
currentOption.series[0].label.distance = 18 * zoom
|
|
|
@@ -396,23 +409,53 @@ export default {
|
|
|
option && that.myChart.setOption(currentOption)
|
|
|
}
|
|
|
})
|
|
|
+ this.doGlobalTreeChart()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.imgUrl = that.myChart.getDataURL()
|
|
|
+ // console.log(this.imgUrl)
|
|
|
+ // this.Export()
|
|
|
+ }, 5000)
|
|
|
+ },
|
|
|
+ Export() {
|
|
|
+ var img = new Image()
|
|
|
+ // pieMyChart1 要导出的图表
|
|
|
+ img.src = this.myChart.getDataURL({
|
|
|
+ type: 'png',
|
|
|
+ pixelRatio: 1, // 放大2倍
|
|
|
+ backgroundColor: '#fff'
|
|
|
+ })
|
|
|
+ img.onload = function() {
|
|
|
+ var canvas = document.createElement('canvas')
|
|
|
+ canvas.width = this.myChart.option.series[0].width
|
|
|
+ canvas.height = img.height
|
|
|
+ var ctx = canvas.getContext('2d')
|
|
|
+ ctx.drawImage(img, 0, 0)
|
|
|
+ var dataURL = canvas.toDataURL('image/png')
|
|
|
+ var a = document.createElement('a')
|
|
|
+ var event = new MouseEvent('click')
|
|
|
+ a.download = '图片.png' || '下载图片名称'
|
|
|
+ // 将生成的URL设置为a.href属性
|
|
|
+ a.href = dataURL
|
|
|
+ // 触发a的单击事件
|
|
|
+ a.dispatchEvent(event)
|
|
|
+ a.remove()
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
resize() {
|
|
|
const elesArr = Array.from(
|
|
|
new Set(this.myChart._chartsViews[0]._data._graphicEls)
|
|
|
)
|
|
|
- console.log(elesArr.length)
|
|
|
+ // console.log(elesArr.length)
|
|
|
const dep = this.myChart._chartsViews[0]._data.tree.root.height // 获取树高
|
|
|
- console.log(dep)
|
|
|
+ // console.log(dep)
|
|
|
const layer_height = 90 // 层级之间的高度
|
|
|
const currentHeight = layer_height * (dep + 1) || layer_height
|
|
|
const newHeight = Math.max(currentHeight, layer_height)
|
|
|
this.chartHeight = newHeight + 'px'
|
|
|
- const layer_width = 90 // 兄弟节点之间的距离
|
|
|
+ const layer_width = 155 // 兄弟节点之间的距离
|
|
|
const currentWidth = layer_width * (elesArr.length - 1) || layer_width
|
|
|
const newWidth = Math.max(currentWidth, layer_width)
|
|
|
- console.log(newWidth)
|
|
|
+ // console.log(newWidth)
|
|
|
if (newWidth < 200) {
|
|
|
this.center[0] = '-70%'
|
|
|
this.center[1] = (dep * 2) + '0%'
|
|
|
@@ -442,8 +485,11 @@ export default {
|
|
|
// 调整tree显示
|
|
|
adjustTreeView() {
|
|
|
var zr = this.myChart.getZr()
|
|
|
+ console.log(zr)
|
|
|
var domWidth = zr.painter.getWidth()
|
|
|
var treeWidth = this.getTreeWidth(zr)
|
|
|
+ console.log(treeWidth)
|
|
|
+ console.log(domWidth)
|
|
|
if (treeWidth <= domWidth) return
|
|
|
},
|
|
|
|
|
|
@@ -479,8 +525,9 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.echarts-container {
|
|
|
- width: 100%;
|
|
|
+ width: auto !important;
|
|
|
height: calc(100vh - 105px);
|
|
|
+ overflow-x: auto;
|
|
|
}
|
|
|
</style>
|
|
|
|
hongkai.wu