安装：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=source
this.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=this
return 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);
}
