Echarts+VUE饼图的使用（基础使用、多个饼图功能、单组饼图对应颜色使用）

安装：npm install echarts --save
配置:main.js

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

一、基础饼图（直接拷贝就能出效果）

 <div class="big-box" ref="demoEhart"></div>

mounted() {this.demoChart()
}

demoChart(){var myChart = this.$echarts.init(this.$refs.demoEhart);var option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: "horizontal",icon: "circle",bottom: 0,x: "center",textStyle: {color: "#fff"}},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],}]
};myChart.setOption(option);
}

二、饼图（多组动态显示饼图数量的数据）

//获取到的数据
ceshilist:[{name:'/dev',free:30,used:520},{name:'/d456',free:30,used:520},{name:'/d88',free:30,used:520},{name:'/d78978',free:30,used:520},{name:'/sdasd8',free:30,used:520},{name:'/d8sad456asd8',free:30,used:520},{name:'/sasss8',free:30,used:520},{name:'/dwqewunn8',free:30,used:520},{name:'/dev336',free:30,used:520}],
//最终需要的数据格式
data:[
[{value:ceshilist[i].free,name:'可用量',typename:ceshilist[i].mountPath},
{value:ret[i].used,name:'已用量',typename:ret[i].fs_type_name}],
[{value:ceshilist[i].free,name:'可用量',typename:ceshilist[i].mountPath},
{value:ret[i].used,name:'已用量',typename:ret[i].fs_type_name}]
]

步骤：

 <div class="big-box" ref="pieEhart"></div>

  data() {return {source:[],setData：new Map//实时刷新map对象}}

mounted() {this.pieEhartclick()
}

getDiskData(ret){let source=[]//将获取到的数据变成以下数据格式for (let i = 0; i < ret.length; i++) {source.push([{value:ret[i].free,name:'可用量',typename:ret[i].mountPath},{value:ret[i].used,name:'已用量',typename:ret[i].fs_type_name}])}this.source=sourcethis.pieEhartclick()//重新渲染图表方法，不是实时数据可以不加此代码
}

 // 磁盘饼图pieEhartclick(){var myChart = this.$echarts.init(this.$refs.pieEhart);var datas=this.source// let that = this;var option = {{text:'磁盘使用情况',subtext:'将鼠标移动对应饼图上以查看对应信息'},//每个饼图对应的标题名称title:datas.map(function(data,idx){var numcol=4  //定义列var numrow=Math.ceil(datas.length/numcol) //定义行 有多少条数据除以列就是行数var top=Math.floor(idx/numcol)*100/numrow+10//距离上面的距离var left=(idx%numcol)*100/numcol+12//距离左边的距离return{subtext:data[0].typename,top:top+'%',left:left+'%',textAlign:'center',subtextStyle:{color:'#ffffff'//字体颜色}}}),legend: {},color:["#3F60C6","#9A60B4"],tooltip: {trigger:'item',formatter:'{b}:{c}({d}%)'//鼠标悬浮显示数据},series:datas.map(function(data,idx){var numcol=4 //定义列var numrow=Math.ceil(datas.length/numcol) //定义行 有多少条数据除以列就是行数var top=Math.floor(idx/numcol)*100/numrow//距离上面的距离var left=(idx%numcol)*100/numcol//距离左边的距离return{type:'pie',// radius:[20,60],top:top+'%',left:left+'%',height:100/numrow+'%',width:100/numcol+'%',itemStyle:{// borderColor:'#fff',// borderWidth:1,// color:function(data,idx){//   if(data[idx].value>95){//     return 'red'//   }// }},label:{show:false},data:data}}),};myChart.setOption(option);},

三、饼图（单组数据）

扩展功能：一般自定义颜色是按照数据的顺序依次对应，现在想要指定字段对应某个颜色

 <div class="big-box" ref="oneEhart"></div>

cdata: {xData: ["水文", "森林", "气象", "地质",  "其他"],seriesData: [{ value: 35, name: "水文" ,itemStyle: {color:"#9fe6b8"}},{ value: 15, name: "森林" },{ value: 15, name: "气象" },{ value: 25, name: "地质" },{ value: 40, name: "其他" }]},
coloritem:{"森林":"#9fe6b8","气象":"#0099ff","水文":"#32c5e9","地质":"#e7bcf3","其他":"#fb7293"}

mounted() {this.getOnechart()
}

 methods: {getBar(){this.$axios.post('******').then((res)=>{let items=res.data //接收到的数据this.cdata.seriesData=this.getData(items) //变成想要的数据格式方法console.log(this.cdata.seriesData)})},//对应颜色处理getData(data) {let that=thisreturn data.map(function (item) {return {value: item.value,name: item.name,itemStyle: {color: that.coloritem[item.name] // 使用颜色映射表中对应的颜色}};});}}

getOnechart(){
var myChart = this.$echarts.init(this.$refs.oneEhart);
let newdata=this.cdata
var option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item',formatter: "{c} ({d}%)"},toolbox: {show: true},calculable: true,//默认方块显示颜色标签// legend: {// orient: 'vertical',// left: 'left'//},  legend: {//圆圈orient: "horizontal",icon: "circle",bottom: 0,x: "center",data: newData.xData,textStyle: {color: "#fff"}},       series: [{name: 'Access From',type: 'pie',radius: '50%',label: {//echarts饼图内部显示百分比设置formatter: "{b}\n{d}%",lineHeight: 15,//  color: "#ffffff", //颜色fontSize: 12 //字体大小},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],data: newData.seriesData}]
};myChart.setOption(option);
}