1.这边重点在datazoom，然后执行计时器，this.intime()
this.intime()
dataZoom: [{
show: false, // 是否开启滚轮
height: 22,
xAxisIndex: [
0
],
bottom: '8%',
start: 1,
end: 200,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 11
}],
data值：
options: null, hovers: false, app: { currentIndex: -1 }
this.options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333'
}
}
},
color: ['#08d9d6', '#14ffec', '#f08a5d'],
legend: {
top: '3%',
right: '4%',
lineStyle: {
type: 'solid'
},
textStyle: {
fontWeight: 900,
fontSize: 16
},
data: [
{
icon: 'image://' + imgPath + 'img/echartlenge2.png',
// icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
name: '产销比',
textStyle: {
color: '#7DE8E3',
fontSize: 14,
padding: [0, 0, -3, 5]
}
},
{
icon: 'image://' + imgPath + 'img/greenfang380.png',
// icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
name: '供水量',
textStyle: {
color: '#26F3E8',
fontSize: 14,
padding: [2, 0, 0, 3]
}
},
{
icon: 'image://' + imgPath + 'img/orangefang380.png',
// icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
name: '售水量',
textStyle: {
color: '#E97B17',
fontSize: 14,
padding: [2, 0, 0, 3]
}
}
],
orient: 'horizontal',
itemWidth: 25,
itemGap: 30
},
grid: {
top: '22%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
// boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(106, 172, 247, 1)',
fontSize: 12,
fontWeight: 400,
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#73C2DC', // x轴线颜色
width: 1 // x轴线粗细
}
}
}
],
yAxis: [
{
type: 'value',
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: '#295C88', // 背景虚线颜色
type: 'dashed',
width: 1
}
},
axisLabel: {
color: '#7CC5F7',
fontSize: 14,
fontWeight: 400,
show: true
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
{}
],
dataZoom: [{
show: false, // 是否开启滚轮
height: 22,
xAxisIndex: [
0
],
bottom: '8%',
start: 1,
end: 200,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 11
}],
series: [
{
name: '产销比',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 60],
symbol: 'circle', // 将小圆点改成实心 不写symbol默认空心
symbolSize: 12, // 小圆点的大小
itemStyle: {
borderColor: 'rgba(255, 255, 255, 1)',
borderWidth: 2,
borderType: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(166, 8, 245, .3)' // 靠上方的透明颜色
},
{
offset: 1,
color: 'rgba(166, 8, 245, .0)' // 靠下方的透明颜色
}
])
}
},
{
name: '供水量',
type: 'bar',
barWidth: '20%',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 90, 230, 210, 60],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#27F8ED' // 靠上方的透明颜色
},
{
offset: 1,
color: '#011C35' // 靠下方的透明颜色
}
]),
borderColor: '#27F8ED',
borderWidth: 1.5
}
},
{
name: '售水量',
type: 'bar',
emphasis: {
focus: 'series'
},
barWidth: '20%',
data: [120, 132, 101, 134, 90, 230, 210, 40, 130, 110, 90],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#EC7C16' // 靠上方的透明颜色
},
{
offset: 1,
color: '#011C35' // 靠下方的透明颜色
}
]),
borderColor: '#EC7C16',
borderWidth: 1.5
}
}
]
}
this.intime()this.intime()方法：
intime() {
const that = this
setInterval(() => {
console.log(this.hovers)
if (this.hovers === false) {
var dataLen = that.options.series[0].data.length
// 取消之前高亮的图形
that.chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.app.currentIndex
})
this.app.currentIndex = (that.app.currentIndex + 1) % dataLen
// console.log(app.currentIndex);
// 高亮当前图形
that.chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: that.app.currentIndex
})
// 显示 tooltip
that.chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: that.app.currentIndex
})
} else {
}
}, 1000)
},在标签上设置鼠标放上去停止轮播判断：放在div上：
@mouseover="hovers = true"
@mouseleave="hovers = false"