echarts-learn 数据可视化练习

Wed, 09 Apr 2025 00:00:00 +0000

echarts-learn 是一个 Vue、Nuxt 和 ECharts 数据可视化练习项目，用来展示多图表 dashboard 的页面组织方式。它覆盖柱状图、雷达图、关系图、环形图、词云和数据总览，适合用来参考 ECharts data visualization、Vue chart project 和 dashboard UI 的组合方式。

适合谁

想参考 Vue 和 ECharts 如何组合成数据大屏的人。
正在做 dashboard UI、数据看板、监控页面或图表交互练习的人。
需要柱状图、雷达图、关系图、环形图和词云组合示例的人。
想看 Nuxt 项目如何组织组件和页面入口的人。

项目价值

这个项目的重点不是单个图表，而是把多个可视化组件放在同一个页面里，形成一个完整的数据看板。对搜索 Vue ECharts dashboard、ECharts data visualization、Nuxt dashboard 或 chart interaction demo 的人来说，这个页面可以直接说明项目的展示效果和代码入口。

截图来自本地运行项目并使用同结构演示数据生成。这样可以避免远程示例数据接口不可访问时只截到加载态，同时保留项目真实的页面布局和组件结构。

技术方向

Vue
Nuxt
ECharts
数据可视化
dashboard UI
图表组件拆分
数据看板页面组织

项目入口

GitHub 仓库：linsk27/echarts-learn
项目总览：linsk27 Projects

如果这个 ECharts 数据可视化项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续补充图表说明、运行文档和可复用示例的主要信号。

初步接触可视化Echarts

Tue, 08 Apr 2025 17:44:12 +0800

什么是Echarts

ECharts（全称：Enterprise Charts）是由百度开源的一个基于 JavaScript 的可视化图表库，专门用于构建交互性强、表现丰富的数据可视化图表。

它能做什么？

ECharts 提供了多种常用和高级图表类型，适用于数据分析、仪表盘、报表系统、可视化大屏等场景，例如：

折线图（line）
柱状图（bar）
饼图（pie）
散点图（scatter）
地图（map，支持中国地图和世界地图）
仪表盘（gauge）
热力图（heatmap）
自定义图形（graph、tree、sunburst 等）

它的核心特点：

特性	说明
高性能	基于 Canvas 渲染，适合大数据量可视化
响应式	能适应不同屏幕尺寸，自适应缩放
交互性强	支持 tooltip、点击事件、缩放、图例控制等
主题丰富	提供多种主题，也可自定义
开源免费	使用 Apache-2.0 协议，商业项目也可免费用

安装方式（前端项目）：

如果你用的是 Nuxt、Vue、React 等框架，常见引入方式有两种：

npm/yarn 安装：

1
2
3

yarn add echarts
# 或者
npm install echarts

直接在 HTML 中引用（CDN）：

`1`	`<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>`

其他类似图表库

虽然 ECharts 很强大，但近几年市面上也涌现了不少其它优秀的图表库，例如：

AntV/G2 系列：蚂蚁金服出品，视觉效果更现代，支持更多数据关系分析，且生态体系逐步完善。
D3.js：功能灵活，适合自定义程度非常高的可视化开发，不过上手难度和开发成本较高。
Highcharts、Chart.js：Highcharts 商业授权较为严格，而 Chart.js 则适合中小型数据量和基本交互需求。

如何写一个图表

图表步骤

初始化 echarts 实例

let myChart = null
onMounted(()=>{
    myChart = echarts.init(target.value)
})

构建 option 配置对象
1 2

const options = { }
通过实例.setOption(option) 挂载到对应盒子上
1

myChart.setOption(options)

图表配置

柱形图

