ggfwjsc/src/view/echarts_yl/eP2.vue

145 lines
3.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div ref="chart" style="width: 100%;height:250px;"></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",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} <br />{a3}:{c3}",
},
legend: {
data: ["80-90补贴人次", "90-98补贴人次", "99以上补贴人次"],
top: "8%",
right: "15%",
textStyle: {
fontSize: 12,
color: "#ffffff",
},
},
grid: {
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
},
},
},
series: [
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "80-90补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
data: [120, 132, 101, 134, 90],
},
{
name: "90-98补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
data: [220, 182, 191, 234, 290],
},
{
name: "99以上补贴人次",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
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>