景点介绍网站模板网站宝 添加二级域名

景点介绍网站模板,网站宝 添加二级域名,网站建设首页该放什么,html5网页模板代码一、ECharts 概念#xff1a; ECharts 是由百度前端团队开发并维护的开源可视化库#xff0c;基于 JavaScript 实现#xff0c;支持涵盖折线图、柱状图、饼图、散点图、地图、雷达图、仪表盘、3D 图表等 20 图表类型#xff0c;同时提供拖拽重计算、数据刷选、联动交互等高…一、ECharts 概念ECharts 是由百度前端团队开发并维护的开源可视化库基于 JavaScript 实现支持涵盖折线图、柱状图、饼图、散点图、地图、雷达图、仪表盘、3D 图表等 20 图表类型同时提供拖拽重计算、数据刷选、联动交互等高级功能。核心优势为何成为前端可视化首选开箱即用低成本上手无需复杂的底层封装几行代码即可实现基础图表渲染API 设计符合前端开发者直觉全场景覆盖从简单的单维度数据展示到复杂的多图表联动、3D 可视化、地理信息可视化满足企业级所有可视化需求高度可定制支持自定义主题、样式、动画、交互逻辑可精准匹配产品视觉风格与其他可视化库的对比可视化库优势劣势适用场景ECharts功能全、定制性强、中文文档、适配性好3D 功能需依赖扩展库企业级后台、大屏可视化、通用数据展示D3.js灵活性极高、底层能力强学习成本高、开发效率低高度定制化的复杂可视化场景Chart.js轻量、易用、体积小图表类型少、高级功能弱简单的轻量级可视化需求Highcharts交互流畅、国际化文档商业使用需授权、体积较大海外项目、对交互要求高的场景综上ECharts 是 “性价比” 最高的选择 —— 既兼顾开发效率又能满足绝大多数企业级场景的定制需求。二、ECharts 快速入门从环境搭建到第一个图表1. 环境准备三种引入方式ECharts 支持多种引入方式可根据项目场景选择方式 1CDN 引入快速测试 / 小型项目无需安装依赖直接在 HTML 中引入官方 CDN 链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleECharts 入门示例/title script srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/script /head body div idmain stylewidth: 600px; height: 400px;/div /body /html方式 2npm 安装工程化项目推荐适用于 Vue/React/Angular 等框架项目通过包管理器安装# npm 安装 npm install echarts --save # yarn 安装 yarn add echarts # pnpm 安装 pnpm add echarts方式 3按需引入减小项目体积ECharts 完整包体积约 500KB按需引入可仅加载所需图表和组件// 引入 ECharts 核心模块 import * as echarts from echarts/core; // 引入柱状图图表按需引入需要的图表类型 import { BarChart } from echarts/charts; // 引入提示框、标题、直角坐标系等组件 import { TitleComponent, TooltipComponent, GridComponent } from echarts/components; // 引入 Canvas 渲染器默认 import { CanvasRenderer } from echarts/renderers; // 注册所需组件 echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);2. 第一个图表柱状图实现无论哪种引入方式ECharts 核心渲染流程均为 “初始化实例 → 配置项设置 → 渲染图表” 三步// 步骤 1获取图表容器 DOM 节点 const chartDom document.getElementById(main); // 步骤 2初始化 ECharts 实例 const myChart echarts.init(chartDom); // 步骤 3配置项核心决定图表样式、数据、交互 const option { // 标题配置 title: { text: 2024年各季度产品销量, // 主标题 subtext: 单位万件, // 副标题 left: center // 标题位置居中 }, // 提示框配置鼠标悬浮显示数据详情 tooltip: { trigger: axis, // 触发方式坐标轴触发 axisPointer: { type: shadow } // 指示器样式阴影就是滑动上去背景变灰 }, // 图例配置多系列数据时区分不同系列 legend: { data: [产品A, 产品B], // 配置可显示图例图例就是图标旁的小图标有哪些数据类型 left: left }, // 直角坐标系配置x/y 轴容器就是配置坐标轴或者说图表主体内容的位置 grid: { left: 3%, right: 4%, bottom: 3%, containLabel: true // 包含坐标轴标签让坐标轴标签也参与位置计算 }, // x 轴配置 xAxis: { type: category, // 类目轴非数值 data: [第一季度, 第二季度, 第三季度, 第四季度] }, // y 轴配置 yAxis: { type: value // 数值轴 }, // 系列数据图表核心数据 series: [ { name: 产品A, type: bar, // 图表类型柱状图 data: [35, 48, 62, 75], itemStyle: { color: #409EFF } // 柱子颜色 }, { name: 产品B, type: bar, data: [28, 39, 51, 68], itemStyle: { color: #67C23A } } ] }; // 步骤 4设置配置项并渲染 myChart.setOption(option);运行上述代码即可得到一个包含标题、提示框、图例的双系列柱状图 —— 这是 ECharts 最基础的使用范式所有复杂图表均基于 “配置项option” 的扩展3. 核心概念理解 ECharts 配置项ECharts 的核心是 “配置项驱动”所有功能都通过option对象配置掌握以下核心概念就能快速适配所有图表类型容器Dom必须为图表设置固定宽高或通过 CSS 自适应否则无法渲染组件Component标题title、提示框tooltip、图例legend、坐标轴xAxis/yAxis、网格grid等是图表的 “辅助元素”系列Series图表的核心数据层type字段决定图表类型bar/line/pie 等data字段为数据源样式Style通过itemStyle/textStyle/axisStyle等配置元素样式支持颜色、字体、边框、阴影等交互Interaction通过tooltip/dataZoom/roam等配置交互逻辑如鼠标悬浮、数据缩放、地图漫游等。三、ECharts 核心场景实战从基础图表到高级交互1. 常见图表类型ECharts 支持 20 图表类型以下是高频场景的配置要点场景 1折线图适用于展示数据随时间 / 维度的变化趋势核心配置与柱状图类似仅需将series.type改为line并可配置折线平滑、标记点等series: [ { name: 用户增长, type: line, data: [120, 150, 180, 210, 190, 250], smooth: true, // 折线平滑 symbol: circle, // 标记点形状 symbolSize: 8, // 标记点大小 markPoint: { // 标记极值点 data: [ { type: max, name: 最大值 }, { type: min, name: 最小值 } ] }, markLine: { // 标记平均线 data: [{ type: average, name: 平均值 }] } } ]场景 2饼图适用于展示各维度占总体的比例核心配置需注意radius饼图半径、label标签、roseType南丁格尔图option { title: { text: 产品品类占比, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [ { name: 销量占比, type: pie, radius: [40%, 70%], // 内/外半径环形图 avoidLabelOverlap: false, label: { show: true, position: outside, formatter: {b}: {c} ({d}%) // 标签格式名称数值百分比 }, emphasis: { // 鼠标悬浮高亮 itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0,0,0,0.5) } }, data: [ { value: 35, name: 电子产品 }, { value: 25, name: 服装 }, { value: 20, name: 食品 }, { value: 15, name: 家居 }, { value: 5, name: 其他 } ] } ] };场景 33D 图表通过 ECharts GL 扩展库实现 3D 柱状图、散点图、地图需先引入echarts-glscript srchttps://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js/scriptoption { title: { text: 3D 销量对比图 }, xAxis3D: { type: category, data: [Q1, Q2, Q3, Q4] }, yAxis3D: { type: category, data: [产品A, 产品B, 产品C] }, zAxis3D: { type: value }, grid3D: { boxWidth: 200, boxHeight: 100, depth: 80 }, series: [ { type: bar3D, data: [ [0, 0, 35], [0, 1, 28], [0, 2, 42], [1, 0, 48], [1, 1, 39], [1, 2, 55], [2, 0, 62], [2, 1, 51], [2, 2, 68], [3, 0, 75], [3, 1, 68], [3, 2, 80] ], shading: lambert, // 3D 着色方式 label: { show: true } } ] };2. 高级交互ECharts 提供丰富的交互能力以下是企业级项目高频使用的交互功能功能 1动态更新数据适用于实时数据展示如监控大屏、实时销量通过setOption增量更新数据// 模拟实时数据更新 let count 0; setInterval(() { const newData [ Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100) ]; // 增量更新仅修改数据保留其他配置 myChart.setOption({ series: [{ name: 产品A, data: newData }] }); count; if (count 10) clearInterval(this); }, 1000);功能 2数据缩放适用于大数据量图表允许用户缩放 / 拖拽查看数据细节option { xAxis: { type: category, data: [...Array(100).keys()].map(i 第${i1}天) }, yAxis: { type: value }, dataZoom: [ { type: slider, xAxisIndex: 0, bottom: 0 }, // 底部滑动条缩放 { type: inside, xAxisIndex: 0 } // 鼠标滚轮缩放 ], series: [{ type: line, data: [...Array(100)].map(() Math.random() * 100) }] };功能 3自定义提示框通过formatter自定义提示框内容展示更丰富的信息tooltip: { trigger: axis, formatter: function (params) { let res div stylefont-weight: bold;${params[0].name}/div; params.forEach(item { res div${item.seriesName}${item.value}万件同比${item.value 50 ? 增长 : 下降}${Math.abs(item.value - 50)}%/div; }); return res; } }五、ECharts 进阶学习(一部分)1. 自定义主题ECharts 支持自定义主题如匹配产品品牌色可通过官方主题编辑器https://echarts.apache.org/zh/theme-builder.html生成主题配置再引入项目// 引入自定义主题 import ./my-theme.json; // 初始化时指定主题 const myChart echarts.init(chartDom, my-theme);2. 导出图表为图片 / PDF通过 ECharts 内置的getDataURL方法可将图表导出为图片结合 jsPDF 可实现 PDF 导出// 导出为图片 const exportChart () { const dataUrl myChart.getDataURL({ type: png, pixelRatio: 2, // 分辨率 backgroundColor: #fff }); const a document.createElement(a); a.href dataUrl; a.download chart.png; a.click(); }; // 绑定导出按钮事件 document.getElementById(exportBtn).addEventListener(click, exportChart);总结ECharts是目前使用较为广泛的一项数据可视化的工具使用起来简单方便。我在写项目的时候使用起来非常简单只需要写几行代码就能实现一个不错的效果图且通过个性化配置后能很好的适配使用场景。