echarts automatic carousel tooltip
vue first needs to encapsulate packages (functions):
export function autoHover(myChart, option, num, time) {
var defaultData = {
// Set default values time: 2000,
num: 100
}
if (!time) {
time =
}
if (!num) {
num =
}
var count = 0
var timeTicket = null
timeTicket && clearInterval(timeTicket)
timeTicket = setInterval(function () {
({
type: 'downplay',
seriesIndex: 0 // The index value of serieIndex can trigger multiple })
({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
})
({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
})
count++
if (count >= num) {
count = 0
}
}, time)
('mouseover', function (params) {
clearInterval(timeTicket)
({
type: 'downplay',
seriesIndex: 0
})
({
type: 'highlight',
seriesIndex: 0,
dataIndex:
})
({
type: 'showTip',
seriesIndex: 0,
dataIndex:
})
})
('mouseout', function () {
timeTicket && clearInterval(timeTicket)
timeTicket = setInterval(function () {
({
type: 'downplay',
seriesIndex: 0 // The index value of serieIndex can trigger multiple })
({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
})
({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
})
count++
if (count >= 17) {
count = 0
}
}, 3000)
})
}
export default {
autoHover
}It is best to put this js file in the utils folder, and other components may also need to be used as a public function;
Introduced in vue components:
import { autoHover } from '@/utils/' // Introduce encapsulated functions
export default {
mounted() {
()
},
methods: {
// Line chart initLine() {
var myChart = (('manyLine'));
let option = {
// ......This configuration is omitted }
(option, true);
// Automatic carousel autoHover(myChart, , 4, 3000); // The parameters are: container, configuration, number of carousels, and carousel interval time }
}
}
Echarts large-screen pie chart (can be automatically carousel)
API：
-
highlightStart Highlight -
downplayClose Highlight
Set timer: Turn on the highlight of the cake blocks one by one (note: turn off the previous highlight before turning on the next one)
import * as echarts from 'echarts';
var chartDom = ('main');
var myChart = (chartDom);
var option;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let count = 0;
setInterval(() => {
({
type: 'downplay',
seriesIndex: 0,
dataIndex: count
});
count++;
if (count === 5) {
count = 0;
}
({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
});
}, 5000);
option && (option);Tip: If you reuse the component to introduce option configuration in the vue component, please pass the relevant echarts instance to the parent component and use the corresponding instance myChart for operation, as shown in the following case:
Reusable components: After the mount is completed, pass the Echarts instance chart to the parent component
<script>
import * as echarts from 'echarts'
import 'zrender/lib/svg/svg'
import { debounce } from 'throttle-debounce'
export default {
name: '',
props: ['option', 'renderer', 'notMerge', 'lazyUpdate'],
data () {
return {
width: '100%',
height: '100%',
}
},
watch: {
option (val) {
(val)
},
},
created () {
= null
},
async mounted () {
// Initialize the chart await (this.$el)
// Pass a chart instance to the parent component this.$emit('send', )
// Inject the incoming configuration (including data) ()
// Listen to screen zoom and re-draw echart chart ('resize', debounce(100, ))
},
updated () {
// Reset the component every time it is updated ()
},
beforeDestroy () {
// Uninstall the chart before component uninstallation ()
},
methods: {
initChart (el) {
// renderer is used to configure rendering method. It can be svg or canvas const renderer = || 'canvas'
return new Promise(resolve => {
setTimeout(() => {
= (el, null, {
renderer,
width: 'auto',
height: 'auto',
})
resolve()
}, 0)
})
},
setOption (option) {
if (!) {
return
}
const notMerge =
const lazyUpdate =
(option, notMerge, lazyUpdate)
},
dispose () {
if (!) {
return
}
()
= null
},
resize () {
&& ()
},
getInstance () {
return
},
},
render () {
const { width, height } = this
return (
<div
class='default-chart'
style={{ width, height }}
/>
)
},
}
</script>Pie chart component: on-send listens to the send method triggered by the child component and executes the corresponding method
<script>
import SubTitle from './SubTitle'
import Chart from '../Chart'
export default {
name: '',
data () {
return {
myChart: null,
option: Omitted...(With the aboveoptionSet the same Can be copied here)
}
},
mounted () {
this.$nextTick(() => {
()
})
},
methods: {
// Pie chart carousel pieActive () {
let count = 0
let length = [0].
setInterval(() => {
({
type: 'downplay',
seriesIndex: 0,
dataIndex: count,
})
count++
if (count === length) {
count = 0
}
({
type: 'highlight',
seriesIndex: 0,
dataIndex: count,
})
}, 5000)
},
getChart (chart) {
= chart
},
},
render () {
return (
<div style="height:250px;width:480px;position:absolute;left:1402px;top:772px;display:flex;flex-direction: column;">
<SubTitle title="Provincial sales share chart"/>
<div style="flex: 1; position: relative;">
<Chart option={} on-send={} style="position: absolute;top: 10px;"/>
</div>
</div>
)
},
}
</script>
<style lang="scss" scoped></style>The above is personal experience. I hope you can give you a reference and I hope you can support me more.