- 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;