echarts自定义图片显示比例

最新推荐文章于 2024-07-24 11:13:53 发布

雨沫相与

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量85

点赞数

文章标签： echarts 前端 java

本文链接：https://blog.csdn.net/u011933026/article/details/134186143

版权

"echarts": "^5.2.0",

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChartMale" />
</template>

<script>
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '15vw'
			},
			height: {
				type: String,
				default: '5vh'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				timer: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			}
		},
		mounted() {
			this.initChart();
		},
		beforeDestroy() {},
		methods: {
			initChart() {
				var myChart = echarts.init(document.getElementById('myChartMale'));
				const maleBlue ='image://'+ require('@/assets/sjbig/male_blue.png');//自定义图片
				const maleGray ='image://'+ require('@/assets/sjbig/male_white.png');
				var maxData = 100;
				var option = {
					tooltip: {},
					  xAxis: {
					    show:false,
					    max: maxData,
					    splitLine: { show: false },
					    offset: 10,
					    axisLine: {
					      lineStyle: {
					        color: '#999'
					      }
					    },
					    axisLabel: {
					      margin: 10
					    }
					  },
					  yAxis: {
					    data: [''],
					    inverse: true,
					    axisTick: { show: false },
					    axisLine: { show: false },
					   
					  },
					  grid: {
					    // top: 'center',
						
					    left: 0,
					    right: 0
					  },
					  series: [
					    {
					      // current data
					      type: 'pictorialBar',
					      symbol: maleBlue,
					      symbolRepeat: 'fixed',
					      symbolMargin: '0',
					      symbolClip: true,
					      symbolSize: 35,
					      data: [70],
					      z: 10
					    },
					    {
					      // full data
					      type: 'pictorialBar',
					      // itemStyle: {
					      //   opacity: 0.1
					      // },
					      label: {
					        show: false,
					      },
					      animationDuration: 0,
					      symbolRepeat: 'fixed',
					      symbolMargin: '0',
					      symbol: maleGray,
					      symbolSize: 35,
					      symbolBoundingData: maxData,
					      data: [30],
					      z: 5
					    }
					  ]
				};

				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize()
				})
				// window.addEventListener('resize', myChart.resize);


			},


		}
	}
</script>