<template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import * as echarts from 'echarts'; import { guid } from '@/utils/ruoyi'; import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue'; export default { name: 'line-chart', props: { data: Object, refresh: Number, }, 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)); var barWidth = 12; var option; option = { color: ['#3FFFC2', '#FFF21C', 'orange'], tooltip: { trigger: 'axis', // formatter: "{b}:{c}㎡", // feature: { // mark: { show: true }, // dataView: { show: true, readOnly: false }, // magicType: { show: true, type: ['line', 'bar'] }, // restore: { show: true }, // saveAsImage: { show: true } // }, // axisPointer: { // type: "cross", // textStyle: { // color: "#fff" // } // }, 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 = params[i].seriesName == '降雨量(cm)' ? 'mm' : 'mm'; relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit; } } return relVal; }, }, grid: { top: 50, bottom: 30, }, legend: { data: ['降雨量(cm)', '流量(mm)', 'ss'], textStyle: { color: '#fff', }, }, xAxis: [ { type: 'category', axisLine: { show: false, lineStyle: { width: 2, color: '#58b2ed', }, }, splitLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: 'rgba(255,255,255,1)', fontSize: 14, fontFamily: 'AlibabaPuHuiTi', }, data: props.data.xAxis, }, ], yAxis: [ { name: '流量(mm)', type: 'value', axisLabel: { color: '#fff', show: true, }, nameTextStyle: { color: '#fff', }, splitLine: { lineStyle: { type: 'dashed', color: '#60C2FF', }, }, alignTicks: true, }, { name: '', type: 'value', nameTextStyle: { color: '#fff', }, min: 0, // max: 50, interval: 5, axisLabel: { show: true, color: '#fff', }, splitLine: { lineStyle: { color: '#D1DEEE', type: 'dashed', color: '#53D8FB', }, }, alignTicks: true, }, ], dataZoom: [ { // show: true, show: false, height: 4, bottom: 18, 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: 1, end: 35, }, ], series: [ { name: '降雨量(cm)', type: 'bar', barWidth: barWidth, barGap: '10%', // Make series be overlap barCateGoryGap: '10%', itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [ { offset: 0, color: 'rgba(24, 255, 255, 1)', }, { offset: 1, color: 'rgba(188, 255, 255, 1)', }, ]), }, data: props.data.yAxis, }, { // smooth: true, //变为曲线 默认false折线 name: '流量(mm)', type: 'line', data: props.data.yAxis2, yAxisIndex: 1, color: '#FFF21C', }, { // smooth: true, //变为曲线 默认false折线 name: 'ss', type: 'line', data: props.data.yAxis3, yAxisIndex: 1, color: 'orange', }, ], }; option && chartDom.setOption(option, true); allData.chart = chartDom; // animateChart(); }; watch( () => props.refresh, () => { if (allData.chart) { allData.chart.dispose(); allData.chart = null; } setTimeout(() => { init(); }, 0); } ); // echarts动画 // function animateChart() { // let length = props.data.xAxis.length; // let i = 0; // allData.timer = setInterval(() => { // i++; // if (i == length) i = 0; // allData.chart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: i, // }); // }, 2000); // } onMounted(() => { init(); window.addEventListener('resize', resizeTheChart); }); onUnmounted(() => { // if (allData.timer) clearInterval(allData.timer); }); return { ...toRefs(allData), resizeTheChart, init, }; }, }; </script>