- <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,
- anIndex: 0,
- });
- const resizeTheChart = () => {
- if (allData.chart) {
- allData.chart.resize();
- }
- };
-
- const init = () => {
- let markLinedata = [];
- if (props.data.controlMarkLine.length) {
- props.data.controlMarkLine.map(item => {
- let newitem = {
- silent: true, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: 'solid',
- color: item.color,
- opacity: item.Opacity,
- width: 2,
- },
- yAxis: item.value,
- label: {
- formatter: `${item.typeName}:${item.value}` + '(m)',
- color: item.color,
- },
- };
- markLinedata.push(newitem);
- });
- }
- let chartDom = echarts.init(document.getElementById(allData.id));
- var option;
- option = {
- color: ['#3FFFC2', '#FFF21C', 'orange'],
- tooltip: {
- trigger: 'axis',
- },
- grid: {
- top: 40,
- bottom: 30,
- },
- legend: {
- // data: ['降雨量(mm)', '水深(m)'],
- textStyle: {
- color: '#fff',
- },
- },
- dataZoom: [{ type: 'inside', startValue: props.data.xAxis[props.data.xAxis - 48] }],
- xAxis: [
- {
- type: 'category',
- 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',
- inverse: true,
- nameLocation: 'start', // 坐标轴名称显示位置
- axisLabel: {
- color: '#fff',
- show: true,
- },
- nameTextStyle: {
- color: '#fff',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#1D5D81',
- },
- },
- max: Math.max(...props.data.yAxis) + 0.5,
- },
- {
- name: '水深(m)',
- max: markLinedata.length > 0 ? Number(markLinedata[0].yAxis) + 0.3 : 3,
- type: 'value',
- inverse: false,
- nameLocation: 'end', // 坐标轴名称显示位置
- nameTextStyle: { color: '#FFF21C' },
- axisLabel: { show: true, color: '#FFF21C' },
- splitLine: {
- lineStyle: {
- color: '#1D5D81',
- type: 'dashed',
- },
- },
- },
- ],
- series: [
- {
- name: '降雨量',
- type: 'bar',
- 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)' },
- ]),
- },
- yAxisIndex: 0,
- data: props.data.yAxis,
- },
- {
- smooth: true, //变为曲线 默认false折线
- name: '水深',
- type: 'line',
- data: props.data.yAxis2,
- yAxisIndex: 1,
- color: '#FFF21C',
- markLine: {
- // symbol: 'none', //去掉警戒线最后面的箭头
- label: {
- position: 'middle', //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
- },
- data: markLinedata,
- },
- },
- ],
- };
- option && chartDom.setOption(option, true);
- allData.chart = chartDom;
- animateChart(); // echarts动画
- };
- watch(
- () => props.refresh,
- () => {
- if (allData.chart) {
- allData.chart.dispose();
- allData.chart = null;
- }
- if (allData.timer) clearInterval(allData.timer);
- setTimeout(() => {
- init();
- allData.anIndex = 0;
- }, 0);
- }
- );
- // echarts动画
- function animateChart() {
- let length = props.data.xAxis.length;
- allData.timer = setInterval(() => {
- allData.anIndex++;
- if (allData.anIndex == length) allData.anIndex = 0;
- allData.chart.dispatchAction({
- type: 'showTip',
- seriesIndex: 0,
- dataIndex: allData.anIndex,
- });
- }, 2000);
- }
- onMounted(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- onUnmounted(() => {
- if (allData.timer) clearInterval(allData.timer);
- });
- return {
- ...toRefs(allData),
- resizeTheChart,
- init,
- };
- },
- };
- </script>