Min5203
4 years ago
6 changed files with 357 additions and 61 deletions
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<div id="barEcharts" style="width:370px;height:300px"></div> |
|||
</template> |
|||
<script setup> |
|||
import{onMounted} from 'vue'; |
|||
|
|||
onMounted(()=>{ |
|||
const myChart = echarts.init(document.getElementById('barEcharts')); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// Use axis to trigger tooltip |
|||
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' |
|||
}, |
|||
}, |
|||
legend: { |
|||
icon: 'circle', |
|||
orient: 'horizontal', |
|||
itemGap: 40, |
|||
itemWidth: 14, |
|||
itemHeight: 14, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#858585', |
|||
fontWeight: 400, |
|||
padding: [4, 0, 0, 0], |
|||
}, |
|||
data: ['A', 'B', 'P', 'E'], |
|||
}, |
|||
color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'], |
|||
grid: { |
|||
left: '3%', |
|||
right: '0', |
|||
bottom: '5%', |
|||
containLabel: false, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: '#F3F4F5', |
|||
}, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'E', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: function (e) { |
|||
return e.value ? e.seriesName : ''; |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [0, 0, 4, 4], |
|||
}, |
|||
barWidth: 20, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390], |
|||
}, |
|||
{ |
|||
name: 'P', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330], |
|||
}, |
|||
{ |
|||
name: 'B', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330], |
|||
}, |
|||
{ |
|||
name: 'A', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
myChart.setOption(option); |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<!-- <div id="yield-chart"></div> --> |
|||
<div :id="props.id" style="width:400px;height:260px"></div> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { onMounted} from 'vue'; |
|||
const props = defineProps({ id: { type: Object, default: () => {} } }); |
|||
|
|||
onMounted(()=>{ |
|||
if(props.id){ |
|||
var myChart = echarts.init(document.getElementById(props.id)); |
|||
} |
|||
|
|||
// |
|||
const data = [ |
|||
{ |
|||
name: '办公费', |
|||
value: 36, |
|||
rate: 12 |
|||
}, |
|||
{ |
|||
name: '车辆费用', |
|||
value: 20, |
|||
rate: 20 |
|||
}, |
|||
{ |
|||
name: '差旅费', |
|||
value: 15, |
|||
rate: -40 |
|||
}, |
|||
{ |
|||
name: '租赁费', |
|||
value: 10, |
|||
rate: -15 |
|||
}, |
|||
{ |
|||
name: '其他', |
|||
value: 9, |
|||
rate: 12 |
|||
}, |
|||
]; |
|||
const option = { |
|||
title: { |
|||
text: 100, |
|||
textStyle:{ |
|||
fontSize:17, |
|||
color:"black" |
|||
}, |
|||
textAlign:"center", |
|||
x: '24%', |
|||
y: '35%', |
|||
}, |
|||
legend: { |
|||
type: 'plain', |
|||
icon: 'circle', |
|||
orient: 'vertical', |
|||
left: '55%', |
|||
top: '15%', |
|||
align: 'left', |
|||
itemGap: 15, |
|||
itemWidth: 10, // 设置宽度 |
|||
itemHeight: 10, // 设置高度 |
|||
symbolKeepAspect: false, |
|||
textStyle: { |
|||
color: '#000', |
|||
rich: { |
|||
name: { |
|||
verticalAlign: 'right', |
|||
align: 'left', |
|||
width: 50, |
|||
fontSize: 12 |
|||
}, |
|||
value: { |
|||
align: 'left', |
|||
width: 40, |
|||
fontSize: 12 |
|||
}, |
|||
count: { |
|||
align: 'left', |
|||
width: 80, |
|||
fontSize: 12 |
|||
}, |
|||
} |
|||
}, |
|||
data: data.map(item => item.name), |
|||
formatter: function(name) { |
|||
if (data && data.length) { |
|||
for (var i = 0; i < data.length; i++) { |
|||
if (name === data[i].name) { |
|||
return ( |
|||
'{name| ' + |
|||
name + |
|||
'} | ' + |
|||
'{value| ' + |
|||
data[i].value + |
|||
'%}' + |
|||
'{count| ' + |
|||
data[i].value + |
|||
'} ' |
|||
) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: '数量', |
|||
type: 'pie', |
|||
radius: ['40%', '55%'], |
|||
center: ['25%', '40%'], |
|||
data: data, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
position: 'center', |
|||
formatter: '{text|{c}}\n{b}', |
|||
rich: { |
|||
text: { |
|||
align: 'center', |
|||
verticalAlign: 'middle', |
|||
padding: 8, |
|||
fontSize: 30 |
|||
}, |
|||
value: { |
|||
align: 'center', |
|||
verticalAlign: 'middle', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
show: true |
|||
} |
|||
} |
|||
}] |
|||
}; |
|||
myChart.setOption(option); |
|||
|
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue