数据缺省展示
option = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
},
},
}
边距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
x轴文字样式
xAxis: {
...
axisLabel: {
color: '#b0dcdc',
fontSize: 14,
},
},
y轴
yAxis: {
name: '降雨量(mm)',
nameTextStyle: {
fontSize: 14,
color: '#628f90',
padding: [0, 0, 0, 40],
},
axisLabel: {
color: '#b0dcdc',
fontSize: 14,
},
axisTick: { show: false },
},
series
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
color: '#56ffff',
smooth: true,
itemStyle: { normal: { barBorderRadius: [10, 10, 0, 0] } },
markLine: {
symbol: ['none'],
itemStyle: {
normal: {
lineStyle: {
type: 'solid',
width: 2,
},
},
},
data: [
{
yAxis: 150,
itemStyle: { normal: { color: '#ff4747' } },
label: {
show: true,
position: 'end',
formatter: '越限上线',
color: '#ff4747',
},
},
],
},
},
],
使上下两个轴的tooltip联动
axisPointer: { link: [{ xAxisIndex: 'all' }] },
没数据展示
const noDataOption = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
},
},
}
grid上下轴
grid: [
{
left: 60,
right: 50,
height: '25%',
bottom: '15%',
top: '10%',
},
{
left: 60,
right: 50,
bottom: '30%',
top: '50%',
height: '30%',
},
],
tooltip
tooltip: {
trigger: 'axis',
axisPointer: { animation: false },
formatter(val) {
return `<div>${val[0].name}</div>`
},
valueFormatter(val) {
return `val+%`
}
},
图例
legend: {
data: [
{
name: '雨量',
icon: 'rect',
},
{
name: '水位',
icon: 'rect',
},
{
name: '流量',
icon: 'rect',
},
],
textStyle: { color: '#b0dcdc' },
itemHeight: 10,
itemWidth: 10,
},
完整例子
<!-- -->
<template>
<div class="VillageWater">
<div ref="chart" class="chart" />
</div>
</template>
<script>
export default {
components: {},
data() {
return { chart: null, chartData: '' }
},
computed: {},
watch: {},
mounted() {
this.chart = this.$echarts.init(this.$refs.chart)
window.addEventListener('resize', () => {
this.chart.resize()
})
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', () => {
this.chart.resize()
})
})
},
methods: {
initChart(chartData) {
let maxTime = ''
if (chartData[1].length) {
const maxFlow = Math.max.apply(null, chartData[1])
maxTime = chartData[0][chartData[1].findIndex((v) => v === maxFlow)]
}
this.chartData = chartData
this.chart.clear()
const option = {
color: ['#56ffff', '#ffe42c', '#009cff'],
tooltip: {
trigger: 'axis',
axisPointer: { animation: false },
formatter(val) {
return `
<div>${val[0].name}</div>
<div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #56ffff;display:block"></span>${val[2].seriesName}: ${val[2].value || val[2].value === 0 ? val[2].value.toFixed(1) : '--'}</div>
<div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #009cff;display:block"></span>${val[1].seriesName}: ${val[1].value || val[1].value === 0 ? val[1].value.toFixed(2) : '--'}</div>
<div style="display:flex;align-items:center;"><span style="margin-right:5px;width: 10px;height: 10px;background: #ffe42c;display:block"></span>${val[0].seriesName}: ${val[0].value || val[0].value === 0 ? val[0].value.toFixed(2) : '--'}</div>
`
},
},
legend: {
data: [
{
name: '雨量',
icon: 'rect',
},
{
name: '水位',
icon: 'rect',
},
{
name: '流量',
icon: 'rect',
},
],
textStyle: { color: '#b0dcdc' },
itemHeight: 10,
itemWidth: 10,
},
axisPointer: { link: [{ xAxisIndex: 'all' }] },
grid: [
{
left: 60,
right: 50,
height: '25%',
bottom: '15%',
top: '10%',
},
{
left: 60,
right: 50,
bottom: '30%',
top: '50%',
height: '30%',
},
],
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: { onZero: true },
data: chartData[0],
axisLabel: { show: false },
},
{
gridIndex: 1,
type: 'category',
boundaryGap: false,
axisLine: { onZero: true },
data: chartData[0],
position: 'bottom',
axisLabel: {
color: '#b0dcdc',
fontSize: 12,
formatter(value) {
const arr = value.split(' ')
return `${arr[0]}\n${arr[1]}`
},
},
},
],
yAxis: [
{
name: '雨量(mm)',
type: 'value',
axisLabel: {
color: '#b0dcdc',
fontSize: 12,
},
splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
nameGap: 40,
nameRotate: 90,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 14,
color: '#628f90',
},
inverse: true,
},
{
alignTicks: true,
boundaryGap: [0, '50%'],
name: '水位(m)',
type: 'value',
axisLabel: {
color: '#b0dcdc',
fontSize: 12,
},
max() {
const num = Math.max.apply(null, chartData[3]) / 2
return Math.ceil(num) * 2
},
min() {
const num = Math.min.apply(null, chartData[3]) / 2
const min = Math.floor(num) * 2
return min < 0 ? 0 : min
},
position: 'left',
splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
gridIndex: 1,
nameGap: 40,
nameRotate: 90,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 14,
color: '#628f90',
},
},
{
alignTicks: true,
max() {
const num = Math.max.apply(null, chartData[1]) / 5
return (Math.ceil(num) + 1) * 5
},
min() {
const num = Math.min.apply(null, chartData[1]) / 5
const min = (Math.floor(num) - 1) * 5
return min < 0 ? 0 : min
},
boundaryGap: [0, '50%'],
gridIndex: 1,
name: '流量(m³/s)',
type: 'value',
axisLabel: {
color: '#b0dcdc',
fontSize: 12,
},
axisLine: { show: true },
splitLine: { lineStyle: { color: ['rgba(0,0,0,0.1)'] } },
position: 'right',
nameGap: 30,
nameRotate: -90,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 14,
color: '#628f90',
},
},
],
series: [
{
name: '雨量',
type: 'bar',
symbolSize: 8,
data: chartData[2],
position: 'top',
},
{
name: '流量',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 2,
symbolSize: 8,
data: chartData[1],
markPoint: {
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{ offset: 0, color: 'rgba(234, 210, 41, 1)' }, { offset: 1, color: '#fd644f' }],
global: false,
},
},
data: [
{ type: 'max', name: 'Max' },
],
},
},
{
name: '水位',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
data: chartData[3],
markPoint: {
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#22dcfd',
}, { offset: 1, color: '#5865b9',
},
],
global: false,
},
},
data: [
{ type: 'max', name: 'Max' },
],
},
},
{
name: '预报开始时间',
type: 'line',
markLine: {
lineStyle: { type: 'solid' },
label: {
formatter() {
return '预报流量'
},
color: '#f58e32',
padding: [0, 110, 0, 0],
},
name: 'cc',
symbol: 'none',
data: [{ xAxis: maxTime }],
},
},
{
name: '预报开始时间',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
markLine: {
lineStyle: { type: 'solid' },
name: 'cc',
label: {
color: '#f58e32',
padding: [0, 110, 0, 0],
},
symbol: 'none',
data: [{ xAxis: maxTime }],
},
},
],
}
this.chart.setOption(option)
},
},
}
</script>
<style scoped lang="less">
.VillageWater {
height: 100%;
}
.chart {
width: 700px;
height: 300px;
}
</style>