各类echarts样式修改记录
各类echarts样式修改记录
<template>
<div class="wrapper">
<div id="temchart" class="tem-chart"></div>
<div id="watchart" class="wat-chart"></div>
<!-- 生物多样性 -->
<div class="biology-wrapper">
<div id="bckchart" class="bck-chart"></div>
<div id="biologychart" class="biology-chart"></div>
</div>
<!-- 月度流量统计 -->
<div class="sta-wrapper">
<!-- 饼图图例 -->
<div class="sta-legend">
<ul class="legend-ul">
<li v-for="(item, index) in legendList" :key="index">
<div class="legend-point" :style="{ 'background-color': item.color }">
</div>
<span class="legend-name">{{ item.name }}</span>
<span class="legend-value" :style="{ 'color': item.color }">{{ item.value }}%</span>
<div class="legend-line"></div>
</li>
</ul>
</div>
<!-- 饼图与折线图 -->
<div id="stachart" class="sta-chart"></div>
<div id="piebckchart" class="pie-bck"></div>
</div>
<!-- 水质类别统计 -->
<div class="category-wrapper">
<!-- 春夏秋冬 -->
<ul class="season-ul">
<li v-for="(item, index) in seasonList" :key="index">
<span
:class="[item.checked ? 'check-season' : '']"
@click="checkSeason(index)">{{ item.name }}</span>
</li>
</ul>
<div id="categorychart" class="category-chart"></div>
<div id="categorybckchart" class="category-bck"></div>
<!-- 饼图图例 -->
<ul class="category-ul">
<li v-for="(item, index) in categoryList" :key="index">
<div class="category-point" :style="{ 'background-color': item.color }"></div>
<span class="category-name">{{ item.name }}</span>
<span class="category-percent" :style="{ 'color': item.color }">{{ item.percent }}%</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'qinzhou',
data() {
return {
temChart: '', // 航道气温趋势图
watChart: '', // 水质年际变化
biologyChart: '', // 生物多样性柱状图
bckchart: '', // 生物多样性柱状图背景
stachart: '', // 月度流量统计
pieLegendData: ['捕捞船', '油轮', '客轮', '货轮', '执法船', '其他类',],
legendList: [
{ name: '捕捞船', value: '', color: '#115FEA' },
{ name: '油轮', value: '', color: '#61AEFF' },
{ name: '客轮', value: '', color: '#10D3FF' },
{ name: '货轮', value: '', color: '#10EBE3' },
{ name: '执法船', value: '', color: '#776CF4' },
{ name: '其他类', value: '', color: '#EB9C36' }
],
piebckchart: '', //月度流量统计饼图背景
categorychart: '', // 水质类别统计图
seasonList: [
{ name: '春', checked: false },
{ name: '夏', checked: true },
{ name: '秋', checked: false },
{ name: '冬', checked: false }
], // 春夏秋冬
categoryList: [ // 水质数据
{ name: '一类水质', value: '12', percent: '', color: '#3594FF' },
{ name: '二类水质', value: '23', percent: '', color: '#3CC0CB' },
{ name: '三类水质', value: '32', percent: '', color: '#FFA840' },
{ name: '四类水质', value: '43', percent: '', color: '#FCD8AA' },
{ name: '劣四类水质', value: '21', percent: '', color: '#96F2F8' }
],
categoryNum: '', //水质类别统计图中间数值
categorybckchart: '', // 水质类别统计图背景
}
},
mounted() {
this.initTemChart()
this.initWatChart()
this.initBiologyChart()
this.initBiologyBck()
this.initStaChart()
this.initPieBckChart()
this.initCategoryChart()
this.initCategoryBckChart()
},
methods: {
// 初始化航道气温趋势图
initTemChart() {
this.temChart = this.$echarts.init(document.getElementById('temchart'))
var option = {
title: {
text: 'xx航道气温趋势图',
x: 'center',
// y: '10%',
textStyle: { //标题样式
fontSize: '18',
// fontFamily:'FZLTZCHK--GBK1-0',
color: 'rgba(255,255,255,1)',
}
},
//图例名
// legend: {
// data: ['气温'],
// orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
// x: 'left', //设置图例位置
// y: 'top',
// textStyle: { //图例样式
// fontSize: '18',
// fontFamily:'FZLTZCHK--GBK1-0',
// color: 'rgba(255,255,255,1)',
// }
// },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: { //x轴显示
"show": true,
},
axisTick: {
"show": false //去掉x轴刻度线
},
axisLabel: {
color: "#BACCF4" //坐标轴的文本颜色
},
//坐标轴颜色
axisLine: {
lineStyle: {
color: '#00bbff',
width: 2
}
},
//x轴文字旋转
// axisLabel: {
// rotate: 30,
// interval: 0,
// interval: 0 //设置 X 轴数据间隔几个显示一个，为0表示都显示
// },
},
yAxis: {
name: '℃',
type: 'value',
// interval: 10,
min: 0, // 配置 Y 轴刻度最小值
max: 40, // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: '#fff', // 字体颜色
fontSize: 16, // 字体大小
fontWeight: 'bolder',
//关键代码
padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: true, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
color: "#BACCF4", //刻度线标签颜色
fontSize: 14,
formatter: function (value) {
if (value / 10 % 2 === 1) {
return value;
} else {
return ''
}
}
},
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '37px',
right: '30px',
bottom: '10%',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
// tooltip显示
// tooltip: {
// trigger: 'axis'
// },
//工具框，可以选择
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
series: [
{
data: [0, 0, 0, 0, 0, 0],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(190,216,240,0.06)'
}
},
{
name: '气温',
data: [3, 5, 6, 9, 30, 32],
type: 'line',
symbol: 'circle', //设置拐点为实圈圆
symbolSize: 19, //拐点圆的大小
smooth: false, //设置折线为圆滑曲线,false则有转折点，若为数值（0.5）则代表折线弧度
stack: "Total",
showAllSymbol: false,
// areaStyle: {
// color: 'rgba(46,82,212,0.2)' //折线区域的背景颜色
// },
// markPoint: { //最高点最低点显示
// data: [
// { type: 'max', name: 'Max' },//最大值
// { type: 'min', name: 'Min' }//最小值
// ]
// },
itemStyle: {
normal: {
// color: '#00E0FF', // 设置折线点颜色
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "#00bbff" //中心颜色
},
{
offset: 0.4,
color: "#00bbff" //中心颜色
},
{
offset: 0.5,
color: "#ffffff00"
},
{
offset: 1,
color: "#ffffff00"
}
]
},
borderColor: "#00bbff", //圆点边框线颜色
borderWidth: 2,
// color: '#fff',
label: { //在折线拐点上显示数据
show: true,
textStyle: { // 拐点文字样式
color: '#48E9FF',
fontWeight: 500,
fontSize: 16,
position: 'top', // 定位在拐点上面
// distance: 115 // 偏移量，举例拐点多少
},
},
fontSize: 18,
lineStyle: { //设置折线样式
width: 2, //折线宽度
color: '#00bbff', //折线颜色
//折线颜色渐变
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
// offset: 0,
// color: 'rgba(45,105,249,1)'
// },
// {
// offset: 1,
// color: 'rgba(89,205,253,1)'
// }])
}
},
emphasis: { //鼠标经过时折点小圆圈样式
borderColor: 'rgba(0,196,132,0.2)',
borderWidth: 10
},
},
}
]
};
this.temChart.setOption(option);
},
// 初始化水质年际变化趋势图
initWatChart() {
this.watChart = this.$echarts.init(document.getElementById('watchart'))
var option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: { //x轴显示
"show": true,
},
axisTick: {
"show": false //去掉x轴刻度线
},
//坐标轴颜色
axisLine: {
lineStyle: {
color: '#BAE7FF',
width: 2
}
},
},
yAxis: {
name: 'mg/l',
type: 'value',
// interval: 10,
min: 0, // 配置 Y 轴刻度最小值
max: 500, // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: 'rgba(230,247,255,0.5)', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: '400',
//关键代码
padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: true, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false,
},
axisLabel: {
color: "rgba(230,247,255,0.5)", //刻度线标签颜色
fontSize: 14,
formatter: function (value) {
if (value / 100 % 2 === 0) {
return value;
} else {
return ''
}
}
},
},
//图例名
legend: {
// data: ['磷酸盐', '化学需氧量'],
data: [
{
name: '磷酸盐',
icon: 'rect', // 用矩形替换
}, {
name: '化学需氧量',
icon: 'rect', // 用矩形替换
},
],
itemWidth: 16, //矩形宽度
itemHeight: 2, //矩形高度
orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
x: 'center', //设置图例位置
y: '10',
textStyle: { //图例样式
fontSize: '14',
fontWeight: '400',
fontFamily: 'FZLTZCHK--GBK1-0',
color: '#E6F7FF',
},
},
series: [
// 磷酸盐
{
data: [170, 490, 210, 218, 135, 147],
type: 'line',
name: '磷酸盐',
smooth: true,
symbolSize: 0,
itemStyle: {
normal: {
color: '#2CDFF2',
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(44,223,242,0.2)',
},
{
offset: 1,
color: 'rgba(44,223,242,0)',
},
],
global: false,
},
},
},
// 化学需氧量
{
data: [270, 230, 324, 418, 435, 347],
type: 'line',
name: '化学需氧量',
smooth: true,
showSymbol: false,
itemStyle: {
normal: {
color: '#61AEFF'
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(97,174,255,0.2)',
},
{
offset: 1,
color: 'rgba(97,174,255,0)',
},
],
global: false,
},
},
}
]
};
this.watChart.setOption(option);
},
// 初始化生物多样性
initBiologyChart() {
this.biologyChart = this.$echarts.init(document.getElementById('biologychart'))
var option = {
xAxis: {
type: 'category',
data: ['鱼类', '绕足类', '有尾类', '虾类', '水母类', '丝状藻类', '棕榈藻', '箭虫'],
axisLine: { //x轴显示
"show": true,
},
axisTick: {
"show": false //去掉x轴刻度线
},
//坐标轴颜色
axisLine: {
lineStyle: {
color: '#00bbff',
width: 2
}
},
// x轴文字旋转
axisLabel: {
rotate: 30,
interval: 0,
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
color: "rgba(230,247,255,0.5)" //坐标轴的文本颜色
},
},
yAxis: {
name: '种',
type: 'value',
// interval: 10,
min: 0, // 配置 Y 轴刻度最小值
max: 40, // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: 'rgba(230,247,255,0.5)', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: '400',
//关键代码
padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: true, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
color: "#BACCF4", //刻度线标签颜色
fontSize: 14,
formatter: function (value) {
if (value / 10 % 2 === 1) {
return value;
} else {
return ''
}
}
},
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '37px',
right: '26px',
bottom: '1%',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
series: [
{
data: [13, 7, 28, 10, 7, 4, 14, 9],
type: 'bar',
barWidth: 12, //设置柱子宽度
color: 'blue',
showBackground: false,
backgroundStyle: {
color: 'rgba(190,216,240,0.06)'
},
label: { //在柱状图上显示数据
show: true,
position: 'top',
textStyle: { // 文字样式
color: '#fff',
fontWeight: 500,
fontSize: 14,
},
},
markPoint: {
symbol: 'rect',
symbolSize: '15',
},
itemStyle: { // 柱状图渐变
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: '#1A96F9' // 0% 处的颜色
},
{
offset: 1,
color: '#4CECFF' // 100% 处的颜色
}
]
},
},
},
]
};
this.biologyChart.setOption(option);
},
// 初始化生物多样性背景图
initBiologyBck() {
this.bckchart = this.$echarts.init(document.getElementById('bckchart'))
var option = {
xAxis: {
type: 'category',
data: ['鱼类', '绕足类', '有尾类', '虾类', '水母类', '丝状藻类', '棕榈藻', '箭虫'],
axisLine: { //x轴显示
"show": false,
},
axisTick: {
"show": false //去掉x轴刻度线
},
// x轴文字旋转
axisLabel: {
rotate: 30,
interval: 0,
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
color: "rgba(0,0,0,0)" //坐标轴的文本颜色
},
//坐标轴颜色
axisLine: {
show: false,
lineStyle: {
color: '#00bbff',
width: 2
}
},
},
yAxis: {
name: '',
type: 'value',
// interval: 10,
min: 0, // 配置 Y 轴刻度最小值
max: 40, // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: '#fff', // 字体颜色
fontSize: 16, // 字体大小
fontWeight: 'bolder',
//关键代码
padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: false, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
color: "rgba(255,0,0,0)", //刻度线标签颜色
fontSize: 14,
},
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '37px',
right: '26px',
bottom: '1%',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0, 0],
type: 'bar',
barWidth: 40, //设置柱子宽度
showBackground: true,
backgroundStyle: {
color: 'rgba(190,216,240,0.06)'
}
},
]
};
this.bckchart.setOption(option);
},
// 初始化月度流量统计图
initStaChart() {
this.stachart = this.$echarts.init(document.getElementById('stachart'))
let that = this // 解决Cannot read properties of undefined (reading 'setOption')错误
var option = {
title: {
text: '船舶流量趋势图',
x: 'center',
y: '48%',
textStyle: { //标题样式
fontSize: '14',
// fontFamily:'FZLTZCHK--GBK1-0',
color: '#E6F3FF',
}
},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '1月', '2月', '3月', '4月', '5月', '6月'],
['捕捞船', 156.5, 182.1, 188.7, 270.1, 153.4, 285.1],
['油轮', 251.1, 151.4, 355.1, 453.3, 373.8, 468.7],
['客轮', 240.1, 462.2, 369.5, 236.4, 145.2, 232.5],
['货轮', 325.2, 137.1, 141.2, 318, 233.9, 449.1],
['执法船', 321.1, 187.2, 376.5, 267.4, 451.2, 452.5],
['其他类', 288.2, 388.1, 386.2, 279, 489.9, 278.1]
]
},
xAxis: {
type: 'category',
axisLine: { //x轴显示
"show": true,
},
axisTick: {
"show": false //去掉x轴刻度线
},
//坐标轴颜色
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
},
// x轴文字旋转
axisLabel: {
// rotate: 30,
// interval: 0,
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
color: "rgba(230,247,255,0.5)" //坐标轴的文本颜色
},
},
yAxis: {
gridIndex: 0,
name: '艘',
type: 'value',
// interval: 10,
min: 0, // 配置 Y 轴刻度最小值
max: 500, // 配置 Y 轴刻度最大值
nameTextStyle: {
color: 'rgba(230,247,255,0.5)', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: '400',
//关键代码
padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: true, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
color: "#BACCF4", //刻度线标签颜色
fontSize: 14,
formatter: function (value) {
if (value / 100 % 2 === 0) {
return value;
} else {
return ''
}
}
},
},
grid: {
top: '55%',
},
series: [
// 捕捞船
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#115FEA',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(17,95,234,0.2)',
},
{
offset: 1,
color: 'rgba(17,95,234,0)',
},
],
global: false,
},
},
},
// 油轮
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#61AEFF',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(97,174,255,0.2)',
},
{
offset: 1,
color: 'rgba(97,174,255,0)',
},
],
global: false,
},
},
},
// 客轮
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#10D3FF',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: ' rgba(16,211,255,0.2)',
},
{
offset: 1,
color: ' rgba(16,211,255,0)',
},
],
global: false,
},
},
},
// 货轮
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#10EBE3',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(16,235,227,0.2)',
},
{
offset: 1,
color: 'rgba(16,235,227,0)',
},
],
global: false,
},
},
},
// 执法船
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#776CF4',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(119,108,244,0.2)',
},
{
offset: 1,
color: 'rgba(119,108,244,0)',
},
],
global: false,
},
},
},
// 其他类
{
type: 'line',
smooth: true,
showSymbol: false,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
color: '#EB9C36',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: ' rgba(235,156,54,0.2)',
},
{
offset: 1,
color: ' rgba(235,156,54,0)',
},
],
global: false,
},
},
},
// 环状饼图
{
type: 'pie',
radius: ['25%', '30%'],
id: 'pie',
color: ['#115FEA', '#61AEFF', '#10D3FF', '#10EBE3', '#776CF4', '#EB9C36'],
hoverAnimation: false, //开启放大效果
center: ['16%', '25%'],
itemStyle: {
borderRadius: 10,
borderColor: '#021F58',
borderWidth: 4
},
emphasis: {
focus: 'self',
},
label: {
show: false,
// formatter: '{b}: {@1月} ({d}%)'
formatter: function (value) {
var index = that.legendList.findIndex(item => item.name === value.name)
if (index != -1) {
that.legendList[index].value = value.percent
}
}
},
legend: {
show: true,
itemWidth: 8,//图例的图标直径，圆点的直径大小
itemGap: 20,
icon: 'circle',
textStyle: {
color: 'rgba(0,0,0,.65)',
},
formatter: name => { },
data: ['捕捞船', '油轮', '客轮', '货轮', '执法船', '其他类']
},
encode: {
itemName: 'product',
value: '1月',
tooltip: '1月'
},
tooltip: {
trigger: 'item'
},
},
]
};
// let that = this
this.stachart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
that.initPieBckChart()
that.stachart.setOption({
series: [
{
id: 'pie',
label: {
// formatter: '{b}: {@[' + dimension + ']} ({d}%)'
formatter: function (value) {
var index = that.legendList.findIndex(item => item.name === value.name)
if (index != -1) {
that.legendList[index].value = value.percent
}
return value.percent
}
},
encode: {
value: dimension,
tooltip: dimension
},
},
]
});
}
});
this.stachart.setOption(option);
},
// 初始化月度流量统计饼图背景图
initPieBckChart() {
this.piebckchart = this.$echarts.init(document.getElementById('piebckchart'))
var option = {
series: [
{
name: 'Access From',
type: 'pie',
radius: ['43%', '59%'],
center: ['16%', '50%'],
color: ['rgba(17,95,234, 0.3)', 'rgba(97,174,255,0.2)', 'rgba(16,211,255,0,2)', 'rgba(16,235,227,0.2)', 'rgba(119,108,244,0,2)', 'rgba(235,156,54,0.2)'],
hoverAnimation: false, //开启放大效果
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#021F58',
borderWidth: 4
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: 40,
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: this.legendList
}
]
};
this.piebckchart.setOption(option);
},
// 水质类别统计图
initCategoryChart() {
this.categorychart = this.$echarts.init(document.getElementById('categorychart'))
let that = this
var num = this.categoryNum
var option = {
title: {
text: '',
subtext: '',
left: '33%',
top: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '34%'],
center: ['35%', '50%'],
color: ['#3594FF', '#3CC0CB', '#FFA840', '#FCD8AA', '#96F2F8'],
hoverAnimation: false, //开启放大效果
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#021F58',
borderWidth: 4
},
label: {
show: false,
formatter: function (value) {
that.categoryNum = value.percent
var index = that.categoryList.findIndex(item => item.name === value.name)
if (index != -1) {
that.categoryList[index].percent = value.percent
}
return value.percent
},
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 26,
color: '#fff',
fontWeight: 'bold',
formatter: function (value) {
// console.log(value);
that.categoryNum = value.percent
// console.log(that.categoryNum);
// return '' +value.percent + '%'
return value.percent + '%'
},
position: 'center',
}
},
labelLine: {
show: false
},
data: this.categoryList
}
]
};
this.categorychart.setOption(option);
},
// 水质类别统计背景图
initCategoryBckChart() {
this.categorybckchart = this.$echarts.init(document.getElementById('categorybckchart'))
let that = this
var num = this.categoryNum
var option = {
title: {
text: '',
subtext: '',
left: '33%',
top: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '50%'],
center: ['35%', '50%'],
color: ['rgba(53,148,255, 0.3)', 'rgba(60,192,203,0.2)', 'rgba(255,168,64,0,2)', 'rgba(252,216,170,0.2)', 'rgba(150,242,248,0,2)'],
hoverAnimation: false, //开启放大效果
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#021F58',
borderWidth: 4
},
label: {
show: false,
formatter: function (value) {
that.categoryNum = value.percent
var index = that.categoryList.findIndex(item => item.name === value.name)
if (index != -1) {
that.categoryList[index].percent = value.percent
}
return value.percent
},
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 26,
color: '#fff',
fontWeight: 'bold',
formatter: function (value) {
// console.log(value);
that.categoryNum = value.percent
// console.log(that.categoryNum);
// return '' +value.percent + '%'
return value.percent + '%'
},
position: 'center',
}
},
labelLine: {
show: false
},
data: this.categoryList
}
]
};
this.categorybckchart.setOption(option);
},
checkSeason(index) {
console.log(index);
this.seasonList.map((item) =>{ item.checked = false})
this.seasonList[index].checked = true
}
}
}
</script>
<style scoped>
.wrapper {
width: 100%;
height: 100%;
}
/* 航道气温趋势图 */
.tem-chart {
float: left;
width: 25%;
height: 40%;
background-color: #021F58;
}
/* 水质年际变化 */
.wat-chart {
width: 25%;
height: 40%;
background-color: #021F58;
float: left;
margin-left: 40px;
}
/* 生物多样性 */
.biology-wrapper {
width: 25%;
height: 40%;
background-color: #021F58;
float: left;
margin-left: 40px;
position: relative;
}
/* 背景图 */
.bck-chart {
width: 100%;
height: 100%;
position: absolute;
}
/* 生物多样性图 */
.biology-chart {
width: 100%;
height: 100%;
}
/* 月度流量统计 */
.sta-wrapper {
width: 25%;
height: 40%;
background-color: #021F58;
float: left;
margin-top: 40px;
position: relative;
}
.sta-legend {
width: 70%;
height: 50%;
position: absolute;
right: 0;
}
.legend-ul {
width: 100%;
margin-top: 32px;
}
.legend-ul>li {
display: inline-block;
width: 40%;
text-align: left;
position: relative;
margin-right: 20px;
margin-bottom: 20px;
}
.legend-point {
display: inline-block;
width: 8px;
height: 8px;
}
.legend-name {
margin-left: 10px;
font-size: 16px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #E6F7FF;
}
.legend-value {
position: absolute;
right: 0;
font-size: 18px;
font-family: D-DIN-DIN-Bold, D-DIN-DIN;
font-weight: bold;
}
.legend-line {
width: calc(100% - 4px);
height: 6px;
border-left: 1px solid rgba(56, 109, 171, 0.3);
border-bottom: 1px solid rgba(56, 109, 171, 0.3);
margin-left: 4px;
position: relative;
top: -4px;
}
.sta-chart {
width: 100%;
height: 100%;
}
.pie-bck {
width: 100%;
height: 50%;
/* background-color: aqua; */
position: absolute;
top: 0;
}
/* 水质类别统计 */
.category-wrapper {
width: 25%;
height: 40%;
background-color: #021F58;
float: left;
margin-top: 40px;
position: relative;
margin-left: 40px;
}
.season-ul {
position: absolute;
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #B9DEF2;
top: 140px;
left: 20px;
z-index: 2;
}
.check-season {
font-size: 16px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #32CEFF;
}
.season-ul>li {
margin-bottom: 11px;
cursor: pointer;
height: 20px;
width: 20px;
}
.season-ul>li:hover {
font-size: 16px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #32CEFF;
}
.category-ul {
position: absolute;
top: 54px;
right: 10px;
}
.category-ul>li {
width: 188px;
height: 36px;
line-height: 36px;
text-align: left;
background: rgba(51, 129, 221, 0.11);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(153, 200, 255, 0.59);
margin-bottom: 20px;
}
.category-point {
width: 12px;
height: 12px;
margin-left: 16px;
display: inline-block;
}
.category-name {
font-size: 16px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #D7F1FF;
margin-left: 10px;
}
.category-percent {
position: absolute;
right: 10px;
font-size: 18px;
font-family: D-DIN-DIN-Bold, D-DIN-DIN;
font-weight: bold;
}
.category-chart {
width: 100%;
height: 100%;
}
.category-bck {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
</style>