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

在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来画自定义折柱混合图,可以按照以下步骤进行: 1. 安装echartsvue项目安装echarts,可以使用npm命令: ``` npm install echarts --save ``` 2. 引入echarts 在需要使用echarts的组件,引入echarts: ``` import echarts from 'echarts' ``` 3. 定义图表容器 在模板定义一个div容器,用于显示echarts图表: ``` <template> <div id="myChart" style="width: 100%; height: 400px;"></div> </template> ``` 4. 创建图表实例 在组件的mounted生命周期,创建echarts实例并绑定到容器上: ``` mounted() { // 初始化echarts实例 const myChart = echarts.init(document.getElementById('myChart')) // 绑定数据到echarts实例 myChart.setOption({...}) } ``` 5. 设置图表数据 在echarts实例,设置图表相关的数据和配置,如下所示: ``` // 定义x轴和y轴的数据 const xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] const yAxisData1 = [120, 200, 150, 80, 70, 110, 130] const yAxisData2 = [200, 180, 160, 100, 90, 120, 140] // 定义折线图和柱状图的配置 const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { top: '10%', left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: xAxisData, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: 'yAxis1', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: 'yAxis2', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } } ], series: [ { name: 'yAxis1', type: 'bar', data: yAxisData1 }, { name: 'yAxis2', type: 'line', yAxisIndex: 1, data: yAxisData2 } ] } // 将配置绑定到echarts实例 myChart.setOption(option) ``` 6. 效果预览 最终的效果如下所示: ![自定义折柱混合图](https://i.loli.net/2021/08/18/8zjvZbLJy7PWGh5.png)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值