You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.6 KiB
130 lines
2.6 KiB
<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>
|
|
|