- <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: () => [],
- },
- //类型
- 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 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 = '';
- relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
- }
- }
- return relVal;
- },
- },
- grid: {
- left: '10%',
- right: '4%',
- bottom: '10%',
- top: '8%',
- containLabel: true,
- },
- xAxis: {
- boundaryGap: true,
- type: 'category',
- data: props.XAxis,
- axisLabel: {
- show: true,
- color: '#fff',
- formatter: function (params) {
- let newParamsName = params.substring(10, 16);
- return newParamsName;
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- show: true, //是否显示坐标轴轴线,
- color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
- width: 1, //x轴粗细
- },
- },
- axisTick: {
- show: false, //是否显示刻度
- },
- },
- yAxis: {
- type: 'value',
- name: props.typeName,
- nameLocation: 'start',
- nameTextStyle: {
- color: '#AED2E0',
- padding: [-8, 0, 0, -70], // 四个数字分别为上右下左与原位置距离
- },
- axisLabel: {
- show: true,
- color: '#AED2E0',
- formatter: function (value) {
- return value.toFixed(1); // 显示小数点后两位
- },
- },
- splitLine: {
- show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
- type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
- lineStyle: {
- color: 'rgba(255,255,255,0.2)',
- width: 1, // 设置分割线的粗细为2
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- show: true, //是否显示坐标轴轴线,
- color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
- width: 1, //x轴粗细
- },
- },
- },
- series: [
- {
- itemStyle: {
- color: 'rgba(119, 201, 235,1)',
- },
- name: props.typeName,
- data: props.YAxis,
- type: 'line',
- lineStyle: {
- // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
- // color: "#CB2F0C",
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(119, 201, 235, 1)', // 0% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- width: 2,
- },
- areaStyle: {
- normal: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(110, 162, 251,1)',
- },
- {
- offset: 0.13,
- color: 'rgba(7, 81, 188,1)',
- },
- {
- offset: 0.16,
- color: 'rgba(7, 81, 188,1)',
- },
- {
- offset: 0.2,
- color: 'rgba(27, 91, 181,1)',
- },
- {
- offset: 0.99,
- color: 'rgba(119, 201, 235,0)',
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- },
- },
- },
- ],
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>