160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
<template>
|
||
<div
|
||
ref="chart"
|
||
style="width: 100%; height: 350px"
|
||
></div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, reactive, ref } from "vue";
|
||
// 局部引入echarts核心模块
|
||
import * as echarts from "echarts";
|
||
|
||
const chart = ref(null); // 创建DOM引用
|
||
const data1 = [
|
||
"龙游县人民医院",
|
||
"龙游县中医院",
|
||
"龙游县横山镇中心卫生院",
|
||
"龙游县溪水镇中心卫生院",
|
||
"龙游县龙游街道社区卫生服务中心",
|
||
"龙游县塔石镇中心卫生院",
|
||
"龙游县罗家县中心卫生院",
|
||
"龙游县社阳乡卫生院",
|
||
"龙游妇幼保健院",
|
||
"龙游妇幼保健院",
|
||
"龙游妇幼保健院",
|
||
"龙游妇幼保健院",
|
||
"龙游妇幼保健院",
|
||
];
|
||
const data2 = [
|
||
"200",
|
||
"200",
|
||
"120",
|
||
"200",
|
||
"420",
|
||
"100",
|
||
"100",
|
||
"100",
|
||
"120",
|
||
"333",
|
||
];
|
||
|
||
let option = {
|
||
grid: {
|
||
left: "0%",
|
||
right: "10%",
|
||
bottom: "1%",
|
||
top: "6%",
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis", //axis , item
|
||
},
|
||
// backgroundColor: '#002D54',
|
||
xAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(77, 128, 254, 0.2)",
|
||
type: "line",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
// 改变x轴字体颜色和大小
|
||
show: false,
|
||
textStyle: {
|
||
color: "#00c0fa",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: "11",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: data1,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "道路指数",
|
||
type: "bar",
|
||
zlevel: 1,
|
||
label: {
|
||
show: true,
|
||
position: "right", // 位置
|
||
color: "#ffffff",
|
||
fontSize: 12,
|
||
distance: 10, // 距离
|
||
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||
}, // 柱子上方的数值
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 1,
|
||
// borderColor: "rgba(0, 183, 255, 1)",
|
||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
|
||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
barWidth: 10,
|
||
data: data2,
|
||
},
|
||
],
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// var myChart = echarts.init(document.getElementById('main'));
|
||
// Vue3中： 需要引入
|
||
var myChart = echarts.init(chart.value);
|
||
|
||
// init(); // vue3.2没有this
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
myChart.on("scroll", function (event) {
|
||
// 根据滚动位置动态计算bargap
|
||
var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
|
||
myChart.setOption({
|
||
yAxis: {
|
||
axisLabel: {
|
||
bargap: bargap,
|
||
},
|
||
},
|
||
});
|
||
});
|
||
|
||
// 单图表响应式: 跟随浏览器大小改变
|
||
// window.addEventListener("resize", () => {
|
||
// myChart.resize();
|
||
// });
|
||
});
|
||
</script>
|
||
|
||
<style scoped></style>
|