vue中使用echarts的树图怎样自定义图片

本文介绍在Vue项目中如何利用ECharts库创建树图,并详细阐述自定义节点图片的方法,帮助开发者实现个性化图表设计。
摘要由CSDN通过智能技术生成

在vue中使用echarts的树图怎样自定义图片

export default{
 	data(){
   		return{
			imgs:require("../../assets/images/imgs.png"),//变量保存imgs地址
			imgsBase64:' ',//定义一个变量保存图片的base64码
			imgs1:require("../../assets/images/imgs1.png"),
			imgs1Base64:' ',
			imgs2:require("../../assets/images/imgs2.png"),
			imgs2Base64:' ',
			treeData:[],	       	
			 }
	    },
 	mounted(){
     this.getCharts();
     this.getBase64()
	},
	methods:{
		getCharts(){
			//从后台获取数据传给画图的方法
			this.treeData=[]
			let json={}
			json.symbol="image://"+`${this.imgsBase64}`
			json.symbolSize=[130,80]
			json.children=[]
			this.treeData.push(json)
			this.$nextTick(()=>{
					this.drawCharts(this.treeData);
			})
		} ,
		drawCharts(data){
			let that=this;
			that.$echarts.init(document.getElementById('myChart')).clear();
			that.myChart=echarts.init(document.getElementById('myChar
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 使用 echarts 树图,你需要先安装 echarts。 可以使用 npm 安装 echarts: ``` npm install echarts --save ``` 安装完成后,你可以在 Vue 组件引入 echarts: ```javascript import echarts from 'echarts' ``` 然后,在 Vue 使用 echarts 树图,你可以按照以下步骤: 1. 在模板添加一个 div 容器,用于显示 echarts 树图: ```html <template> <div ref="chart" style="width: 100%; height: 400px;"></div> </template> ``` 2. 在 Vue 组件的 mounted 钩子初始化 echarts 实例,并配置树图的数据和样式: ```javascript mounted() { // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(this.$refs.chart); // 配置树图的数据和样式 const option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'tree', data: [ { name: '节点1', children: [ { name: '节点1.1', children: [ { name: '节点1.1.1' }, { name: '节点1.1.2' } ] }, { name: '节点1.2', children: [ { name: '节点1.2.1' } ] } ] } ], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 7, label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 9 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); } ``` 这样,你就可以在 Vue 使用 echarts 树图了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值