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;
