GitBucket
Newer
<template>
<div :id="id" class="RightClass" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { guid } from "@/utils/ruoyi";
import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
import bus from "@/bus";
import moment from "moment";
export default {
name: "line-chart",
props: {
data: Object,
refresh: Number,
ClickData: String,
TypeID: String,
},
setup(props) {
const allData = reactive({
series: [],
legend: [],
id: guid(),
chart: null,
timer: null,
});
const resizeTheChart = () => {
if (allData.chart) {
allData.chart.resize();
}
};
const init = () => {
// let chartDom = echarts.init(document.getElementById(allData.id));
//先获取Dom上的实例
let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
//然后判断实例是否存在，如果不存在，就创建新实例
if (chartDom == null) {
chartDom = echarts.init(document.getElementById(allData.id));
}
var option;
option = {
tooltip: {
trigger: "axis",
backgroundColor: "#004284",
borderColor: "#0B9BFF",
borderRadius: 6, // 设置圆角大小
// 自定义提示框文本样
textStyle: {
// 字体颜色
color: "white",
// 字体大小
fontSize: 14,
},
},
legend: {
data: [
props.data.yAxis_Name,
props.data.yAxis2_Name,
props.data.yAxis3_Name,
props.data.yAxis4_Name,
],
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: 80,
right: 20,
bottom: 20,
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
data: props.data.xAxis,
axisLabel: {
color: "rgba(255,255,255,1)",
fontSize: 12,
fontFamily: "AlibabaPuHuiTi",
formatter: function (value) {
return moment(value).format("hh:mm");
},
},
},
dataZoom: [
{
// show: true,
show: false,
height: 4,
bottom: 10,
start: 0,
end: 100,
handleSize: "100%",
fillerColor: "#94FA41",
borderColor: "transparent",
backgroundColor: "rgba(148, 250, 65, 0.2)",
handleStyle: {
color: "#94FA41",
},
moveHandleSize: 0,
textStyle: {
color: "#fff",
},
},
{
type: "inside",
show: true,
height: 15,
start: 0,
end: 100,
},
],
yAxis: [
{
name: props.data.yAxis_Name,
type: "value",
// minInterval: 1,
min: 0,
axisLabel: {
color: "#AAC1CF",
show: true,
formatter: function (value) {
return value.toFixed(2); // 保留两位小数
},
},
nameTextStyle: {
color: "#19D5FF",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
position: "left",
inverse: true,
nameLocation: "start",
offset: 80,
},
{
name: props.data.yAxis2_Name,
type: "value",
// minInterval: 1,
min: 0,
axisLabel: {
color: "#AAC1CF",
show: true,
formatter: function (value) {
return value.toFixed(2); // 保留两位小数
},
},
nameTextStyle: {
color: "#b14de5",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
position: "right",
offset: 50,
},
{
name: props.data.yAxis3_Name,
type: "value",
// minInterval: 1,
min: 0,
axisLabel: {
color: "#AAC1CF",
show: true,
formatter: function (value) {
return value.toFixed(2); // 保留两位小数
},
},
nameTextStyle: {
color: "#99FF55",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
offset: 0,
position: "right",
},
{
name: props.data.yAxis4_Name,
type: "value",
// minInterval: 1,
min: 0,
axisLabel: {
color: "rgb(255,127,80)",
show: true,
formatter: function (value) {
return value.toFixed(2); // 保留两位小数
},
},
nameTextStyle: {
color: "rgb(255,127,80)",
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#2161a8",
},
},
alignTicks: true,
position: "left",
},
],
series: [
{
name: props.data.yAxis_Name,
type: "bar",
data: props.data.yAxis,
barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
// 修改数据点颜色
itemStyle: {
borderRadius: [0, 0, 50, 50],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#08B1FF" },
{ offset: 1, color: "#19D6FF" },
]), // 数据点颜色
},
},
{
name: props.data.yAxis2_Name,
type: "line",
data: props.data.yAxis2,
yAxisIndex: 1,
symbolSize: 7,
// 修改折线颜色
lineStyle: {
color: "#b14de5", // 折线颜色
width: 2, // 折线宽度
},
// 修改数据点颜色
itemStyle: {
color: "#b14de5", // 数据点颜色
width: 4,
},
},
{
name: props.data.yAxis3_Name,
type: "line",
data: props.data.yAxis3,
yAxisIndex: 2,
symbolSize: 7,
// 修改折线颜色
lineStyle: {
color: "#99FF55", // 折线颜色
width: 2, // 折线宽度
},
// 修改数据点颜色
itemStyle: {
color: "#99FF55", // 数据点颜色
},
},
{
name: props.data.yAxis4_Name,
type: "line",
data: props.data.yAxis4,
yAxisIndex: 3,
symbolSize: 7,
// 修改折线颜色
lineStyle: {
color: "rgb(255,127,80)", // 折线颜色
width: 2, // 折线宽度
},
// 修改数据点颜色
itemStyle: {
color: "rgb(255,127,80)", // 折线颜色
},
},
],
};
option && chartDom.setOption(option, true);
allData.chart = chartDom;
// animateChart();
// 监听点击事件
// allData.chart.on("click", function (params) {
// // params.value 是点击的X轴标签的值
// console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
// // 在这里可以执行相应的逻辑
// bus.emit("openJXFXDialog", {
// name: params.name,
// ClickData: props.ClickData,
// });
// });
};
watch(
() => props.refresh,
() => {
console.log(props, "propspropsprops");
if (allData.chartDom) {
allData.chartDom.dispose();
allData.chartDom = null;
}
setTimeout(() => {
console.log("重绘了");
init();
}, 10);
}
);
// echarts动画
function animateChart() {
let length = props.data.xAxis.length;
let i = 0;
if (allData.timer) clearInterval(allData.timer);
allData.timer = setInterval(() => {
allData.chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: i,
});
i++;
if (i == length) i = 0;
}, 3000);
}
onMounted(() => {
init();
window.addEventListener("resize", resizeTheChart);
});
onUnmounted(() => {
if (allData.timer) clearInterval(allData.timer);
});
return {
...toRefs(allData),
resizeTheChart,
init,
};
},
};
</script>
<style>
.RightClass {
width: 100%;
height: 100%;
}
</style>