echarts画条形图和扇形图

引入： import * as echarts from '@/components/echarts/echarts.simple.min.js'; import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

一、饼状（扇形）图
1.template

<mpvue-echarts class="ec-canvas" @onInit="pieInit" canvasId="pie" ref="pieChart" style="width: 700upx;height: 700upx;"/>

2.script中data外面

let pieOption = {
		backgroundColor: 'white',
		 tooltip: {
		    formatter: "{b}: {c} ",
			textStyle: {
				color: '#000000',
			}
		},
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: []   //上面的提示
	    },
		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
		series: [{
			type: 'pie',
			center: ['50%', '50%'],
			radius: [0, '60%'],
			data: [],    //获取的数据
			label: {            //饼图图形上的文本标签
	           normal: {
	               show: true,
	               position: 'inside',//数据在中间显示
	               formatter:'{a|{d}%}',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
			        rich: {
						a:{
							color:'#fff',
							 fontSize: 14, 
						}
						}
			   }
	       },
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};

3.method中
（1）.请求的数值赋值

if (that.YesSett) {
			  			 that.Yesname=[];
			  			 that.Yesvalue=[];
			  			for (var i = 0; i < that.YesSett.length; i++) {
			  				that.Yesname.push(that.YesSett[i].ChnName);
			  				that.Yesvalue.push(parseFloat(that.YesSett[i].Amount));
			  			}
			  			pieOption.series[0].data=[];
			  			for (var i = 0; i < that.YesSett.length; i++) {
			  				pieOption.series[0].data.push({
			  					value: that.Yesvalue[i],
			  					name: that.Yesname[i]
			  				});
			  			}
			  			pieOption.legend.data=that.Yesname;
			  		}	

（2）画图

pieInit(e) {//饼状图
			let { width, height} = e ;
			let canvas = this.$refs.pieChart.canvas 
			echarts.setCanvasCreator(() => canvas);
			let pieChart = echarts.init(canvas, null, {
				width: width,
				height: height
			})
			canvas.setChart(pieChart)
		
			pieChart.setOption(pieOption)
			this.$refs.pieChart.setChart(pieChart)
		},

二、条形图
1.template

	<mpvue-echarts  class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" style="width: 700upx;height: 700upx;" />

2.script中data外面

let lineOption = {
		tooltip: {
			trigger: 'axis',
			textStyle: {
				color: '#000000',
				fontSize: 20,
			},
		},
		legend: {
			//orient: 'vertical',
			data: ['业绩', '占比'],
			itemGap: 50,

		},
		backgroundColor: 'white',
		animation: false,
		color: ['#32C5E9', '#F0AD4E', '#67E0E3', '#91F2DE', '#FFDB5C'],
		label: {
			normal: {
				show: true,
				position: 'inside',
			}
		},
		calculable: false,
		xAxis: [{
			axisLabel: { //坐标轴刻度标签的相关设置。
				interval: 0,
				rotate: "45"
			},
			type: 'category',
			data: [] //'1号技师', '3号技师', '2号技师', '4号技师', '5号技师', '7号技师', '9号技师', '6号技师', '8号技师', '10号技师', 
		}],
		yAxis: [{type: 'value',axisLabel: {formatter: '{value} '}},
				    {type: 'value', min: 0,max: 100,interval: 20,axisLabel: {formatter: '{value} %'} 
				}],
		series: [{
			name: '业绩',
			type: 'bar',
			data: []//90, 80, 70, 60, 50, 40, 30, 20, 10, 5
		}, {
			name: '占比',
			type: 'line',
		    yAxisIndex: 1,
			data: [] //90, 80, 70, 60, 50, 40, 30, 20, 10, 5
		}]
	};

3.method中
（1）.请求的数值赋值

if(res.data.value){
							that.Toprank = res.data.value;
								for (var i = 0; i < that.Toprank.length; i++) {
									xmx.push(that.Toprank[i].TechName);
									xmy.push(parseFloat(that.Toprank[i].Sum));
									xmyy.push(parseFloat(that.Toprank[i].Zhanbi));
								}
								lineOption.xAxis[0].data = xmx;
								for (var i = 0; i < that.Toprank.length; i++) {
									lineOption.series[0].data = xmy;
									 lineOption.series[1].data = xmyy;
								}
								console.log(lineOption);
								this.$refs.lineChart.init();//当重新渲染数据时，需加上
						}else{
							lineOption.xAxis[0].data = [];
							lineOption.series[0].data =[];
							lineOption.series[1].data =[]
							this.$refs.lineChart.init();
						}

（2）画图

	lineInit(e) { 
				let {width, height} = e ;
				let canvas = this.$refs.lineChart.canvas 
				echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)
				lineChart.setOption(lineOption)
				this.$refs.lineChart.setChart(lineChart)
			
			},

使用mpvue-echarts时遇到的问题
App报表出现闪烁数据不准确问题（由于canvasId相同导致）
解决方法：将canvasId更为为唯一值
当选择标签栏不切换的问题（具体什么原因导致，暂时无法查询）
解决办法：切换页签时再次调用相关接口并初始化（进入页面时onload不能初始化）
浏览器上不显示，app、小程序显示图形时
解决办法：echarts.simple.min.js中function(t)更换成function(t, window, document)