echarts提示样式修改

guanqb

2022-11-12 05310bd5f86f8c65ab7950ced91dacf98dd95b39

echarts提示样式修改

 src/views/home/components/leftContainer.vue

@@ -229,7 +229,8 @@
        initPersonOptions (xDate, yDate) {
            return {
                tooltip: {
                    trigger: 'item'
                    trigger: 'item',
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>'
                },
                xAxis: {
                    type: 'category',
@@ -258,18 +259,6 @@
                    {
                        data: yDate,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1a94a8',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
@@ -308,7 +297,6 @@
        initHouseOptions (xDate, y1Date, y2Date) {
            return {
                tooltip: {
                    trigger: 'item'
                },
                color: ['#2967c4', '#112d54'],
                xAxis: {
@@ -345,33 +333,35 @@
                        data: y1Date,
                        type: 'bar',
                        zlevel: 2,
                        tooltip: {
                            trigger: 'item',
                            formatter: params => {
                                let msg
                                if (params.value > 10000) {
                                    msg = (params.value / 10000).toFixed(2) + '万人'
                                } else {
                                    msg = params.value + '人'
                                }
                                msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #2d71d7;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                                return msg
                            }
                        },
                    },
                    {
                        data: y2Date,
                        type: 'bar',
                        barGap: '-100%',
                        label: {
                            show: true,
                            color: '#fff',
                            position: 'right', // 标签右对齐
                            distance: 0,// 标签距离柱条的距离
                            formatter: params => {
                                let msg
                                if (params.data.realValue > 10000) {
                                    msg = (params.data.realValue / 10000).toFixed(2) + '万个'
                                } else {
                                    msg = params.data.realValue + '个'
                                }
                        tooltip: {
                            trigger: 'item',
                            show: false

                                return msg
                            }
                        }
                    }
                ],
                grid: {
                    top: '2%',
                    left: '60',
                    right: '40',
                    right: '-30',
                    bottom: '2%'
                },

@@ -404,7 +394,8 @@
        initLandOptions (xDate, yDate) {
            return {
                tooltip: {
                    trigger: 'item'
                    trigger: 'item',
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}个</strong>'
                },
                xAxis: {
                    type: 'category',
@@ -433,18 +424,6 @@
                    {
                        data: yDate,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1a94a8',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
@@ -592,7 +571,17 @@
        initkeyPersonOption (dataArr) {
            return {
                tooltip: {
                    trigger: 'item'
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万人'
                        } else {
                            msg = params.value + '人'
                        }
                        msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        return msg
                    }
                },
                legend: {
                    left: '48%',
@@ -610,7 +599,7 @@
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 个    `
                        return `${name}     ${v} 人    `
                    },
                },
                series: [

 src/views/home/components/rightContainer.vue

@@ -164,7 +164,8 @@
            return {
                tooltip: {
                    trigger: 'item',
                    confine: true
                    confine: true,
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>'
                },
                legend: {
                    left: '60%',
@@ -327,7 +328,8 @@
                series: [
                    {
                        data: seriesData,
                        type: 'line'
                        type: 'line',
                        smooth: true
                    }
                ],
                grid: {