- <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: () => [],
- },
- YAxis2: {
- type: Array,
- default: () => [],
- },
- //类型
- typeName: {
- type: String,
- default: '',
- },
- });
-
- watch(
- () => props.refresh,
- value => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
-
- function init() {
- myChart.value = echarts.init(document.getElementById(id));
-
- let barWidth = 13;
- let option = {
- legend: {
- itemStyle: {
- color: 'auto',
- },
- textStyle: {
- color: '#fff',
- },
- itemWidth: 15,
- itemHeight: 15,
- },
- 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 = '';
- relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
- }
- }
- return relVal;
- },
- },
- grid: {
- left: '10%',
- right: '4%',
- bottom: '3%',
- top: '15%',
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- axisLabel: {
- show: true,
- color: '#AED2E0',
- },
- splitLine: {
- show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
- type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
- lineStyle: {
- color: 'rgba(255,255,255,0.2)',
- width: 1, // 设置分割线的粗细为2
- },
- },
- },
- yAxis: {
- type: 'category',
- data: props.XAxis,
- name: props.typeName,
- nameLocation: 'start',
- nameTextStyle: {
- color: '#AED2E0',
- padding: [-7, 0, 0, -80], // 四个数字分别为上右下左与原位置距离
- },
- axisLabel: {
- show: true,
- color: '#fff',
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
- },
- series: [
- {
- name: '污水',
- type: 'bar',
- stack: 'Ad',
- barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
- barGap: '-100%',
- itemStyle: {
- borderRadius: [0, 6, 6, 0],
- // color: 'rgba(248, 98, 98,1)',
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(248, 98, 98,0.2)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(248, 98, 98,1)', // 100% 处的颜色
- },
- ],
- },
- },
- data: props.YAxis,
- },
- // 柱状图
- {
- name: '雨水', // 系列名称, 用于tooltip的显示, legend 的图例筛选
- type: 'bar', // 系列类型
- barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
- barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
- // 图例的图形样式
- itemStyle: {
- borderRadius: [0, 6, 6, 0],
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(83, 180, 232,0.6)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(83, 180, 232,1)', // 100% 处的颜色
- },
- ],
- },
- },
- // label: {
- // show: true,
- // position: 'top',
- // color: '#fff',
- // formatter: function (data) {
- // return data.value;
- // },
- // },
- data: props.YAxis2,
- stack: 'Ad',
- },
- ],
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>