- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script>
- import * as echarts from "echarts";
- import { guid } from "@/utils/ruoyi";
- import bus from "@/bus";
- import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
- 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,
- },
- formatter: (params) => {
- // console.log(params);
- var relVal = "" + params[0].name;
- for (var i = 0, l = params.length; i < l; i++) {
- if (params[i].seriesName) {
- let unit = props.data.y1_Unit;
- relVal +=
- "<br/>" +
- params[i].marker +
- params[i].seriesName +
- " " +
- params[i].value +
- unit;
- }
- }
- return relVal;
- },
- },
- legend: {
- textStyle: {
- color: "#FFFFFF",
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- top: "10%",
- containLabel: true,
- },
- xAxis: {
- // name: "数量(个)",
- nameTextStyle: {
- color: "#AAC1CF", // 红色
- align: "right",
- fontSize: 10,
- },
- // max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
- nameLocation: "start",
- type: "value",
- minInterval: 1,
- nameGap: 5,
- axisLabel: {
- color: "#AAC1CF",
- fontSize: 12,
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#2161a8",
- },
- },
- },
- yAxis: {
- type: "category",
- data: props.data.xAxis,
- axisLabel: {
- color: "#EBFEFF",
- show: true,
- fontSize: props.data.xAxis.length > 8 ? 8 : 12,
- },
- nameTextStyle: {
- color: "#FFFFFF",
- },
- },
- series: [
- {
- name: props.data.yAxis2_Name,
- type: "bar",
- // barWidth: 10,
- // label: {
- // show: true,
- // },
- data: props.data.yAxis2,
- barGap: "-100%",
- itemStyle: {
- borderRadius: [0, 20, 20, 0],
- color: "#31FEDF",
- },
- label: {
- show: true,
- position: "right",
- valueAnimation: true,
- color: "inherit",
- fontSize: 12,
- formatter: (params) => {
- return params.value + props.data.y1_Unit;
- },
- },
- },
- {
- name: props.data.yAxis_Name,
- type: "bar",
- // barWidth: 10,
- // label: {
- // show: true,
- // },
- data: props.data.yAxis,
- itemStyle: {
- borderRadius: [0, 20, 20, 0],
- color: "#FF6464",
- },
- label: {
- show: false,
- position: "right",
- valueAnimation: true,
- color: "inherit",
- fontSize: 12,
- formatter: (params) => {
- return params.value + props.data.y1_Unit;
- },
- },
- },
- ],
- };
-
- 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;
- // clearInterval(allData.timer);
- }
- allData.chart.off("click");
-
- setTimeout(() => {
- init();
- }, 0);
- }
- );
- // echarts动画
- function animateChart() {
- let length = props.data.xAxis.length;
- let i = 0;
- if (allData.timer) clearInterval(allData.timer);
- allData.timer = setInterval(() => {
- i++;
- if (i == length) i = 0;
- allData.chart.dispatchAction({
- type: "showTip",
- seriesIndex: 0,
- dataIndex: i,
- });
- }, 3000);
- }
- onMounted(() => {
- init();
- window.addEventListener("resize", resizeTheChart);
- });
- onUnmounted(() => {
- if (allData.timer) clearInterval(allData.timer);
- });
- return {
- ...toRefs(allData),
- resizeTheChart,
- init,
- };
- },
- };
- </script>