- import useUserStore from '@/store/modules/user';
- const pinias = useUserStore();
-
- const chartOption = {
- option1: {
- color: pinias.$state.chartColor,
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- top: '25%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '2%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: [1, 2],
- 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')
- },
- axisLabel: {
- color: '#c6c6c6',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: [{ type: 'line', smooth: true, data: [12, 34] }],
- },
- option11: {
- color: pinias.$state.chartColor,
- tooltip: {
- trigger: 'axis',
- alwaysShowContent: true, //是否永远显示提示框
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无风险',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- top: '25%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '2%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: [1, 2],
- 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')
- },
- axisLabel: {
- color: '#c6c6c6',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: [{ type: 'line', smooth: true, data: [12, 34] }],
- },
- option2: {
- color: pinias.$state.chartColor,
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- top: '25%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '2%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: [
- {
- type: 'category',
- data: ['1', '3'],
- axisLabel: {
- color: '#c6c6c6',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- ],
- yAxis: [
- {
- name: '小时降雨量(mm)',
- 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: '累计降雨量(mm)',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#c6c6c6', //字体颜色
- fontSize: 12, //字体大小
- align: 'right', // 文字水平对齐方式,默认自动('left','center','right')
- },
- axisLabel: {
- color: '#c6c6c6',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: [
- {
- name: '小时降雨量',
- type: 'bar',
- barMaxWidth: 30, // 设置柱子的最大宽度为30
- yAxisIndex: 0,
- data: [12, 23],
- },
- {
- name: '累计降雨量',
- type: 'line',
- smooth: true,
- yAxisIndex: 1,
- symbolSize: 8,
- data: [13, 20],
- },
- ],
- },
- option22: {
- color: pinias.$state.chartColor,
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- top: '25%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '2%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: [
- {
- type: 'category',
- data: ['1', '3'],
- axisLabel: {
- color: '#c6c6c6',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- ],
- yAxis: [
- {
- name: '预报雨量(mm)',
- 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: '预计累计雨量(mm)',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#c6c6c6', //字体颜色
- fontSize: 12, //字体大小
- align: 'right', // 文字水平对齐方式,默认自动('left','center','right')
- },
- axisLabel: {
- color: '#c6c6c6',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: [
- {
- name: '预报雨量',
- type: 'bar',
- barMaxWidth: 30, // 设置柱子的最大宽度为30
- yAxisIndex: 0,
- data: [12, 23],
- },
- {
- name: '预计累计雨量',
- type: 'line',
- smooth: true,
- yAxisIndex: 1,
- symbolSize: 8,
- data: [13, 20],
- },
- ],
- },
- option3: {
- color: pinias.$state.chartColor,
- grid: {
- bottom: 0,
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c}处 ({d}%)',
- },
- legend: {
- orient: 'vertical',
- right: 10,
- y: 'center',
- icon: 'circle',
- textStyle: {
- color: '#c6c6c6',
- },
- formatter: name => {
- let v;
- chartOption.option3.series.data.forEach(item => {
- if (item.name === name) {
- v = item.value;
- }
- });
- return name + ' ' + v + ' 处';
- },
- },
- series: {
- type: 'pie',
- radius: ['55%', '75%'],
- center: ['30%', '50%'],
- label: {
- show: false,
- position: 'outer',
- },
- labelLine: {
- length: 30,
- show: false,
- },
- data: [
- { value: 135.6, name: '低风险区域' },
- { value: 73.5, name: '中风险区域' },
- { value: 12.5, name: '高风险区域' },
- ],
- },
- },
- option4: {
- color: pinias.$state.chartColor,
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- title: {
- left: 'center',
- text: '降雨过程线',
- textStyle: {
- color: '#333', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- top: '15%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '8%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: '#333',
- },
- data: [],
- },
- xAxis: {
- type: 'category',
- data: ['1', '2'],
- axisLabel: {
- color: '#333',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- yAxis: [
- {
- name: 'mm',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#333', //字体颜色
- fontSize: 12, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- },
- axisLabel: {
- color: '#333',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: [{ name: '降雨量', type: 'bar', barMaxWidth: 30, data: [12, 34] }],
- },
- };
- export default chartOption;