Echarts+VUE+Element学习使用记录_vue中饼图的数据不叫name 和value可以不-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44699844/article/details/100141637

本文记录了使用Echarts在Vue项目中如何设置图表的点击事件，以及如何自定义饼图各区域的颜色，通过Element UI进行界面交互优化，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts图表的点击事件

punchChart.on('click', function(param) {
	
}
Echarts自定义鼠标悬浮显示数据和点击时间

var punchChart = null;
  	  	var punchOp = {
  					backgroundColor: '#ffffff',
  					title: {
  						text: "",
  						subtext: ""
  					},
  					legend: {
  					},
  					 toolbox: {
        				feature: {
            				saveAsImage: {}
        				}
    				},
  					tooltip: {
  						show: true,
  						trigger: "axis",
  						axisPointer: {
  							type: "shadow"
  						},
  						/*
						自定义鼠标悬浮显示数据，可以和 analysis配合使用
						*/
  						
  						formatter : function(params){  
  							//console.log(params); 打印后看控制台输出的数据
  							
  							var res = '';
  							res += '数量:'+params[0].value+'</br>'+'及时整改率:'+params[0].data.datas[0];	
  							return res;
  							
						}
						
  					},
  					
  					xAxis: {
  						type: "category",
  						data: [],
  						name: "缺失种类",
  						axisTick: {
  							show: false
  						},
  						axisLabel: {
							rotate: 45
						}
  					},
  					yAxis: {
  						type: "value",
  						minInterval: 1,
  						splitLine: {
  							show: false
  						},
  						name: "数量 "
  					},
  					series: [{
  						
  						data: [],
  						type: 'bar',
  						barMaxWidth: 30,
  						label: {
  							normal: {
  								show: true,
  								position: 'top'
  							}
  						}
  					}]
  				};
var vm = new Vue({
  		el: "#app",
  		data: {
  		},
  		created: function(){
  			
  		},
  		mounted: function(){
  			punchChart = echarts.init(document.getElementById("chartdiv"));
  			punchChart.on('click', function(param) {	
  				console.log(param); //打印log，控制台上会有想要的数据
  				var name = param.name；
  				var postdata = {};
  				//判断
  			
  					$.ajax({
  					url: "",
  					type: "POST",
  					data: postdata,
  					success: function(data){
  					vm.dialogVisible = true;
  					vm.gridData = data;	
  					}
  				});
  				
  				
			});
  		},
  		methods: {
  			getContractorAnysizeReport: function(){
  				var postdata = {};
  				$.ajax({
  					url: "",
  					type: "POST",
  					data: postdata,
  					complete: function(){
  						vm.loading = false;
  					},
  					success: function(data){
  						vm.data = analysis (data)；//在执行ajax请求时，在后台把所有的数据传给前台，
  																	//	前台通过analysis解析出Echarts所需要的数据，可以在自定义鼠标悬浮显示数据
  																	//使用
  						punchChart.setOption(punchOp);
  					}
  				});
  				
  			}
  		}
  	});

/* 用来解析后台返回的数据，得到Echarts需要的数据*/
function analysis (data){
	var end_obj = [];
	for(i in data){
		var obj = {name:'', datas:[]};
		obj.value = data[i]['cToutal'];
		obj.datas[0] = data[i]['XX'];
		end_obj.push(obj);	
	}
	 return end_obj;
}
-----------------------------------------------------------------------------------------------------
Echarts饼图+柱状图
var punchChart = null;
  	  	var punchOp = {
  					backgroundColor: '#ffffff',	
  					grid: {
  						bottom: 200,
  						left: "8%",  //图形位置设置
  						right: "40%"
  					},
  					
  					title: {
  						text: "",
  						subtext: ""
  					},
  					legend: {
  						type: "scroll",
  						orient: "horizontal"
  						
  					},
  					 toolbox: {
        				feature: {
            				
        				}
    				},
  					tooltip: {
  						show: true,
  						trigger: "axis",
  						axisPointer: {
  							type: "shadow"
  						}		
  						
  					},
  					xAxis: {
  						type: "category",
  						data: [],
  						name: "",
  						axisTick: {
  							show: false
  						},
  						axisLabel: {
							rotate: 45
						}
  					},
  					yAxis: {
  						type: "value",
  						minInterval: 1,
  						splitLine: {
  							show: false
  						},
  						name: " "
  					},
  					series: [{
  						
  						data: [],
  						type: 'bar',
  						barMaxWidth: 30,
  						label: {
  							normal: {
  								show: true,
  								position: 'top',
  							}
  						},
  						itemStyle:{
  							color:'#9BBB59'；//柱状图颜色控制
  						}
  					},
  					{
			            type: 'pie',
			            radius : '45%',
			            center: ['80%', '40%'],//饼图位置控制
			            data: [],
			            label:{
			            	normal:{
			            		 formatter:'占比:{d}%\n{b}:{c}' //在不同的图中，a,b,c,d 所代表的不一样
			            	}
			            
			            }
			        },	
  					
					]
  				};

在这里插入图片描述
自定义饼图每一个区域的颜色

饼状图数据
data:{
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}}
}
为每一个区域设置itemStyle