46 lines
749 B
Vue
46 lines
749 B
Vue
<template>
|
|
<view>
|
|
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const opts = ref({
|
|
color: [
|
|
'#ee2c37',
|
|
|
|
],
|
|
padding: [15, 15, 0, 15],
|
|
enableScroll: false,
|
|
legend: {
|
|
show:false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
},
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
dashLength: 2,
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: 'curve',
|
|
opacity: 0.2,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: 'hollow',
|
|
},
|
|
},
|
|
})
|
|
const chartData = ref({
|
|
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
|
series: [
|
|
{
|
|
name: '目标值',
|
|
data: [35, 36, 31, 33, 13, 34],
|
|
}
|
|
],
|
|
})
|
|
</script>
|