135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<div class="home-trace-charts">
|
|
<custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from 'vue';
|
|
let itemStyle = reactive({
|
|
itemStyle: { borderRadius: [8, 8, 0, 0] },
|
|
});
|
|
|
|
let legendList = reactive(['赋码', '扫码']);
|
|
const chartsData = ref({
|
|
option: {
|
|
color: ['#3685fe', '#8dcbe9', '#ffd500', '#631f9f'],
|
|
title: {
|
|
text: ' ',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: legendList,
|
|
left: '0', // 距离左侧10%的位置
|
|
top: '0', // 垂直居中
|
|
itemWidth: 15, // 图例标记的宽度
|
|
itemHeight: 8, // 图例标记的高度
|
|
textStyle: {
|
|
fontSize: 10, // 图例文字的字体大小
|
|
color: '#fff', // 图例文字的颜色
|
|
},
|
|
},
|
|
barStyle: {
|
|
barWidth: 10,
|
|
color: {
|
|
type: 'linear', // 线性渐变
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#45bfe9' },
|
|
{ offset: 1, color: '#01589c' },
|
|
],
|
|
global: false, // 默认为 false
|
|
},
|
|
},
|
|
dataZoom: [
|
|
// {
|
|
// type: 'slider', // 滑动条型数据区域缩放组件
|
|
// startValue: 0, // 数据窗口起始值的索引
|
|
// endValue: 2, // 数据窗口结束值的索引
|
|
// },
|
|
// {
|
|
// type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
|
|
// startValue: 0,
|
|
// endValue: 2,
|
|
// },
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: ' ',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
splitLine: {
|
|
show: true, // 显示分割线
|
|
lineStyle: {
|
|
type: 'dashed', // 设置为虚线
|
|
width: 0.5, // 分割线宽度
|
|
},
|
|
},
|
|
|
|
itemStyle: { fontSize: 8 },
|
|
},
|
|
],
|
|
grid: {
|
|
x: '10%',
|
|
x2: '10%',
|
|
y: '20%',
|
|
y2: '20%',
|
|
},
|
|
},
|
|
valData: [],
|
|
});
|
|
|
|
const randomVal = (num) => {
|
|
let list = [];
|
|
for (let i = 0; i < legendList.length; i++) {
|
|
let addNum = [10, 8, 2, 5];
|
|
let val = {
|
|
name: num + '月',
|
|
value: Number(Math.random() * 100 + addNum[i]).toFixed(0),
|
|
seriesType: i < legendList.length - 1 ? 'bar' : 'line',
|
|
type: legendList[i],
|
|
stack: num + '月',
|
|
};
|
|
if (val.seriesType == 'line') {
|
|
val.smooth = 30;
|
|
val.symbol = 'none';
|
|
}
|
|
if (val.seriesType == 'bar') {
|
|
val.symbol = 'none';
|
|
}
|
|
let lastVal = {
|
|
...val,
|
|
...itemStyle,
|
|
};
|
|
list[i] = i < legendList.length - 2 ? val : lastVal;
|
|
}
|
|
return list;
|
|
};
|
|
let handelData = computed(() => {
|
|
let list = [];
|
|
let maxMouth = 12;
|
|
for (let i = 0; i < maxMouth; i++) {
|
|
let val = randomVal(i + 1);
|
|
list = [...list, ...val];
|
|
}
|
|
|
|
list.map((m, indexm) => {
|
|
return { ...m, value: Number(Number(m.value) + Math.random() + indexm).toFixed(0) };
|
|
});
|
|
// console.info('handelData', list);
|
|
return list;
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.home-trace-charts {
|
|
height: 100%;
|
|
}
|
|
</style>
|