138 lines
2.9 KiB
Vue
138 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="custom-echarts">
|
|||
|
|
<div id="myEcharts" class="myChart"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted } from 'vue'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
|
|||
|
|
//初始化eCharts
|
|||
|
|
const initEcharts = () => {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myCharts = echarts.init(document.getElementById('myEcharts'))
|
|||
|
|
// 绘制图表
|
|||
|
|
myCharts.setOption({
|
|||
|
|
title: {
|
|||
|
|
text: 'FiEE, Inc. Stock Price History',
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'line',
|
|||
|
|
snap: true,
|
|||
|
|
label: {
|
|||
|
|
backgroundColor: '#6a7985'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formatter: function (params) {
|
|||
|
|
const p = params[0];
|
|||
|
|
return `${p.axisValue}<br/>Price: ${p.data}`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['2013', '2015', '2017', '2019', '2021', '2023', '2025'],
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
position: 'right',
|
|||
|
|
interval: 25,
|
|||
|
|
max: 75.0,
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '销量',
|
|||
|
|
type: 'line',
|
|||
|
|
data: [5, 20, 36, 10, 10, 20],
|
|||
|
|
symbol: 'none',
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#2c6288'
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#2c6288'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#F4F6F8'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
type: 'inside',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
dataBackground: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#2C6288'
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [
|
|||
|
|
{ offset: 1, color: '#2c6288' },
|
|||
|
|
{ offset: 0, color: '#F4F6F8' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectedDataBackground: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#2C6288'
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [
|
|||
|
|
{ offset: 1, color: '#2c6288' },
|
|||
|
|
{ offset: 0, color: '#F4F6F8' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fillerColor: 'rgba(44, 98, 136, 0.3)',
|
|||
|
|
realtime: false,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
initEcharts()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.custom-echarts {
|
|||
|
|
.myChart {
|
|||
|
|
width: 1000px;
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|