echarts柱状图与环形饼状图配置，且图例展示为标题+数据

echarts柱状图与环形饼状图配置，且图例展示为标题+数据

柱状图

配置代码：
下面展示一些 内联代码片。

setEchars() {
	var myChart = echarts.init(document.getElementById("qiye-echarts"));
			option = {
					legend: {
					  textStyle:{
						  color: ['#3C77FB', '#FFC425'],//图例文字样式
					  }
					},
					tooltip: {},
					dataset: {
					source: [
						['product', '企业数量', '企业人数'],
						['云光', 85.8, 93.7],
						['海门', 73.4, 55.1],
						['海丰', 65.2, 82.5],
						['白鱼', 53.9, 39.1],
						['里仁', 53.9, 39.1],
						['山冲', 53.9, 39.1]]
					},
					xAxis: {//X轴
					 type: 'category',
					 axisLabel:{
					 textStyle:{
						fontSize:18,
						color: '#fff'
					 },
					},
					splitLine:false,//是否展示分割线
						interval:0,
					},
					yAxis: {
						splitLine:false,
						show:false,
					},
					series: [{
					 type: 'bar',
					 barWidth:8 
				    }, {
				    type: 'bar',
				    barWidth:8//柱状图宽度
				   }],
					color: ['#3C77FB', '#FFC425'],//柱形颜色
						};
			myChart.setOption(option, true);
			},

环形饼状图，环形中间显示图片

setEchars() {
	var myChart = echarts.init(document.getElementById("qiye-echarts"));
	var data=[{
	    value: 484,
		  name: '租赁'
			},{
			value: 300,
			name: '闲置'
			},{
			value: 580,
			name: '自有'
			}]
	option = {
		graphic: { //环形饼图中间添加图片
		type: "image",
		style: {//图片样式
			image: 'images/icon/house.png',
			width: 80,
			height: 80,
			},
			left: '20%', //图片位置
			top: '22%',
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {//图例
			top: '20%',
			right: '10%',
			orient: 'vertical',//图例垂直展示，水平展示则删掉此行代码
			textStyle:{ //图例文字样式
				color: '#ffffff',
				fontSize: '18',
			},
			icon:'circle', //图例形状，此处用圆点展示，默认为矩形
			itemGap:26,//图例间隔
			formatter:function(name){//循环数组，图例展示为名称：数据的形式
				var target;
				for (var i = 0; i < data.length; i++) {
					if(data[i].name === name){
						target = name+"："+data[i].value;
						}
					}
					return target;
				}
			},
			series: [{
				type: 'pie',//饼图
				radius: ['40%', '50%'],//内外圆的半径，用于调整圆环宽度
				center:['30%','35%'],//饼图距离容器上下左右边界的调整
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#073370',
					borderWidth: 5
				},
				label: {//标签
					show: false,
					position: 'left'
				},
				emphasis: {//鼠标移入时的标签样式
					label: {
						show: false,
						fontSize: '16',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: data,
				color: ['#DE2C2C', '#E38402', '#03F1FE'],//自定义饼图颜色，顺序为顺时针
			}]
		};
		myChart.setOption(option, true);
	},

效果图

echarts图表的图例展示为标题+数据

legend下加入此代码

formatter:function(name){//循环数组，图例展示为名称：数据的形式
				var target;
				for (var i = 0; i < data.length; i++) {
					if(data[i].name === name){
						target = name+"："+data[i].value;
						}
					}
					return target;
				}

效果图