160 lines
3.3 KiB
Vue
160 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<div
|
|||
|
|
ref="chart"
|
|||
|
|
style="width: 100%; height: calc(100% - 46px); min-height: 250px"
|
|||
|
|
></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: "#ccc",
|
|||
|
|
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: "#ccc",
|
|||
|
|
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>
|