- <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: '',
- },
- typeName2: {
- 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 = 12;
- let option = {
- color: ['rgba(96, 203, 248,1)', 'rgba(124, 255, 186,1)'],
- legend: {
- // selectedMode: false,
- icon: 'rect',
- itemStyle: {
- color: 'inherit',
- },
- textStyle: {
- color: '#fff',
- },
- itemWidth: 13,
- itemHeight: 13,
- },
- tooltip: {
- trigger: 'axis',
- backgroundColor: '#004284',
- borderColor: '#0B9BFF',
- borderRadius: 6, // 设置圆角大小
- textStyle: {
- // 字体颜色
- color: 'white',
- // 字体大小
- fontSize: 14,
- },
- formatter: 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: '8%',
- right: '4%',
- bottom: '3%',
- top: '20%',
- containLabel: true,
- },
- xAxis: {
- boundaryGap: true,
- type: 'category',
- data: props.XAxis,
- axisLabel: {
- show: true,
- color: '#fff',
- // interval: 0,
- formatter: function (params) {
- let one = params.substring(0, 3);
- let two = params.substring(3, 6);
- let three = params.substring(6, 8);
- let four = params.substring(8) ? '...' : '';
-
- let newParamsName = one + '\n' + two + '\n' + three + four;
- return newParamsName;
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- show: true, //是否显示坐标轴轴线,
- color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
- width: 1, //x轴粗细
- },
- },
- axisTick: {
- show: false, //是否显示刻度
- },
- },
- yAxis: [
- {
- position: 'left',
- type: 'value',
- name: props.typeName,
- nameLocation: 'end',
- nameTextStyle: {
- color: '#AED2E0',
- padding: [-5, 60, 0, 0], // 四个数字分别为上右下左与原位置距离
- },
- axisLabel: {
- show: true,
- color: '#AED2E0',
- formatter: function (value) {
- return value.toFixed(1); // 显示小数点后两位
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- show: true, //是否显示坐标轴轴线,
- color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
- width: 1, //x轴粗细
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,0.2)',
- },
- },
- },
- {
- position: 'right',
- type: 'value',
- name: props.typeName2,
- nameLocation: 'end',
- nameTextStyle: {
- color: '#AED2E0',
- padding: [0, -40, 0, 0], // 四个数字分别为上右下左与原位置距离
- },
- axisLabel: {
- show: true,
- color: '#AED2E0',
- formatter: function (value) {
- return value.toFixed(1); // 显示小数点后两位
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- show: true, //是否显示坐标轴轴线,
- color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
- width: 1, //x轴粗细
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,0.2)',
- },
- },
- },
- ],
- series: [
- {
- yAxisIndex: 0,
- name: '现状规模',
- type: 'bar',
- barWidth: barWidth,
- itemStyle: {
- borderRadius: [6, 6, 6, 6],
- color: function () {
- return new echarts.graphic.LinearGradient(
- 0,
- 1,
- 0,
- 0,
- [
- {
- offset: 0,
- color: 'rgba(43, 174, 227,0.5)',
- },
- {
- offset: 1,
- color: 'rgba(43, 174, 227,1)',
- },
- ],
- false
- );
- },
- },
- // showBackground: true,
- backgroundStyle: {
- color: 'transparent',
- borderWidth: 1,
- borderColor: 'rgba(148, 250, 65, 0.2)',
- },
- data: props.YAxis,
- },
- {
- yAxisIndex: 1,
- itemStyle: {
- color: 'rgba(124, 255, 186,1)',
- },
- name: '服务面积',
- data: props.YAxis2,
- // data: [12223, 24444, 322222, 4, 5, 6, 74, 33, 44],
- type: 'line',
- smooth: true,
- lineStyle: {
- // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
- // color: "#CB2F0C",
- color: 'rgba(124, 255, 186,1)',
- width: 1,
- },
- },
- ],
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>