- <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>