phontoImage(){   //渲染饼图调用的方法

var echarts = require('echarts');

var elementResizeDetectorMaker = require("element-resize-detector");//引入监听dom变化的组件

var erd = elementResizeDetectorMaker();

var worldMapContainer = document.getElementById('main4'); //获取 图标容器dom元素

var that = this;

//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

var resizeWorldMapContainer = function () {

worldMapContainer.style.width = worldMapContainer.scrollWidth+'px';

worldMapContainer.style.height = worldMapContainer.clientHeight+'px';

};

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(worldMapContainer);

//var myChart = echarts.init(document.getElementById('main1'));

myChart.on('click',function(params){

that.open(params);

});

myChart.setOption({

title:[

{

text: this.data4.name, //环形饼图中间部分的名称

//subtext:rentalVal,

textStyle:{  //中间部分字体样式

fontSize:14,

color:"black"

},

subtextStyle: { // 中间下边一行字体样式

fontSize:14,

color: 'black'

},

textAlign:"center",

x: '43%',   //字体在饼图中的位置

y: '44%',

}],

tooltip : {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

type: 'scroll',

orient: 'vertical',

right: 10,

top: 20,

bottom: 20,

data: this.data4.names,

},

series : [

{

name: this.data4.name,

type: 'pie',

radius : ['40%', '60%'], //设置一个区间 就是环形饼状图

center: ['45%', '50%'],

data:this.data4.values,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

},

normal:{

color:function(params) {

//自定义颜色

var colorList =['#7c277d','#7460ee', '#FC3468', '#1e88e5', '#ffb22b', '#fc4b6c', '#708069', '#26c6da','#fcc525', '#8d6658'];

return colorList[params.dataIndex]

}

}

}

}

]

});

erd.listenTo(worldMapContainer, function (element) { //执行监听

that.$nextTick(function () {

myChart.resize(); //变化重新渲染饼图

})

})

},