<!--echarts图-->
<template>
<div style="width:100%;height:100%;margin-top:10px" class="container" :id="container" :ref="container"></div>
</template>
<script lang="ts" setup>
import { reactive, watch, nextTick, markRaw, } from "vue";
import * as charts from "echarts";
const props = defineProps({
options: {
type: Object,
require: true,
},
isFirst: {
type: Boolean,
default: false,
},
container: {
type: String,
default: "container",
},
isClick: {
type: Boolean,
default: false,
},
clickOb:{
type:Function,
default:null
}
});
const Aecharts: any = reactive({ value: "" });
let eConsole = (params: any) => {
props.clickOb&&props.clickOb(true,params)
}
let zConsole = (params: any) => {
props.clickOb&&props.clickOb(false,params)
}
watch(
() => props.options,
(newval) => {
changeEcharts(props.options);
},
{
deep: true,
}
);
//鼠标移入显示隐藏的文字
const extension = (myChart:any) => {
var elementDiv = document.getElementById('extension')
if (!elementDiv) {
var div = document.createElement('div')
div.setAttribute('id', 'extension')
div.style.display = 'block'
let e:any = document.querySelector('html')
e.appendChild(div)
}
myChart.on("mouseover", function(params) {
if (params.componentType == "yAxis") {
var elementDiv:any = document.querySelector("#extension");
//设置悬浮文本的位置以及样式
var elementStyle = 'position: absolute;z-index: 99999;color: #666;' +
'font-size: 13px;padding: 0.5%;display: inline;border-radius: 4px;' +
'background-color: #fff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
let e:any = document.querySelector('html')
e.onmousemove = function (event) {
var elementDiv:any = document.querySelector('#extension')
var xx = event.pageX + 10
var yy = event.pageY - 30
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
});
myChart.on("mouseout", function(params) {
//注意这里,我是以X轴显示内容过长为例,如果是y轴的话,需要改为yAxis
if (params.componentType == "yAxis") {
var elementDiv:any = document.querySelector("#extension");
elementDiv.style.cssText = "display:none";
}
});
}
const changeEcharts = (options: any) => {
Aecharts.value.setOption(options);
window.addEventListener("resize", function () {
Aecharts.value.resize(); //图表自适应的一个方法
});
extension(Aecharts.value);
if (props.isFirst) {
let index = 0;
Aecharts.value.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
Aecharts.value.on("mouseover", (e: any) => {
if (e.dataIndex !== index) {
Aecharts.value.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
Aecharts.value.on("mouseout", (e: any) => {
index = e.dataIndex;
Aecharts.value.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
}
if (props.isClick) {
Aecharts.value.on("click", eConsole);//鼠标移入
Aecharts.value.on("dblclick", zConsole);//鼠标移出
}
};
watch(
() => props.container,
(newval) => {
nextTick(() => {
let op = reactive({ value: document.getElementById(newval) });
if (op.value) {
Aecharts.value = markRaw(charts.init(op.value));//初始化图表
}
changeEcharts(props.options);
});
},
{
// deep: true,
immediate: true,
}
);
</script>
调用
<div style="width: 33%;height: 76vh;float: left;padding: 0 0.5%;">
<div style="height: 75vh;width: 100%;border: 1px solid rgba(0, 0, 0, 0.3);">
<myEcharts container="allContainer" :options="allOption"></myEcharts>
</div>
</div>
let yName = ref<any>([])
let allData = ref<any>([])
let allOption = ref({
title: {
text: '医院手术占比排名'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
legend: {},
grid: {
left: '1%',
right: '8%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'value',
// boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: yName,
// inverse:true//设置从上往下还是从下网上
//设置坐标名超过10个字符隐藏,鼠标放入显示
triggerEvent: true,
axisLabel: {
interval: 0,
// rotate: 40,
formatter: function (value) {
if (value.length > 10) {
return `${value.slice(0, 10)}...`;
}
return value;
}
}
},
series: [
{
name: '手术占比',
type: 'bar',
data: allData,
},
]
})