echarts折线图（自定义hover, format实现）

最新推荐文章于 2024-05-02 09:33:51 发布

lj_qmzhnT_T

最新推荐文章于 2024-05-02 09:33:51 发布

阅读量563

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/lj_qmzhnT_T/article/details/135822573

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #lineCharts {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="lineCharts"></div>
        <button @click="updateCharts">更新</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                title: 'this is title',
                yAxis_name: 'yAxis_name', // y轴名称
                max: 100, // 最大值
                splitNumber: 10,  // 分段段数
                list: [
                    { date: '2020-01-01', value: 10 },
                    { date: '2020-01-05', value: 20 },
                    { date: '2020-01-10', value: 30 },
                    { date: '2020-01-15', value: 40 },
                    { date: '2020-01-20', value: 50 },
                    { date: '2020-01-30', value: 60 },
                ]
            }
        },
        computed: {
            xAxisData() {
                return this.list.map(v => v.date)
            },
            valueList() {
                return this.list.map(v => v.value)
            }
        },
        created() {
            this.randomList()
            this.$nextTick(() => {
                this.initEcharts()
            })
        },
        methods: {
            initEcharts(notMerge = false) {
                const chartDom = document.getElementById('lineCharts');
                const myChart = echarts.init(chartDom);
                const option = {
                    title: {
                        text: this.title,
                        top: 0,
                        right: 0
                    },
                    grid: {
                        top: 40,
                        left: 30,
                        right: 30,
                        bottom: 30
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        },
                        formatter: (params, ticket, callback) => {
                            const options = params[0]
                            const code = `
                                    <div style="text-align:center;">
                                        ${this.list[options.dataIndex].value}
                                    </div>
                                    <div>${options.axisValueLabel}</div>
                                `
                            return code
                        },
                        textStyle: {
                            fontSize: 16
                        }
                    },
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: (index) => {
                                if (index === 0 || index === this.list.length - 1) {
                                    return true
                                }
                                return false
                            },
                            fontSize: 14
                        },
                        axisTick: {
                            show: false,
                            alignWithLabel: true
                        },
                        data: this.xAxisData
                    },
                    yAxis: {
                        type: 'value',
                        name: this.yAxis_name,
                        nameTextStyle: {
                            align: 'left',
                            fontSize: 14
                        },
                        min: 0,
                        max: this.max,
                        splitNumber: this.splitNumber,
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: true
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            fontSize: 14
                        }
                    },
                    series: [
                        {
                            data: this.valueList,
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: ({ seriesIndex, dataIndex, data, value }) => {
                                    if (dataIndex === 0) {
                                        return '#ff8800'
                                    }
                                    if (value < this.list[0].value) {
                                        return '#19B452'
                                    }
                                    if (value > this.list[0].value) {
                                        return '#f00'
                                    }
                                    return '#ff8800'
                                },
                            },
                            lineStyle: {
                                color: '#ccc',
                                width: 1,
                            }
                        }
                    ]
                };
                myChart.setOption(option, notMerge);
            },
            updateCharts() {
                this.randomList()
                this.initEcharts(true)
            },
            randomList() {
                this.list = this.list.map(v => {
                    return {
                        date: v.date,
                        value: Math.ceil(Math.random() * 100)
                    }
                })
            },
        }
    })
</script>
</html>