150 lines
3.0 KiB
Vue
150 lines
3.0 KiB
Vue
<template>
|
|
<div id="linenearly" style="width: 100%; height: 100%"></div>
|
|
</template>
|
|
|
|
<script setup name="GMVnearly">
|
|
import * as echarts from 'echarts'
|
|
import { onMounted } from 'vue'
|
|
|
|
const getEcharts = () => {
|
|
var chartDom = document.getElementById('linenearly')
|
|
var myChart = echarts.init(chartDom)
|
|
|
|
const option = {
|
|
tooltip: {
|
|
//鼠标悬停时显示对应数据
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
color: ['#87A2E8FF', '#74CCCCFF'],
|
|
title: {
|
|
text: '近一年的DAU/DNU',
|
|
top: '8px',
|
|
left: '10px',
|
|
bottom: '8px',
|
|
textStyle: {
|
|
color: '#191e24',
|
|
fontSize: '14',
|
|
},
|
|
},
|
|
legend: {
|
|
// 图例
|
|
data: ['DAU', 'DNU'],
|
|
top: 8,
|
|
right: 16, // 修改位置
|
|
icon: 'circle', //原型
|
|
textStyle: {
|
|
color: '#191e2480', //字体颜色
|
|
},
|
|
},
|
|
grid: {
|
|
// 上下左右 边距
|
|
top: '8%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '8%',
|
|
top: '15%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: [
|
|
'1月',
|
|
'2月',
|
|
'3月',
|
|
'4月',
|
|
'5月',
|
|
'6月',
|
|
'7月',
|
|
'8月',
|
|
'9月',
|
|
'10月',
|
|
'11月',
|
|
'12月',
|
|
],
|
|
axisLine: {
|
|
// 轴线的颜色以及宽度
|
|
lineStyle: {
|
|
color: '#A6A6A628',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
// 轴文字的配置
|
|
show: true,
|
|
textStyle: {
|
|
color: '#191e2480',
|
|
},
|
|
},
|
|
splitLine: {
|
|
// 分割线配置
|
|
lineStyle: {
|
|
color: '#A6A6A628',
|
|
// type: "dashed", // 虚线
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
min: 0, // 最小值
|
|
// splitNumber: 3, //划分3格
|
|
type: 'value',
|
|
axisLine: {
|
|
// 轴线的颜色以及宽度
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
// 轴文字的配置
|
|
show: true,
|
|
// textStyle: {
|
|
// color: "#fff",
|
|
// },
|
|
},
|
|
splitLine: {
|
|
// 分割线配置
|
|
lineStyle: {
|
|
color: '#A6A6A628',
|
|
// type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: 'DAU',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230],
|
|
},
|
|
{
|
|
name: 'DNU',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 290],
|
|
},
|
|
],
|
|
}
|
|
option && myChart.setOption(option)
|
|
window.onresize = () => {
|
|
myChart.resize()
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
getEcharts()
|
|
}, 1000)
|
|
})
|
|
</script>
|