- import useUserStore from '@/store/modules/user';
- import * as echarts from 'echarts';
- const pinias = useUserStore();
-
- let optionChart = {
- // 饼图
- option1: {
- color: pinias.$state.chartColor,
- title: { text: '管线种类', x: 'center', y: 'center', textStyle: { fontSize: '13', color: '#00d1ff' } },
- grid: { bottom: 0 },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: false, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c}个 ({d}%)',
- },
- series: {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- data: [
- { name: '钢管', value: 9 },
- { name: 'PVC', value: 12 },
- { name: 'PE', value: 9 },
- { name: '镀锌管', value: 3 },
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- },
- },
- label: {
- show: true,
- formatter: '{d|{b}}\n {c}个 ({d|{d}%})',
- position: 'outside',
- rich: {
- d: {
- fontSize: 13,
- color: '#509BE0',
- align: 'left',
- fontFamily: 'SourceHanSansCN',
- },
- },
- },
- },
- },
- // 柱状图
- 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: '5%',
- top: '20%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '2%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: {
- type: 'category',
- data: ['PH', 'COD'],
- axisLabel: {
- color: '#c6c6c6',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- yAxis: {
- name: '',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#c6c6c6', //字体颜色
- fontSize: 12, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- axisLabel: {
- fontSize: 12,
- color: '#c6c6c6',
- },
- },
- series: [
- {
- name: '',
- type: 'bar',
- barWidth: 10,
- data: [12, 20],
- label: {
- show: true,
- position: 'top',
- },
- },
- ],
- },
- // 柱状图+折线图
- 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 框限制在图表的区域内
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '5%',
- 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: 'm',
- 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: 'm³',
- 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: 'line',
- smooth: true,
- yAxisIndex: 0,
- symbolSize: 8,
- data: [14, 8, 5],
- },
- {
- name: '调蓄容积',
- type: 'bar',
- barWidth: 10,
- yAxisIndex: 1,
- data: [24, 12, 9],
- },
- ],
- },
- // 折线图
- option4: {
- color: ['#1480FF', '#FF4444'],
- // 显示暂无数据
- 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 框限制在图表的区域内
- },
- grid: {
- left: '3%',
- right: '5%',
- 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: '吨',
- 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: '雨水口COD排放量',
- type: 'line',
- smooth: true,
- data: [24, 12, 9],
- // 填充区域的样式
- areaStyle: {
- // 填充色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: 'rgba(20, 128, 255, 0)' },
- { offset: 0, color: 'rgba(20, 128, 255, 1)' },
- ]),
- },
- },
- {
- name: '溢流口COD排放量',
- type: 'line',
- smooth: true,
- data: [14, 8, 5],
- // 填充区域的样式
- areaStyle: {
- // 填充色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: 'rgba(255, 68, 68, 0)' },
- { offset: 0, color: 'rgba(255, 68, 68, 1)' },
- ]),
- },
- },
- ],
- },
- //双边折线图
- option5: {
- tooltip: {
- show: true,
- position: 'top',
- offset: [0, 0],
- textStyle: {
- color: '#666666',
- fontSize: 14,
- },
- formatter: `{a0}</br> {b0}:{c0}%`,
- },
- legend: {
- type: 'plain',
- textStyle: {
- color: '#D1DEEE', //文字的颜色
- fontSize: 12, //文字的字号
- },
- },
- grid: [
- {
- show: false,
- left: 0,
- top: 30,
- bottom: 22,
- width: '27%',
- },
- {
- show: false,
- left: '30%',
- top: 30,
- bottom: 0,
- containLabel: true,
- width: '33%',
- },
- {
- show: false,
- left: '63%',
- top: 30,
- bottom: 0,
- containLabel: true,
- width: '33%',
- },
- ],
- xAxis: [
- {
- gridIndex: 0,
- show: true,
- },
- {
- gridIndex: 1,
- type: 'value',
- inverse: true,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- verticalAlign: 'middle',
- textStyle: {
- color: '#6E8098',
- fontSize: 12,
- },
- },
- splitLine: {
- show: false,
- },
- },
- {
- gridIndex: 2,
- type: 'value',
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- verticalAlign: 'middle',
- textStyle: {
- color: '#6E8098',
- fontSize: 12,
- },
- },
- splitLine: {
- show: false,
- },
- },
- ],
- yAxis: [
- {
- name: '',
- gridIndex: 0,
- type: 'category',
- inverse: true,
- position: 'right',
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- },
- {
- gridIndex: 1,
- type: 'category',
- inverse: true,
- position: 'right',
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- margin: 8,
- textStyle: {
- color: '#9D9EA0',
- fontSize: 12,
- },
- },
- data: [],
- triggerEvent: true,
- },
- {
- gridIndex: 2,
- type: 'category',
- inverse: true,
- position: 'left',
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- textStyle: {
- color: '#9D9EA0',
- fontSize: 12,
- },
- },
- data: [],
- triggerEvent: true,
- },
- ],
- series: [
- {
- name: '资金占比',
- type: 'bar',
- barGap: 20,
- barWidth: 6,
- xAxisIndex: 1,
- yAxisIndex: 1,
- showBackground: true,
- backgroundStyle: {
- color: '#011431',
- },
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: true,
- position: 'left',
- offset: [0, 0],
- textStyle: {
- color: '#666666',
- fontSize: 14,
- },
- },
- },
- itemStyle: {
- normal: {
- barBorderRadius: [10, 0, 0, 10],
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#FFCE65',
- },
- {
- offset: 1,
- color: '#052a57',
- },
- ]),
- },
- },
- data: [],
- },
- {
- name: '面积占比',
- type: 'bar',
- barGap: 20,
- barWidth: 6,
- xAxisIndex: 2,
- yAxisIndex: 2,
- showBackground: true,
- backgroundStyle: {
- color: '#011431',
- },
- label: {
- normal: {
- show: false,
- },
- emphasis: {
- show: true,
- position: 'right',
- offset: [0, 0],
- textStyle: {
- color: '#666666',
- fontSize: 14,
- },
- },
- },
- itemStyle: {
- normal: {
- barBorderRadius: [0, 10, 10, 0],
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#303e54',
- },
- {
- offset: 1,
- color: '#1093FA',
- },
- ]),
- },
- },
- data: [],
- },
- ],
- },
- // 堆叠柱状图
- option6: {
- 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',
- axisPointer: {
- type: 'shadow',
- },
- },
- legend: {
- textStyle: {
- color: '#fff',
- },
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- data: ['后湖公园', '槐荫公园', '董永公园'],
- axisLabel: {
- textStyle: {
- color: '#fff',
- },
- interval: 0,
- formatter: function (value, index) {
- // debugger;
- if (index % 2 != 0) {
- return '\n\n' + value;
- } else {
- return value;
- }
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '单位:公顷',
- nameTextStyle: {
- color: '#fff',
- },
- axisLabel: {
- textStyle: {
- color: '#fff',
- },
- },
- },
- ],
- series: [
- {
- name: '水体面积',
- type: 'bar',
- stack: 'Ad',
- emphasis: {
- focus: 'series',
- },
- data: [9.3, 0.9, 0.78],
- itemStyle: {
- color: '#29bdff',
- },
- barWidth: '50%',
- },
- {
- name: '绿地面积',
- type: 'bar',
- stack: 'Ad',
-
- emphasis: {
- focus: 'series',
- },
- data: [4.8, 14.8, 4.7],
- itemStyle: {
- color: '#67c23a',
- },
- },
- {
- name: '硬化区域面积',
- type: 'bar',
- stack: 'Ad',
-
- emphasis: {
- focus: 'series',
- },
- data: [3.3, 0.17, 0.78],
- itemStyle: {
- color: '#8e8e8e',
- },
- },
- ],
- },
- };
-
- export default optionChart;