105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<template>
|
|
<div class="home-trace-charts">
|
|
<custom-echart-mixin :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
const chartsData = ref({
|
|
option: {
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '6%',
|
|
top: '18%',
|
|
containLabel: true,
|
|
},
|
|
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
|
title: {
|
|
text: ' ',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['赋码', '扫码'],
|
|
},
|
|
barStyle: {
|
|
barWidth: 18,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: ' ',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
splitLine: {
|
|
show: true, // 显示分割线
|
|
lineStyle: {
|
|
type: 'dashed', // 设置为虚线
|
|
color: '#ccc', // 分割线颜色
|
|
width: 0.5, // 分割线宽度
|
|
},
|
|
},
|
|
},
|
|
// {
|
|
// type: 'value',
|
|
// name: '扫码',
|
|
// yAxisIndex: 1,
|
|
// axisLabel: {
|
|
// formatter: '{value}',
|
|
// },
|
|
// },
|
|
],
|
|
},
|
|
valData: [
|
|
{
|
|
name: '1月',
|
|
value: 40,
|
|
type: '赋码',
|
|
seriesType: 'bar',
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear', // 线性渐变
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#ff6666' },
|
|
{ offset: 1, color: '#ffcc66' },
|
|
],
|
|
global: false, // 默认为 false
|
|
},
|
|
},
|
|
},
|
|
{ name: '1月', value: 60, type: '扫码', seriesType: 'line' },
|
|
{ name: '2月', value: 20, type: '赋码', seriesType: 'bar', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '2月', value: 100, type: '扫码', seriesType: 'line' },
|
|
{ name: '3月', value: 80, type: '赋码', seriesType: 'bar', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '3月', value: 100, type: '扫码', seriesType: 'line' },
|
|
{ name: '4月', value: 40, type: '赋码', seriesType: 'bar', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '4月', value: 120, type: '扫码', seriesType: 'line' },
|
|
{ name: '5月', value: 50, type: '赋码', seriesType: 'bar', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '5月', value: 60, type: '扫码', seriesType: 'line' },
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (chartsData.value.valData && chartsData.value.valData.length) {
|
|
chartsData.value.valData.forEach((m, index) => {
|
|
let num = 100;
|
|
m.value = (m.value + Math.random() + num).toFixed(0);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.home-trace-charts {
|
|
height: 100%;
|
|
}
|
|
</style>
|