<!-- * @Author: wuhao930406 1148547900@qq.com * @Date: 2023-08-08 09:18:08 * @LastEditors: wuhao930406 1148547900@qq.com * @LastEditTime: 2023-08-18 13:54:42 * @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-gaugeTriple.vue * @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. --> <script setup> import { http } from "@/api/request"; const state = reactive({ chartData: { legend: ['年度访问量'], colors:[$c.aql4, $c.cyl4,$c.cbl3], }, chartOption: {} }) const processData = (dataList) => { let legend = state.chartData.legend, colors = state.chartData.colors, processedData = [] legend.forEach((item, i) => { processedData.push({ name: legend[i], type: 'line', label: { show: true, position: 'top', // 将 label 放在柱子顶部 color: $c.aql4, textShadow: 'none', // 去除文字阴影 }, itemStyle: { color: colors[i], borderRadius: 5 }, data: dataList?.map((item) => { return item.value; }) }) }) state.chartOption.series = processedData; state.chartOption.xAxis.data = dataList?.map(it => it.label); state.chartOption.legend.data = legend; state.chartOption.legend.show = false; } const processOption = (dataList) => { state.chartOption = { update: true, // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { show: true, data: [], top: 0, right: 10, }, // toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, }, grid: { left: '16px', right: '16px', bottom: '5%', top: "25%", containLabel: true }, yAxis: { type: 'value', splitNumber: 3, axisLabel: { align: 'right',color:$c.aql4 } }, xAxis: { type: 'category', data: [], axisLabel: { align: 'center',color:$c.aql4 } }, series: [] } processData(dataList) } onMounted(() => { //processOption(); http("POST", "/index/statistics/yearVisit", {}).then((res) => { processOption(res?.data?.dataList); }) }) </script> <template> <echartsInit :chartOption="state.chartOption"></echartsInit> </template> <style lang="less"></style>