const options = {
 // X轴展示数据
 xAxis:{
     show: false,
     // x方向作为值展示
     type: 'value',
     // 设置最大值的配置
     max: function (value) {
         // 动态最大值设置为所有数据中的最大值1.2倍，防止样式问题
         return parseInt(value.max * 1.2)
     }
 },
 // y轴展示数据
 yAxis:{
     // 作为列名展示
     type: 'category',
     // 列名数组，默认从下到上
     data: props.data.regions?.map((item) => item.name),
     // 反向展示
     inverse: true,
     // 不展示线
     axisLine: { show: false },
     // 不展示刻度
     axisTick: { show: false },
     // 展示列名并且label颜色设置
     axisLabel: { color: '#9eb1cd' },
 },
 // 图表绘制的位置，对应上下左右
 grid:{
     top: 0,
     right: 0,
     left: 0,
     bottom: 0,
     // 标签包含进去
     containLabel: true
 },
 // 核心配置
 series:[
     {
         // 柱形图
         type: 'bar',
         // 展示的数据
         data: props.data.regions?.map((item) => ({
             name: item.name,
             value: item.value
         })),
         // 柱状条背景开关
         showBackground: true,
         // 柱状条背景色
         backGroundStyle: {
             color: 'rgba(180, 180, 180, 0.2)'
         },
         // 每个轴的样式
         itemStyle: {
             color: '#5d98CE',
             barBorderRadius: 10,
             shadowColor: 'rgba(0,0,0,0.3)',
             shadowBlur: 5,
         },
         // 柱子宽度
         barWidth: 12,
         // 字体的显示
         label: {
             show: true,
             position: 'right',
             textStyle: {
                 color: '#fff',
             }
            	// 为数据加上百分比，c代表数据
             formatter:'{c}%'
         }
     }
 ],
}

雷达图

    const option = {
        // 雷达坐标系配置
        radar: {
            // 坐标系（外部）名字配置
            name: {
                textStyle: {
                    color: '#05D5FF',
                    fontSize: 14
                }
            },
            // 雷达图形状
            shape: 'polygon',
            center: ['50%', '50%'],
            radius: '80%',
            // 起始位置(开始角度)
            startAngle: 120,
            // 轴线配置
            axisLine: {
                lineStyle: {
                    color: 'rgba(5,213,255,0.8)'
                }
            },
            // 网格线，为true才能形成闭环
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(5,213,255,0.8)'
                }
            },
            // 指示器,就是name部分的坐标系（外部）名字
            indicator: props.data.risks.map((item) => ({
                name: item.name,
                max: 100
            })),
            // 拆分区域，false网格内颜色区分更明显
            splitArea: {
                show: false
            }
        },
        // 坐标极点
        polar: {
            center: ['50%', '50%'],
            radius: '0%'
        },
        // 坐标角度
        angleAxis: {
            min: 0,
            // 分割线分割间隔
            interval: 5,
            // 刻度显示是否为逆时针增长,
            clockwise: false
        },
        // 径向轴
        radiusAxis: {
            min: 0,
            interval: 20,
            splitLine: {
                show: false
            }
        },
        // 图表核心配置
        series: [
            {
                type: 'radar',
                // 指定形状
                symbol: 'circle',
                // 内部数据拐角大小
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        color: '#05D5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#05D5FF',
                        opacity: 0.5
                    }
                },
                lineStyle: {
                    width: 2,
                    color: '#'
                },
                label: {
                    normal: {
                        // 内部数据文本
                        show: true,
                        color: '#fff'
                    }
                },
                data: [
                    {
                        value: props.data.risks.map((item) => item.value)
                    }
                ]
            }
        ]
    }

环形图

const getSeriesData = () => {
const series = []
props.data.abnormals.forEach((item, index) => {
 // 上层
 series.push({
     name: item.name,
     type: 'pie',
     // 逆时针排列
     clockWise: false,
     // 取消悬浮动画
     hoverAnimation: false,
     // 实现半径依次递减
     radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
     center: ['50%', '50%'],
     label: {
         show: false
     },
     data: [
         {
             value: item.value,
             name: item.name
         },
         {
             value: 1000,
             itemStyle: {
                 color: 'rgba(0,0,0,0)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false
             },
             hoverAnimation: false
         }
     ]
 })
 // 底层
 series.push({
     name: item.name,
     type: 'pie',
     // 不希望收到任何事件
     silent: true,
     z: 1,
     // 逆时针排列
     clockWise: false,
     // 取消悬浮动画
     hoverAnimation: false,
     // 实现半径依次递减
     radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
     center: ['50%', '50%'],
     label: {
         show: false
     },
     data: [
         {
             value: 7.5,
             name: item.name,
             itemStyle: {
                 color: 'rgba(3,31,62)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false,
             },
             hoverAnimation: false
         },
         {
             value: 2.5,
             itemStyle: {
                 color: 'rgba(0,0,0,0)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false,
             },
             hoverAnimation: false
         }
     ]
 })
});
return series
}
const option = {
 // 图例配置
 legend: {
     show: true,
     // 图例颜色块形状
     icon: 'circle',
     top: '8%',
     left: '52%',
     // 图例数据文本
     data: props.data.abnormals.map((item) => item.name),
     // 负数以列展示
     width: -5,
     // 色块宽高
     itemWidth: 10,
     itemHeight: 10,
     // 图例间距
     itemGap: 6,
     textStyle: {
         fontSize: 12,
         lineHeight: 5,
         color: '#fff'
     }
 },
 // 悬浮提示层
 tooltip: {
     show: true,
     // 触发器
     trigger: 'item',
     // 展示内容,a代表系列名，b代表数据名，c代表数据值,d代表百分比比例
     formatter: '{a}<br>{b}:{c}({d}%)'
 },
 yAxis: [
     {
         type: 'category',
         // 反向展示
         inverse: true,
         axisLine: {
             show: false
         }
     }
 ],
 xAxis: [
     {
         show: false
     }
 ],
 // 由于饼图过多，通过方法进行配置
 series: getSeriesData()
}

