- <template>
- <!-- 天气温度平滑折线图 -->
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from '@/utils/ruoyi';
- import { nextTick } from 'vue';
- const id = guid();
- const myChart = shallowRef('');
- import * as echarts from 'echarts';
-
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //x轴数据
- XAxis: {
- type: Array,
- default: () => [],
- },
- //y轴数据
- YAxis: {
- type: Array,
- default: () => [],
- },
- //名字
- DataName: {
- type: String,
- },
- //类型
- typeName: {
- type: String,
- default: '',
- },
- yAxisarr: {
- type: Array,
- default: () => [],
- },
- });
-
- watch(
- () => props.refresh,
- value => {
- console.log('???????');
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
-
- function init() {
- let colorarr = ['#409eff', '#0ba47b', '#a34a5e', '#dac16f', '#ff7f50', '#ff69b4', '#87ceeb', '#4682b4', '#98fb98'];
- let rightnumber = props.yAxisarr.length * '2.5' + '%';
- let newarr = [];
- let marklinedata = [];
- let maxArr = [];
- let minArr = [];
- let finyasx = [
- {
- show: false,
- inverse: true, //控制x轴在上方
- name: props.typeName,
- type: 'value',
- axisLabel: {
- show: true,
- color: '#409eff',
- },
- axisLine: {
- lineStyle: {
- color: '#409eff',
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(61,91,98,0.8)',
- },
- },
- // min: 0,
- },
- ];
-
- let finxse = [
- // {
- // name: props.typeName,
- // type: 'bar',
- // barWidth: 12,
- // itemStyle: {
- // borderRadius: [0, 0, 6, 6],
- // color: function () {
- // return new echarts.graphic.LinearGradient(
- // 0,
- // 1,
- // 0,
- // 0,
- // [
- // {
- // offset: 0.1,
- // color: '#409eff', // 0% 处的颜色
- // },
- // {
- // offset: 0.9,
- // color: '#013068', // 100% 处的颜色
- // },
- // ],
- // false
- // );
- // },
- // },
- // // showBackground: true,
- // backgroundStyle: {
- // color: 'transparent',
- // borderWidth: 1,
- // borderColor: 'rgba(148, 250, 65, 0.2)',
- // },
- // data: props.YAxis,
- // },
- ];
-
- console.log('获取的Y轴的数据', props.yAxisarr);
-
- // 处理多个y轴遍历展示
- if (props.yAxisarr) {
- props.yAxisarr.map((item, index) => {
- let arr = [];
- let markLineArr = [];
- item.cordonLineList.map(p => {
- markLineArr.push(Number(p.lineValue));
- arr.push({
- silent: false, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: 'dashed',
- color: p.lineColor,
- },
- name: p.lineName,
- yAxis: Number(p.lineValue),
- label: {
- formatter: `${p.lineValue}-${p.lineName}`,
- color: p.lineColor,
- },
- });
- });
-
- item['maxValue'] = Math.max.apply(null, [...item.datas, ...markLineArr]);
- item['minValue'] = Math.min.apply(null, [...item.datas, ...markLineArr]);
-
- marklinedata.push(arr);
- });
-
- console.log('marklinedata', marklinedata);
- props.yAxisarr.map((item, index) => {
- let obj = {
- name: item.dataName,
- type: 'value',
- axisLabel: {
- show: true,
- color: colorarr[index],
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: colorarr[index],
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(61,91,98,0.8)',
- },
- },
- min: Math.floor(item.minValue * 0.95),
- max: item.maxValue,
- };
-
- if (index == 0) {
- obj.position = 'left';
- } else if (index == 1) {
- obj.position = 'right';
- } else {
- obj.position = 'right';
- obj.offset = (index - 1.1) * 55;
- // obj.show = false;
- }
-
- finyasx.push(obj);
-
- finxse.push({
- smooth: true, //变为曲线 默认false折线
- name: item.dataName,
- type: 'line',
- yAxisIndex: index + 1,
- data: item.datas,
- markLine: {
- symbol: 'none', //去掉警戒线最后面的箭头
- label: {
- position: 'middle', //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
- },
- data: marklinedata[index],
- },
- });
- });
- }
-
- myChart.value = echarts.init(document.getElementById(id));
- let option = {
- color: colorarr,
- legend: {
- show: true,
- orient: 'horizontal', //horizontal横向 vertical 纵向
- type: 'scroll',
- x: 'center', //居右显示
- align: 'left', //图例控制在左边
- icon: 'circle',
- itemWidth: 15,
- itemHeight: 15,
- itemHeight: 15,
- textStyle: {
- color: 'auto',
- rich: {
- another: {
- fontSize: 28,
- },
- },
- fontSize: 14,
- },
- },
- tooltip: {
- trigger: 'axis',
- // formatter: "{b}:{c}件",
- // 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',
- },
- },
- },
- grid: {
- top: '18%',
- left: '5%',
- right: rightnumber,
- // right: '5%',
- bottom: '15%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: props.XAxis,
- axisPointer: {
- type: 'shadow',
- },
- axisLabel: {
- show: true,
- color: '#fff',
- },
- axisLine: {
- lineStyle: {
- // color: '#3398DB',
- },
- },
- },
- ],
- yAxis: finyasx,
- 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: finxse,
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>