77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<div ref="chart" style="width: 100%; height: 220px"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup >
|
|||
|
|
import { onMounted, reactive, ref } from "vue";
|
|||
|
|
// 局部引入echarts核心模块
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
|
|||
|
|
const chart = ref(); // 创建DOM引用
|
|||
|
|
|
|||
|
|
let option = {
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['80-90补贴人次', '90-98补贴人次', '99以上补贴人次']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
// boundaryGap: false,
|
|||
|
|
data: ['1月', '2月', '3月', '4月', '5月']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '80-90补贴人次',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: [120, 132, 101, 134, 90]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '90-98补贴人次',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: [220, 182, 191, 234, 290]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '99以上补贴人次',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: [150, 232, 201, 154, 190]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用生命钩子
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
// var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
// Vue3中： 需要引入
|
|||
|
|
var myChart = echarts.init(chart.value);
|
|||
|
|
|
|||
|
|
// init(); // vue3.2没有this
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
|
|||
|
|
// 单图表响应式: 跟随浏览器大小改变
|
|||
|
|
// window.addEventListener("resize", () => {
|
|||
|
|
// myChart.resize();
|
|||
|
|
// });
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
</style>
|