关系图

    const option = {
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                type: 'graph',
                // 表示不需要任何布局类型
                layout: 'none',
                // 该系列需要使用的坐标系：“二维直角坐标系”
                coordinateSystem: 'cartesian2d',
                // 节点大小
                symbolSize: 26,
                z: 3,
                // 边界的萧条标签文字
                edgeLabel: {
                    // 默认
                    normal: {
                        show: true,
                        color: '#fff',
                        testStyle: {
                            fontSize: 14
                        },
                        // 文本模拟内容
                        formatter: function (params) {
                            return params.data.speed
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        color: '#5E5E5E'
                    }
                },
                // 边两端的标记类型,数据流动图标类型
                edgeSymbol: ['none', 'arrow'],
                edgeSymbolSize: 8,
                data: props.data.relations.map(item => {
                    if (item.id !== 0) {
                        return {
                            name: item.name,
                            category: 0,
                            active: true,
                            speed: `${item.speed}kb/s`,
                            value: item.value,
                        }
                    } else {
                        return {
                            name: item.name,
                            value: item.value,
                            symbolSize: 100,
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#157eff'
                                        },
                                        {
                                            offset: 1,
                                            color: '#35c2ff'
                                        },
                                    ]
                                }
                            },
                            label: {
                                normal: {
                                    fontSize: 14
                                }
                            }
                        }
                    }
                }),
                // 节点间的数据关系
                links: props.data.relations.map((item, index) => ({
                    source: item.source,
                    target: item.target,
                    speed: `${item.speed}kb/s`,
                    lineStyle: {
                        normal: {
                            color: '#12b5d0',
                            // 曲线率
                            curveness: 0.2
                        }
                    },
                    label: {
                        show: true,
                        position: 'middle',
                        // 是否对文字进行偏移
                        offset: [10, 0]
                    }
                }))
            }, {
                type: 'lines',
                // 该系列需要使用的坐标系：“二维直角坐标系”
                coordinateSystem: 'cartesian2d',
                z: 1,
                // 线条的特效配置
                effect: {
                    show: true,
                    smooth: false,
                    trailLength: 0,
                    symbol: 'arrow',
                    color: 'rgba(55,155,255,0.6)',
                    symbolSize: 12
                },
                lineStyle: {
                    normal: {
                        curveness: 0.2
                    }
                },
                data: [
                    [{ coord: [0, 300] }, { coord: [50, 200] }],
                    [{ coord: [0, 100] }, { coord: [50, 200] }],
                    [{ coord: [50, 200] }, { coord: [100, 100] }],
                    [{ coord: [50, 200] }, { coord: [100, 300] }]
                ]
            }
        ]
    }

词云图

需要安装依赖后导入import("echarts-wordcloud")

注意：借助浏览器的插件在Nuxt框架下需要判断让它在客户端导入，不然会报错！

const option ={
        series: [
            {
                type: 'wordCloud',
                // 文字大小范围
                sizeRange: [8, 46],
                // 文字旋转
                rotationRange: [0, 0],
                gridSize: 0,
                layoutAnimation: true,
                textStyle: {
                    color: randomRGB
                },
                // 高亮字体
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                },
                data: props.data.datas
            }
        ]
    }

封装composable用于操作echarts生成

按需加载插件，节省初始包体积。
避免 SSR 报错（import 仅在客户端执行）。
onMounted：监听 resize 事件，onBeforeUnmount：解除 resize 监听，释放图表实例
销毁 ECharts 实例：释放资源，避免内存不断积累。
正确时机：组件即将卸载时执行，最适合做 cleanup。
markRaw 处理 chartInstance，避免将 ECharts 实例做响应式包裹，提升性能，避免不必要的跟踪。

// 导入 echarts 主库
import * as echarts from "echarts"
import { markRaw } from 'vue' // 添加这句

