需求：
1.需前端做个鼠标悬浮自动切换的效果。每10秒钟自动切换一个柱子。
2.鼠标悬浮到哪个柱子，则饼图配合显示该柱子对应的饼图。
效果：
展示效果
备注：该图是给饼图另加了名称展示，数据是调过接口的真实数据，所以与上图不一致
option配置：
option: {
title: {
show: false,
text: '日常巡查异常记录',
},
legend: [{
right: 'center',
top: 'top',
data: [
{
name: '日常巡查异常次数'
},
{
name: '已解决',
icon: 'circle',
},
{
name: '未解决',
icon: 'circle',
},
],
},
// 给饼图加名称的地方
{
right: 140,
top: 'top',
data: [
{
name: '监测',
icon: 'circle',
},
{
name: '水体',
icon: 'circle',
},
{
name: '保护',
icon: 'circle',
},
],
}],
tooltip: {
trigger: 'item',
formatter: (params) => {
if (typeof params === 'object' && !params.length) {
return `<Strong>${this.dateValue}</Strong><br/>
${params.marker} ${params.name}：<Strong>${params.data[params.encode.value[0]]}</Strong><br/>
${params.marker} 占比：<Strong>${params.percent}%</Strong>`
} else if (typeof params === 'object' && params.length) {
return `<Strong>${params[0].name}</Strong><br/>
${params[0].marker} ${params[0].seriesName}：<Strong>${params[0].data[1]}</Strong><br/>
${params[1].marker} ${params[1].seriesName}：<Strong>${params[1].data[2]}</Strong><br/>
${params[2].marker} ${params[2].seriesName}：<Strong>${params[2].data[3]}</Strong><br/>`
}
},
},
dataset: [
{ source: [
['2019', '2020', '2021', '2022'],
[10, 30, 32, 44, 30],
[60, 20, 42, 64, 20],
[30, 40, 12, 34, 40],
[17, 39, 22, 24, 80],
]
},
{
source: [
['product', '2019', '2020', '2021', '2022'],
['监测', 10, 30, 32, 44, 30],
['水体', 23, 30, 22, 44, 50],
['保护', 30, 10, 32, 64, 30]
]
}
],
xAxis: [
{
type: 'category',
gridIndex: 0,
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0, 0, 0, 0.1)',
opacity: 0.3,
},
value: this.pillar,
},
},
],
yAxis: [
{
gridIndex: 0,
type: 'value',
name: '单位：个',
splitLine: {//保留网格线
show: true,
lineStyle: {//y轴网格线设置
color: '#CDD8E0',
width: 1,
type: 'dashed'
}
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip: {
trigger: 'axis',
}
},
series: [
{
name: '日常巡查异常次数',
type: 'line',
symbol: 'circle',
symbolSize: 8,//圆点大小
showSymbol: false,
itemStyle: {
color: colors[0],
},
lineStyle: {
color: colors[0]
},
seriesLayoutBy: 'row',
},
{
name: '已解决',
type: 'bar',
barWidth: 8,
barGap: '100%',
itemStyle: {
color: colors[1],
},
lineStyle: {
color: colors[1]
},
seriesLayoutBy: 'row',
},
{
name: '未解决',
type: 'bar',
barWidth: 8,
itemStyle: {
color: colors[2],
},
lineStyle: {
color: colors[2]
},
seriesLayoutBy: 'row',
},
{
name: '巡查类型占比分布',
type: 'pie',
id: 'pie',
datasetIndex: 1,
radius: ['30%', '36%'],
center: ['93%', 68],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
zlevel: 2,
label: {
show: true,
position: 'center',
formatter: () => {
return `{a|${this.dateValue}\n\n巡查类型\n\n占比分布}`
},
rich: {
a: {
color: '#112A3A',
fontWeight: 900,
fontSize: '13px',
}
},
},
encode: {
itemName: 'product',
value: 1,
},
}
],
color: ['#1C64F2', '#43C4BC', '#F2C94C']
},定时轮播的方法：
setOptionData(){
this.myChart.setOption({
series: {
id: 'pie',
encode: {
value: this.pillar,
}
}
});
},
banner() {
const totalPillar = this.option.dataset[1].source[0].length - 1
this.interval = setInterval(() => {
this.pillar = this.pillar * 1 === totalPillar ? 1 : this.pillar * 1 + 1
this.dateValue = this.option.dataset[1].source[0][this.pillar];
this.setOptionData()
}, 5000);
},
/**
* 初始化图表
*/
initChart() {
const { myChart } = this
window.addEventListener('resize', myChart.resize)
this.$nextTick(() => {
setTimeout(() => {
myChart.resize()
myChart.setOption(this.option, true)
});
})
myChart.on('updateAxisPointer', (event) => {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
this.pillar = xAxisInfo.value + 1;
this.dateValue = this.option.dataset[1].source[0][this.pillar];
this.setOptionData()
}
});
clearInterval(this.interval);
},总体代码：
<template>
<div class="chartSize">
<div
ref="myChart"
id="myChart"
/>
</div>
</template>
<script>
import * as echarts from 'echarts';
const colors = ["#F2994A", "#27AE60", "#EB5757"]
export default {
name: 'MixedLineAndBar',
data() {
return {
option: {
title: {
show: false,
text: '日常巡查异常记录',
},
legend: [{
right: 'center',
top: 'top',
data: [
{
name: '日常巡查异常次数'
},
{
name: '已解决',
icon: 'circle',
},
{
name: '未解决',
icon: 'circle',
},
],
},
{
right: 140,
top: 'top',
data: [
{
name: '监测',
icon: 'circle',
},
{
name: '水体',
icon: 'circle',
},
{
name: '保护',
icon: 'circle',
},
],
}],
tooltip: {
trigger: 'item',
formatter: (params) => {
if (typeof params === 'object' && !params.length) {
return `<Strong>${this.dateValue}</Strong><br/>
${params.marker} ${params.name}：<Strong>${params.data[params.encode.value[0]]}</Strong><br/>
${params.marker} 占比：<Strong>${params.percent}%</Strong>`
} else if (typeof params === 'object' && params.length) {
return `<Strong>${params[0].name}</Strong><br/>
${params[0].marker} ${params[0].seriesName}：<Strong>${params[0].data[1]}</Strong><br/>
${params[1].marker} ${params[1].seriesName}：<Strong>${params[1].data[2]}</Strong><br/>
${params[2].marker} ${params[2].seriesName}：<Strong>${params[2].data[3]}</Strong><br/>`
}
},
},
dataset: [
{ source: [
['2019', '2020', '2021', '2022'],
[10, 30, 32, 44, 30],
[60, 20, 42, 64, 20],
[30, 40, 12, 34, 40],
[17, 39, 22, 24, 80],
]
},
{
source: [
['product', '2019', '2020', '2021', '2022'],
['监测', 10, 30, 32, 44, 30],
['水体', 23, 30, 22, 44, 50],
['保护', 30, 10, 32, 64, 30]
]
}
],
xAxis: [
{
type: 'category',
gridIndex: 0,
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0, 0, 0, 0.1)',
opacity: 0.3,
},
value: this.pillar,
},
},
],
yAxis: [
{
gridIndex: 0,
type: 'value',
name: '单位：个',
splitLine: {
show: true,
lineStyle: {
color: '#CDD8E0',
width: 1,
type: 'dashed'
}
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip: {
trigger: 'axis',
}
},
series: [
{
name: '日常巡查异常次数',
type: 'line',
symbol: 'circle',
symbolSize: 8,
showSymbol: false,
itemStyle: {
color: colors[0],
},
lineStyle: {
color: colors[0]
},
seriesLayoutBy: 'row',
},
{
name: '已解决',
type: 'bar',
barWidth: 8,
barGap: '100%',
itemStyle: {
color: colors[1],
},
lineStyle: {
color: colors[1]
},
seriesLayoutBy: 'row',
},
{
name: '未解决',
type: 'bar',
barWidth: 8,
itemStyle: {
color: colors[2],
},
lineStyle: {
color: colors[2]
},
seriesLayoutBy: 'row',
},
{
name: '巡查类型占比分布',
type: 'pie',
id: 'pie',
datasetIndex: 1,
radius: ['30%', '36%'],
center: ['93%', 68],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
zlevel: 2,
label: {
show: true,
position: 'center',
formatter: () => {
return `{a|${this.dateValue}\n\n巡查类型\n\n占比分布}`
},
rich: {
a: {
color: '#112A3A',
fontWeight: 900,
fontSize: '13px',
}
},
},
encode: {
itemName: 'product',
value: 1,
},
}
],
color: ['#1C64F2', '#43C4BC', '#F2C94C']
},
pillar: 1,
dateValue: '2019',
interval: '',
myChart: '',
}
},
mounted() {
this.getChartData()
},
beforeDestroy() {
// 释放图表
this.myChart.dispose()
// 清除定时器
clearInterval(this.interval);
},
methods: {
setOptionData(){
this.myChart.setOption({
series: {
id: 'pie',
encode: {
value: this.pillar,
}
}
});
},
banner() {
const totalPillar = this.option.dataset[1].source[0].length - 1
this.interval = setInterval(() => {
this.pillar = this.pillar * 1 === totalPillar ? 1 : this.pillar * 1 + 1
this.dateValue = this.option.dataset[1].source[0][this.pillar];
this.setOptionData()
}, 5000);
},
/**
* 初始化图表
*/
initChart() {
const { myChart } = this
window.addEventListener('resize', myChart.resize)
this.$nextTick(() => {
setTimeout(() => {
myChart.resize()
myChart.setOption(this.option, true)
});
})
myChart.on('updateAxisPointer', (event) => {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
this.pillar = xAxisInfo.value + 1;
this.dateValue = this.option.dataset[1].source[0][this.pillar];
this.setOptionData()
}
});
clearInterval(this.interval);
},
/**
* 获取图表数据
*/
async getChartData() {
this.myChart = echarts.init(this.$refs.myChart);
// 调数据赋值
// ...
this.initChart()
this.banner()
},
}
}
</script>
<style lang="less" scoped>
.Chart {
margin-top: 8px !important;
}
#myChart {
width: 100%;
height: 90%;
margin: 10px auto 0;
}
</style>