- <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, Number],
- default: '',
- },
- zoomData: {
- type: Array,
- default: () => [0, 100],
- },
- });
-
- watch(
- () => props.refresh,
- value => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
-
- function init() {
- myChart.value = echarts.init(document.getElementById(id));
-
- let newarr = [];
- let max = Math.max(...props.YAxis);
- // console.log('max', max);
- props.YAxis.forEach(item => {
- newarr.push(max);
- });
-
- let barWidth = 6;
- 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 = params[i].seriesName == props.typeName ? 'mm' : '个';
- relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value;
- }
- }
- return relVal;
- },
- },
- grid: {
- left: '6%',
- right: '4%',
- bottom: '3%',
- top: '5%',
- containLabel: true,
- },
- xAxis: {
- max: Number(max),
- type: 'value',
- boundaryGap: [0, 0.01],
- axisLabel: {
- show: true,
- color: '#AED2E0',
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- },
- },
- splitLine: {
- show: true, // 是否显示分隔线。默认数值轴显示,类目轴不显示
- type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点状类型)
- lineStyle: {
- color: 'rgba(255,255,255,0.2)',
- width: 1, // 设置分割线的粗细为2
- },
- },
- },
- yAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: '#fff',
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false, // 不显示坐标轴刻度线
- },
- data: props.XAxis,
- name: props.typeName,
- nameLocation: 'start',
- nameTextStyle: {
- color: '#AED2E0',
- padding: [-8, 0, 0, -100], // 四个数字分别为上右下左与原位置距离
- },
- },
-
- dataZoom: [
- {
- type: 'inside', // 支持内部鼠标滚动平移
- start: props.zoomData[0],
- end: props.zoomData[1],
- yAxisIndex: 0,
- zoomOnMouseWheel: true, // 关闭滚轮缩放
- moveOnMouseWheel: true, // 开启滚轮平移
- moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
- },
- ],
- series: [
- {
- data: props.YAxis,
- name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
- type: 'pictorialBar', // 系列类型
- symbolSize: [barWidth / 1.2, barWidth / 1.2], // 标记的大小
- symbolOffset: [barWidth - 7, 0], // 标记相对于原本位置的偏移
- symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
- // 图例的图形样式
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(255, 255, 255,1)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(255, 255, 255,1)', // 100% 处的颜色
- },
- ],
- },
- },
- z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
- },
- {
- data: props.YAxis,
- name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
- type: 'pictorialBar', // 系列类型
- symbolSize: function (data) {
- let arr = [barWidth + 2, 0];
- // 根据数据点的值动态改变图标大小
- console.log('data', data);
- if (data != 0) {
- return [barWidth * 2, barWidth * 2];
- } else {
- return [0, 0];
- }
- },
- symbolOffset: [barWidth + 2, 0],
- symbolPosition: 'end', // 图形的定位位置。可取值:start、end、center
- z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
- itemStyle: {
- color: 'transparent',
- borderColor: '#fff',
- borderType: 'solid',
- borderWidth: 10,
- },
- },
- // 柱状图
- {
- name: props.typeName, // 系列名称, 用于tooltip的显示, legend 的图例筛选
- type: 'bar', // 系列类型
- barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
- barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
- // 图例的图形样式
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(83, 180, 232,0.3)', // 0% 处的颜色
- },
- {
- offset: 1,
- color: 'rgba(83, 180, 232,1)', // 100% 处的颜色
- },
- ],
- },
- },
- data: props.YAxis,
- },
- // 背景
- {
- name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
- type: 'bar', // 系列类型
- barWidth: barWidth, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
- barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
- // 图例的图形样式
- itemStyle: {
- color: '#335082',
- opacity: 0.5,
- },
- z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
- data: newarr, // 系列中的数据内容数组
- },
- ],
- };
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
-
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>