// 声明 process.client（为了让 TypeScript 不报错）
// 在 Nuxt 中，process.client 表示是否处于客户端运行环境
declare const process: {
  client: boolean;
}

// 导出一个 composable，用于封装 echarts 的初始化和操作逻辑
export const useEcharts = () => {
  // 图表容器的 DOM 引用（挂载到页面上的 <div ref="chartRef">）
  const chartRef = ref<HTMLElement | null>(null)

  // 图表实例对象（echarts.init 的返回值）
  let chartInstance: echarts.ECharts | null = null

  // 初始化图表，支持普通图表或词云（wordcloud）
  const initChart = async (type?: "wordcloud") => {
    if (!chartRef.value) return // 容器还没挂载，跳过
    // 如果是词云图表，并且是在客户端环境下，动态加载 echarts-wordcloud 插件
    if (type === "wordcloud" && process.client) {
      await import("echarts-wordcloud")
    }

    // 初始化 echarts 实例，绑定到 DOM 容器上, 使用 markRaw 避免响应式干扰
	chartInstance = markRaw(echarts.init(chartRef.value))
  }

  // 设置图表的配置项（option）
  const setOptions = (options: any) => {
    chartInstance?.setOption(options)
  }

  // 响应窗口大小变化，重置图表大小
  const resize = () => {
    chartInstance?.resize()
  }

  // 组件挂载时绑定 resize 事件监听
  onMounted(() => {
    if (process.client) {
      window.addEventListener("resize", resize)
    }
  })

  // 组件销毁前解绑事件监听，并销毁 echarts 实例释放资源
  onBeforeUnmount(() => {
    if (process.client) {
      window.removeEventListener("resize", resize)
      chartInstance?.dispose()
    }
  })

  // 返回方法和 DOM 引用，供组件内使用
  return {
    chartRef,     // DOM 引用，组件中通过 ref="chartRef" 绑定
    initChart,    // 初始化图表方法
    setOptions,   // 设置图表配置项方法
    resize        // 手动触发图表 resize
  }
}

用nuxt3写echarts开发注意事项

SSR渲染问题

图表组件依赖 DOM 和浏览器环境，不能 SSR，用 <ClientOnly> 包裹图表部分，完美规避服务端渲染的问题。

feidu 智慧社区数据大屏

Sun, 30 Mar 2025 00:00:00 +0000

feidu 是一个 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组成的智慧社区数据大屏项目。它把社区管理、安防监控、CIM 平台、能源检测和节能分析集中在一个可视化界面里，适合展示智慧社区、园区管理、安防运维和能源数据看板类项目的前端实现方式。

适合谁

想参考智慧社区、智慧园区或数据大屏界面实现的人。
想学习 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组合方式的人。
需要安防监控、CIM 平台、能源检测、节能分析等可视化页面结构的人。
想看真实线上演示，而不是只看静态截图的前端学习者。

项目价值

feidu 的价值在于它不是单个图表练习，而是把多种业务模块组织成一个完整大屏：左侧展示安防概况、摄像头监控和报警信息，中间展示城市 / 社区 CIM 场景，右侧展示舒适度、能耗、系统能效和机组运行状态。底部还提供社区管理、安保监控、CIM 平台、能源检测和节能分析等模块切换入口。

如果你搜索的是 smart community dashboard、Vue ECharts dashboard、Nuxt 3 data visualization、security monitoring dashboard、energy monitoring dashboard 或 CIM platform UI，这个项目可以作为一个可运行的前端大屏参考。

技术方向

Nuxt 3
Vue
Tailwind CSS
ECharts
Element Plus
数据可视化大屏
智慧社区界面
安防监控看板
能源监测与节能分析
CIM 平台前端展示

项目入口

GitHub 仓库：linsk27/feidu
线上演示：feidu-murex.vercel.app
项目总览：linsk27 Projects

如果这个智慧社区数据大屏对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善项目文档、模块说明和线上演示体验的主要信号。

Echarts on 404_@林达

echarts-learn 数据可视化练习

适合谁

项目价值

技术方向

项目入口

初步接触可视化Echarts

什么是Echarts

它能做什么？

它的核心特点：

安装方式（前端项目）：

npm/yarn 安装：

直接在 HTML 中引用（CDN）：

其他类似图表库

如何写一个图表

图表步骤

图表配置

柱形图

雷达图

环形图

关系图

词云图

封装composable用于操作echarts生成

用nuxt3写echarts开发注意事项

SSR渲染问题

feidu 智慧社区数据大屏

适合谁

项目价值

技术方向

项目入口