4.15

饼状图

mounted(){

var myChart = echarts.init(this.$refs.main);

this.lineList = JSON.parse(JSON.stringify(this.reportsList));

/* 设置标题 */

this.lineList.title={ text:'华东数据饼图' };

/* 展示触摸提示 */

this.lineList.tooltip={ /* a表示系列名
表示换行 b表示数据名 c表示数值 b表示所占的百分比*/ formatter: '{a}
{b} : {c} ({d}%)>' }

    /* 设置图例距离 */
  this.lineList.legend.top = '8%';
  this.lineList.legend.left = '0';
 /* 只显示华东的饼图数据 */
this.lineList.series.splice(1)
/* 先把图表的类型都改成饼图 */
this.lineList.series[0].type="pie";
/* 把图例中除了华东的图例都删掉,只是为了去掉提示，可以不删除 */
this.lineList.legend.data.splice(1)
/* 拿到时间集合，用来展示饼图的name值 */
let nameList=this.lineList.xAxis[0].data;
/* 拿到数据，用来展示饼图的value值 */
let valueList=this.lineList.series[0].data;

/* let data=[{
  name:"2017-12-27",
  value:2999
}] */
let newArr = [];
/* 下面的操作是为了把两个数组整合上面的格式 */
nameList.forEach((r,i)=>{
 let obj = {
   name:r,
   /* 因为两个数组的长度是一样的，
   索引对应的值也是预约的，key
   和 value 的值是相对应，所以直接使用如下方式取值*/
   value:valueList[i]
 }
 /* 把组装好的队形塞到新数组中 */
  newArr.push(obj)
 
})
/* 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 */
console.log(newArr);
this.lineList.series[0].data=newArr

/* 设置饼图的中心的圆心的大小和圆的大小 */
this.lineList.series[0].radius=['30','60'];
/* 设置元的上下左右的距离 */
/* this.lineList.series[0].center=['60','60'] */
/* 把图的形状设置成玫瑰型 */
this.lineList.series[0].roseType='area';
/* 给圆设置圆角 */
this.lineList.series[0].itemStyle={
  borderRadius:5
}

/* 把x轴隐藏 */
this.lineList.xAxis={
  show:false
}
 /* 把y轴隐藏 */
this.lineList.yAxis={
  show:false
}

/* 这一段是让第一个变成折线图 */
// this.lineList.series[0].type='line'

myChart.setOption(this.lineList);
window.PieChart= myChart

}, }