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