Apache ECharts实现 ->数据大屏

一、Apache ECharts概述

1. 是什么：
   • 一个基于JS的开源可视化图表库
2. 用途：
   • 实现数据大屏，可视化展示数据

二、Apache ECharts在项目里的安装与初始化

1. 安装：npm install echarts --save
2. 引入：
   • 一次性引入所有的图表和组件：
     • import * as echarts from "echarts"
   • 按需引入：
     • 引入echarts核心模块（有echarts使用必须要的接口）
       • import * as echarts from "echarts/core"
     • 引入所需的组件
       • import { 图表名 } from "echarts/charts"
       • import { 组件名 } from "echarts/components"
       • import { 布局名 } from "echarts/features"
       • import { 渲染器名 } from "echarts/renderers"
     • 注册引入的组件
       • echarts.use([组件])
   • 在TS里按需引入：
     • 使用ECharts提供的ECOption接口，来确保只用了已加载的组件和图表
     • 具体使用：(在按需引入的基础上还要进行类型的引入)
       • import type { 图表的类型名 } from "echarts/charts"
       • import type { 组件的类型名 } from "echarts/components"
       • type ECOption = ComposeOption<|类型定义名>
3. 初始化图表，设置配置项：
   • index.html：
     • 设置一个DOM容器，其id假设为"main"
   • index.ts入口文件：
     • 初始化图表：const myChart = echarts.init(document.getElementById("main"))
       • 注意：使用这种方式要保证容器已有宽高
         • 如果DOM容器没宽高或需要额外指定图表大小，能采用->
           • const myChart = echarts.init(document.getElementById("main"),null,{width:,height:})
     • 定义配置项：const option: ECOption = {图表配置项}
     • 传入配置项：myChart.setOption(option)
4. 响应容器大小的变化：
   • window.addEventListener("resize",function(){ myChart.resize(); })
     • resize()可传入参数：{width:,height:}

三、Apache ECharts的应用

1. 图表：
   • 柱状图/条形图：
     • 用途：
       • 通过柱形的长度来表现数据大小
     • 基本设置：
       • option里：
         • xAxis：{data:[横轴值]}
         • yAxis：{}
         • series:[{type:'bar',data:[数据]}]
         • 实现多系列：series里新增一项
         • 实现多系列堆叠：series里每一项新增：stack:'x'
         • 设置样式：series.itemStyle
         • 设置柱条宽高：series.barWidth
         • 设置柱条间距：series.barGap,series.barCategoryGap
         • 设置柱条背景色：series.backgroundStyle:{color:}
     • 相关实现
       • 动态排序柱状图：
       • 阶段瀑布图
   • 折线图：
     • 用途：
       • 展示数据项随着时间推移的趋势或变化
     • 基本设置：
       • option里：
         • series.type:'line
   • 基础饼图：
     • 用途：
       • 表现不同类目的数据在总和中的占比
     • 基本设置：
       • option里：
         • series.type:'pie
   • 基础散点图：
     • 用途：
       • 通过许多点表示高维数据
     • 基本设置：
       • option里：
         • series.type:'scatter'
2. 服务端SVG渲染
   • 用途：
     • 缩短前端渲染时间
     • 在不支持动态运行脚本的环境中嵌入图表
3. 处理动态的异步数据
   • 使用jQuery等工具异步获取数据后 -> 通过setOption填入数据和配置项即可
4. 富文本标签
   • 用途：
     • 定制文本块、文本片段样式
5. 动画
   • 实现：
     • animationDuration,animationEasing,animationDelay
     • animationDurationUpdate,animationEasingUpdate,animationDelayUpdate
6. 拖拽
   • 实现：
     • graphic组件

• ECharts官网地址
• series.itemStyle样式参考手册
• 感想：
  • echarts官网写得很详尽，基本的配置流程大致过了一遍，哈哈日后再完善配置项！（HOPE!）