import useUserStore from '@/store/modules/user'; const pinias = useUserStore(); let optionChart = { // 柱状图+折线图 option1: { color: pinias.$state.chartColor, // 显示暂无数据 graphic: { type: 'text', // 类型:文本 left: 'center', top: 'middle', silent: true, // 不响应事件 invisible: false, // 有数据就隐藏 style: { fill: '#c6c6c6', fontWeight: 'bold', text: '暂无数据', fontFamily: 'Microsoft YaHei', fontSize: '18px', }, }, tooltip: { trigger: 'axis', confine: true, //是否将 tooltip 框限制在图表的区域内 }, title: { left: 'left', text: '', top: 10, bottom: 10, left: 10, textStyle: { color: '#545E75', //字体颜色 fontSize: 16, //字体大小 }, }, grid: { left: '3%', right: '7%', top: '20%', bottom: '3%', containLabel: true, }, legend: { top: '2%', orient: 'horizontal', //horizontal left: 'center', //left ,center textStyle: { color: 'inherit', }, }, xAxis: { type: 'category', data: ['2023', '2024', '2025'], axisLabel: { color: '#c6c6c6', }, axisLine: { lineStyle: { color: '#066592', }, }, }, yAxis: [ { name: 'k㎡', type: 'value', nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameTextStyle: { color: '#c6c6c6', //字体颜色 fontSize: 12, //字体大小 align: 'center', // 文字水平对齐方式,默认自动('left','center','right') }, splitLine: { lineStyle: { type: 'dashed', color: '#066592', }, }, axisLabel: { color: '#c6c6c6', }, }, { name: '%', type: 'value', nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameTextStyle: { color: '#c6c6c6', //字体颜色 fontSize: 12, //字体大小 align: 'center', // 文字水平对齐方式,默认自动('left','center','right') }, axisLabel: { color: '#c6c6c6', }, splitLine: { lineStyle: { type: 'dashed', color: '#066592', }, }, }, ], series: [ { name: '面积', type: 'bar', barWidth: 16, yAxisIndex: 0, data: [24, 12, 9], }, { name: '占建成区比例', type: 'line', smooth: true, yAxisIndex: 1, symbolSize: 8, data: [14, 8, 5], }, ], }, // 双Y轴柱状图 option2: { color: pinias.$state.chartColor, // 显示暂无数据 graphic: { type: 'text', // 类型:文本 left: 'center', top: 'middle', silent: true, // 不响应事件 invisible: false, // 有数据就隐藏 style: { fill: '#c6c6c6', fontWeight: 'bold', text: '暂无数据', fontFamily: 'Microsoft YaHei', fontSize: '18px', }, }, tooltip: { trigger: 'axis', confine: true, //是否将 tooltip 框限制在图表的区域内 axisPointer: { type: 'shadow', }, }, grid: { left: '3%', right: '7%', top: '20%', bottom: '3%', containLabel: true, }, legend: { top: '2%', orient: 'horizontal', //horizontal left: 'center', //left ,center textStyle: { color: 'inherit', }, }, xAxis: { type: 'category', data: ['2023', '2024', '2025'], axisLabel: { color: '#c6c6c6', }, axisLine: { lineStyle: { color: '#066592', }, }, }, yAxis: [ { name: 'kg', type: 'value', nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameTextStyle: { color: '#c6c6c6', //字体颜色 fontSize: 12, //字体大小 align: 'left', // 文字水平对齐方式,默认自动('left','center','right') }, splitLine: { lineStyle: { type: 'dashed', color: '#066592', }, }, axisLabel: { color: '#c6c6c6', }, }, { name: 'm³', type: 'value', nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameTextStyle: { color: '#c6c6c6', //字体颜色 fontSize: 12, //字体大小 align: 'left', // 文字水平对齐方式,默认自动('left','center','right') }, axisLabel: { color: '#c6c6c6', }, splitLine: { lineStyle: { type: 'dashed', color: '#066592', }, }, }, ], series: [ { name: '溢流污染物总量(COD)', type: 'bar', barWidth: 20, yAxisIndex: 0, data: [12, 2, 9], }, { name: '溢流量', type: 'bar', barWidth: 20, yAxisIndex: 1, data: [11, 23, 60], }, ], }, // 柱状图 option3: { color: pinias.$state.chartColor, // 显示暂无数据 graphic: { type: 'text', // 类型:文本 left: 'center', top: 'middle', silent: true, // 不响应事件 invisible: false, // 有数据就隐藏 style: { fill: '#c6c6c6', fontWeight: 'bold', text: '暂无数据', fontFamily: 'Microsoft YaHei', fontSize: '18px', }, }, tooltip: { trigger: 'axis', confine: true, //是否将 tooltip 框限制在图表的区域内 axisPointer: { type: 'shadow', }, }, grid: { left: '3%', right: '7%', top: '20%', bottom: '3%', containLabel: true, }, legend: { top: '2%', orient: 'horizontal', //horizontal left: 'center', //left ,center textStyle: { color: 'inherit', }, }, xAxis: { type: 'category', data: ['2023', '2024'], axisLabel: { color: '#c6c6c6', }, axisLine: { lineStyle: { color: '#066592', }, }, }, yAxis: { name: 't', type: 'value', nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameTextStyle: { color: '#c6c6c6', //字体颜色 fontSize: 12, //字体大小 align: 'left', // 文字水平对齐方式,默认自动('left','center','right') }, splitLine: { lineStyle: { type: 'dashed', color: '#066592', }, }, axisLabel: { color: '#c6c6c6', }, }, series: [ { name: '雨水资源利用量', type: 'bar', barWidth: 20, data: [12, 20], }, ], }, }; export default optionChart;