在vue中利用echarts+colormap+canvas实现频谱瀑布图

本文链接：https://blog.csdn.net/weixin_42244510/article/details/136528538

本文在另一篇文章基础上进行封装优化，介绍了在Vue中利用highcharts、colormap和canvas实现频谱瀑布图。还介绍了colormap与echarts的基础引用，以及频谱图和瀑布图的封装与引用。此外，作者可为不用Vue框架、需原生js代码的人提供源码及讲解，有偿服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

宁外一篇文章基础上进行封装优化，在vue中利用highcharts+colormap+canvas实现频谱瀑布图

有些朋友不用vue框架的，需要用原生js的朋友，加我wx：[x2251774980] 发源码，可提供代码讲解，有偿哈。

介绍一下基础引用 colormap+echarts

封装频谱图

实现效果图

<!--
 * @FilePath: \systemmonitor\view\src\components\common\Spectrum.vue
 * @Description: 频谱图
-->
<template>
        <div id="Frequency" class=" h100 w100"></div>  
</template>
<script>
import { ToFixedVAl, findLabel, findValue, sizereverse, freqReverse, kHzReverse, HzReverse, customvalidateErrorStr } from '@/utils/util.js'
export default {
    data() {
        return {
            ToFixedVAl:ToFixedVAl,
            myChart: null, //频谱图
            //频谱变化Echart实例的数据项
            spectrumOption: {
                animation:false,
                title: {
                    show: false,
                    text: '频谱',
                    right: 10,
                    top: 10,
                    textStyle: {
                        color: '#BCBCBC',
                        fontSize: 12
                    }
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    padding: [4, 6, 4, 6],
                    textStyle: {
                        fontSize: 14
                    },
                    formatter: params => {
                        return '功率：' + ToFixedVAl(params[0].data[1], 4) + ' dBm' + '<br/>' + '频率：' + params[0].data[0] + ' MHz'
                    }
                },
                dataZoom: [
                    {
                        show: false,
                        type: 'slider',
                        filterMode: 'weakFilter',
                        showDataShadow: true,
                        bottom: 16,
                        height: 8,
                        startValue: 950,
                        endValue: 2150,
                        borderColor: 'transparent',
                        backgroundColor: '#e2e2e2',
                        handleIcon:
                            'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                        handleSize: 20,
                        handleStyle: {
                            shadowBlur: 6,
                            shadowOffsetX: 1,
                            shadowOffsetY: 2,
                            shadowColor: '#aaa'
                        },
                        labelFormatter: ''
                    },
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    }
                ],
                grid: {
                    left: 20,
                    right: 30,
                    bottom: 6,
                    top: 15,
                    containLabel: true
                },
                xAxis: {
                    show: true,
                    // boundaryGap: true,
                    onZero: false,
                    // name: 'MHz',
                    nameTextStyle: {
                        fontSize: 10,
                        color: '#c1c2c6'
                    },
                    min: 950,
                    max: 2150,
                    minorTick: {
                        show: false,
                        lineStyle: {
                            color: '#797979'

                        }
                    },
                    minorSplitLine: {
                        show: false,
                        lineStyle: {
                            color: '#797979'

                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#797979'

                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#c1c2c6'
                        }
                    },
                    axisLine: {
                        show: true,
                        onZero: false,
                        lineStyle: {
                            type: 'solid',
                            color: '#797979'

                        }
                        // symbol: ['none', 'arrow'],
                        // symbolOffset: 10,
                        // symbolSize: [10, 10]
                    }
                },
                yAxis: {
                    // name: 'dBm',
                    nameTextStyle: {
                        fontSize: 10,
                        color: '#c1c2c6'
                    },
                    min: -120,
                    max: 0,
                    show: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#797979'

                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#797979'

                        }
                    },
                    axisLabel: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#797979'
                        },
                        textStyle: {
                            color: this.$store.state.theme == 'lightTheme' ? '#606266' : '#c1c2c6',
                            fontSize: '12'
                        }
                    }

                    // axisLine: {
                    //     show:true,
                    //       lineStyle: {
                    //         type: 'solid',
                    //         color: '#797979'
                    //     },
                    //     // symbol: ['none', 'arrow'],
                    //     // symbolOffset: 10,
                    //     // symbolSize: [10, 10]
                    // }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        // tooltip: {
                        //     show: true,
                        //     trigger:'item',
                        //     formatter:(e)=>{
                        //      console.log(e)
                        //     }
                        // },
                        // clip: false,
                        // itemStyle: {
                        //     normal: {
                                lineStyle: {
                                    width: '1',
                                    color: '#56a641',
                                    type: 'solid' // dotted虚线  solid:实线
                                },
                        //     }
                        // },
                        emphasis: {
                            lineStyle: {
                                width: '1'
                            }
                        },
                        data: [
                            // [950, 0], [1000, 300], [1050, 0]
                        ],
                        markArea: {
                            tooltip: {
                                show: false
                            },
                            itemStyle: {
                                color: 'rgba(64,158,225,0.4)'
                            },