<template>
<div>
<!-- 折现面积图 -->
<div id="barEchart" style="height:450px;300px"></div>
<!-- 饼图 -->
<div id="cirEchart" style="height:450px;300px"></div>
</div>
</template>
<script>
import {getEchartApi} from "@/api/xxx" // 请求的api
export default {
data(){
return{
}
},
methods:{
// 请求echarts数据
async getEchartData(){
let params = {} // 参数
let res = await getEchartApi(params)
if(res && res.data && res.code === 200){
// 调取折现面积图方法, 把请过来的折现面积图数据传走,一系列操作可以在方法内处理
this.getBarEchart(res.data.barData)
// 调取饼图方法
this.getCirEchart(res.data.cirData)
}
},
// 折现面积图数据
getBarEchart(data){
let chartDom = document.getElementById("barEchart") // 获取节点
// 再重新获取一下,防止没有获取到节点报错
var timer = setInterval(()=>{
chartDom = document.getElementById("barEchart") // 获取节点
if(!chartDom){
return false
}else{
let myChart = echarts.init(chartDom); // echarts初始化
let unit = '%' // 百分单位
// 先处理传过来的数据,分别取出x轴 y轴的数据放在两个不同数组中 然后赋值
let xData = data.xxxx //x轴数据
let yData = data.xxxxx //y轴数据
let option = {
backgroundColor:'#f1f1f1', // 背景颜色
// 悬浮提示框
tooltip:{
trigger:'axis',
confine:true, // 将tooltip框限制再图表的区域内
axisPointer:{
type:'none', // cross表示指示线，none取消指示线
crossStyle:{color:'#999'} // 指示线样式
},
formatter:('{b}</br>{a}:{c}' + unit),
},
// 图例配置
legend:{
data:['数据获取率'], //多个图例可以设置动态的
icon:'circle', // 图例的icon
left: 'center',
bottom:10
},
// x轴配置
xAxis: {
type: 'category',
splitLine:{show:false},
boundaryGap:false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data:xData, // x轴数据
// 设置x轴样式
triggerEvent:true,
axisLabel:{
rotate:30, // 字体倾斜
textStyle:{
color:'#333',
fontSize:14
},
// 坐标轴与刻度线对齐
// axisTickL:{
// alignWithLabel:true
// }
// 设置x轴显示字体个数
// formatter:function(xData){
// let newAxi
// 后补
// }
}
},
// y轴配置
yAxis: {
type: 'value',
name:'数据获取率',
splitLine:{show:false}, // 取消图标中的横线
min:0,
max:10, // 可以再函数外取出返回数据的最大值
splitNumber:5,
interval:(10)/splitNumber,
position:'left',
axisLine:{
show:true // 控制y轴显示线
},
// 设置y轴字体样式
axisLabel:{
textStyle:{
color:'#333',
fontSize:14
},
// 设置y轴数拼上单位
formatter:('{value} + unit') // y轴拼接单位
}
},
series: [
{ name:'数据获取率',
// data: [120, 200, 150, 80, 70, 110, 130],
data: yData,
type: 'line', // 柱状图时bar 折现图是line
// 设置面积阴影部分
areaStyle:{
normal:{
color:'#f47920'
}
},
// yAxisIndex:1,
// SymbolSize:30, // 配置折现点大小
itemStyle:{
normal:{
// 配置折现点颜色
color:"#f47920",
// 配置折现颜色
lineStyle:{
color:"#f47920"
}
}
}
}
]
};
if(option){
myChart.setOption(option)
}
window.addEventListener('resize',function(){
myChart.resize()
})
}
})
},
// 饼图数据
getCirEchart(data){
// 先处理传来的数据，需要转化成键值对形式的 键必须有name,value
// 比如以下方法的处理
let newArr = data.map((item,i)=>{
return{
name:item.xxxx,
value:item.xxxx,
}
})
// 二次处理数据,获取每条数据的name,组成一个数组,展示图例
let newArrName = []
data.forEach(item => {
newArrName.push(item.name)
});
let chartDom = document.getElementById("cirEchart") // 获取节点
// 再重新获取一下,防止没有获取到节点报错
var timer = setInterval(()=>{
chartDom = document.getElementById("cirEchart") // 获取节点
if(!chartDom){
return false
}else{
let myChart = echarts.init(chartDom); // echarts初始化
let option = {
// backgroundColor:'#f1f1f1', // 背景颜色
title:{
top:0,
text:'年龄区间',
left:'left',
left:50
},
// 悬浮提示框
tooltip:{
show:true,
trigger:'item',
confine:true, // 将tooltip框限制再图表的区域内
axisPointer:{
type:'none', // cross表示指示线，none取消指示线
crossStyle:{color:'#999'} // 指示线样式
},
formatter:function(v){
let text=v.data.name;
let value=v.data.value;
return `\n${text}</br>人次: ${value}`
}
},
// 图例配置
legend:{
data:newArrName, //多个图例可以设置动态的
icon:'circle', // 图例的icon
left: 'center',
bottom:10,
20
},
avoidlabelOverlap:true,
series: [
{
data: newArr,
type: 'pie', // 柱状图时bar 折现图是line
radius:"50%",
center:['50%','50%'],
label:{
normal:{
show:true,
position:'inner',
formatter:function(params){
return params.data.name
},
}
},
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
ShadowColor:'rgba(0,0,0,0.5)'
}
},
itemStyle:{
normal:{
color:function(params){
var colorList = [
'#fa8f42','12bf16'
]
return colorList[params.dataIndex]
}
}
}
}
]
};
if(option){
myChart.setOption(option)
}
window.addEventListener('resize',function(){
myChart.resize()
})
}
})
}
}
}
</script>
<style>
</style>