• 可视化 & Echarts

    一、可视化介绍

    • 可视化：将数据用图表展示出来，让数据更加直观、让数据特点更加突出
    • 应用场景：营销数据、生产数据、用户数据

    二、可视化库介绍

       常见的数据可视化库：

    • D3.js：目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

    • ECharts.js：百度出品的一个开源 Javascript 数据可视化库

    • Highcharts.js：国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

    • AntV：蚂蚁金服全新一代数据可视化解决方案等等

    • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

    ECharts：一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

    三、Echarts

    (一) Echarts引入和使用

    • 下载echarts（库） 引入文件到html页面中
    <script src="./src/echarts.js">script>
    • 准备一个DOM容器
    1. <style>
    2.     .box {
    3. 		width: 400px;
    4. 		height: 400px;
    5. 		cursor: pointer;
    6. 	}
    7. style>
    8. <div class='box'>div>
    • 初始化一个echarts对象
    1. var box = document.querySelector(".box")
    2. var echarts1 = echarts.init(box)
    • 指定配置项和数据
    1. var option = {
    2. 	title: {
    3. 		text: 'ECharts 入门示例'
    4. 	},
    5. 	tooltip: {},
    6. 	legend: {
    7. 		data: ['销量']
    8. 	},
    9. 	xAxis: {
    10. 		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    11. 	},
    12. 	yAxis: {},
    13. 	series: [{
    14. 		name: '销量',
    15. 		type: 'bar',
    16. 		data: [5, 20, 36, 10, 10, 20]
    17. 	}]
    18. }
    • 将配置项设置给echarts实例对象
    echarts1.setOption(option)

    （二）了解基础配置

    • title：标题组件，包含主标题和副标题

    • tooltip：提示框组件

    • legend：图例组件

    • series

      • 系列列表：每个系列通过 type 决定自己的图表类型

    • xAxis：直角坐标系 grid 中的 x 轴

      • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间

    • yAxis：直角坐标系 grid 中的 y 轴

    • grid：直角坐标系内绘图网格

    • color：调色盘颜色列表

      注：不要求全部记忆，只需要知道怎么在官方文档上查找学习

      官方文档：Documentation - Apache ECharts

    （1）示例：标题组件title

    1.               title: {
    2. 					show: true,          //是否显示标题组件
    3. 					text: '主标题',
    4. 					link: "http://www.baidu.com",   //主标题文本超链接
    5. 					textStyle: {                   //主标题的文本样式 相当于css的
    6. 						color: "blue",
    7. 						fontWeight: "100"
    8. 					},
    9. 					subtext: "副标题",
    10. 					subtextStyle: {               //副标题的文本样式
    11. 						color: "red",
    12. 						fontWeight: "100",
    13. 						fontSize: "20px"
    14. 					},
    15. 					textAlign: "auto",         //整体（包括 text 和 subtext）的水平对齐
    16. 					textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
    17. 					padding: [5, 10],          //标题内边距
    18. 					left: 400,                 //title 组件离容器左侧的距离
    19. 					backgroundColor: "yellow"   //标题背景色，默认透明
    20. 				},

    （2）示例：工具组件toolbox

    1.                 toolbox: {
    2. 					//配置工具
    3. 					feature: {
    4. 						mytool: {    //自定义的工具名字，只能以 my 开头
    5. 							show: true,
    6. 							title: "自定义扩展方法",
    7. 							icon: "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7",
    8. 							onclick: function() {
    9. 								console.log("点击事件")
    10. 							}
    11. 						},
    12. 						saveAsImage: {
    13. 							name: "保存"
    14. 						},
    15. 						restore: {      //配置项还原
    16.  
    17. 						},
    18. 						dataView: { //数据视图工具，可展现当前图表所用的数据，编辑后可动态更新
    19.  
    20. 						},
    21. 						dataZoom: {},    //数据区域缩放
    22. 						magicType: {      //动态类型切换
    23. 							type: ['line', 'bar', 'stack']
    24. 						}
    25. 					}
    26. 				},

    （3）示例：提示框组件tooltip

    1.             tooltip: {
    2. 					show: true,
    3. 					trigger: "axis", //触发类型 "none"||"axis"
    4. 					showContent: false,   // 是否显示提示框浮层
    5. 					alwaysShowContent: true,  //是否永远显示提示框内容
    6. 					triggerOn: "click",         //提示框触发的条件
    7. 					backgroundColor: "gold",
    8. 					textStyle: {
    9. 						color: "white"
    10. 					},
    11. 					axisPointer: {     //是配置坐标轴指示器的快捷方式
    12. 						type: "cross",  //指示器类型 line shadow none cross
    13. 						axis: "x",      //指示器的坐标轴
    14. 						snap: true,     //坐标轴指示器是否自动吸附到点上
    15.                         label: {        //坐标轴指示器的文本标签
    16. 							show: true,
    17. 							color: "red",
    18. 						 	formatter: ({    //文本标签文字的格式化器
    19. 						 		value
    20. 						 	}) => {
    21. 								console.log(value)
    22. 						 		return `--${value}` //value*2
    23. 						 	}
    24. 						 }
    25. 					}
    26. 				},

    （4）示例：图例组件legend

    1. legend: {
    2. 					type: "scroll",     //图例的类型 plain普通图例 scroll可滚动翻页的图例
    3. 					orient: "vertical",  //图例列表的布局朝向 vertical horizontal
    4. 					data: [{
    5. 						name: '销量1',   //图例项的名称
    6. 						icon: "circle",   //图例项的 icon
    7. 						itemStyle: {
    8. 							color: "red"
    9. 						}
    10. 					}, {
    11. 						name: '销量2',
    12. 						icon: "rect",
    13. 						itemStyle: {
    14. 							color: "red"
    15. 						}
    16. 					}, {
    17. 						name: '纯利1',
    18. 						icon: "triangle",
    19. 						textStyle: {
    20. 							color: "red",
    21. 							fontSize: "20px"
    22. 						}
    23. 					}, {
    24. 						name: '纯利2',
    25. 						icon: "path://",   //'path://' 将图标设置为任意的矢量路径
    26. 						icon: "image://url",       //通过图片链接设置为图片
    27. 						icon:  "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7"   //通过图片编码设置为图片
    28. 					  }]
    29. 				   },

    （5）示例：系列列表series

    1.               series: [{
    2. 					name: "某某系列1",
    3. 					type: 'line',
    4. 					colorBy: "series", //按系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色  
    5. 					symbol: "rect",     //标记的图形 设置拐点 
    6. 					cursor: "move",
    7. 					label: {
    8. 						show: true    //是否显示标签文字
    9. 					},
    10. 					endLabel: {       //折线端点的标签
    11. 						show: true
    12. 					},
    13. 					labelLine: {
    14. 						show: true,   //是否显示连接线
    15. 						smooth: true    //是否平滑
    16. 					},
    17. 					lineStyle: {       //标签的视觉引导线配置
    18. 						color: "red",
    19. 						width: 2,
    20. 						join: "miter"  //设置2个长度不为0的相连部分如何连接在一起的属性
    21. 					},
    22. 					smooth: 0.3,
    23. 					data: [420, 432, 401, 434, 190, 130, 120],
    24. 				}, {
    25. 					name: "某某系列2",
    26. 					type: 'line',
    27. 					symbol: "arrow",
    28. 					symbolSize: 10,     // 拐点大小   
    29. 					data: [860, 962, 961, 964, 1260, 1360, 1360],
    30. 				}]
    31. 			};

    （6）示例：直角坐标系 grid 中的 x、y轴（类似）

    1.  xAxis: {
    2.      show: true;  //是否显示x轴                
    3.      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']   //类目数据，在类目轴
    4.      position:'top'   //x轴的位置
    5.      name:'坐标轴的名称'
    6.      axisTick: {
    7.          show: false // 去除刻度线
    8.      },
    9.      axisLabel: {
    10.          color: '#4c9bfd' // 文本颜色
    11.      },
    12.      axisLine: {
    13.          show: false // 去除轴线
    14.      },
    15.      boundaryGap: false  // 去除轴内间距
    16.  },

    （7）蓝丁格尔玫瑰图

    1. <style>
    2.     .box {
    3.       width: 500px;
    4.       height: 500px;
    5.     }
    6. style>
    7. <div class="box">div>
    8. <script>
    9.     var box = document.querySelector(".box")
    10.     var ect = echarts.init(box)
    11.     option = {
    12.       title: {
    13.         text: 'Nightingale Chart',
    14.         subtext: 'Fake Data',
    15.         left: 'center'
    16.       },
    17.       tooltip: {
    18.         trigger: 'item',
    19.         formatter: '{a} 
      {b} : {c} ({d}%)'
    20.       },
    21.       toolbox: {
    22.         show: true,
    23.         feature: {
    24.           mark: {
    25.             show: true
    26.           },
    27.           dataView: {
    28.             show: true,
    29.             readOnly: false
    30.           },
    31.           restore: {
    32.             show: true
    33.           },
    34.           saveAsImage: {
    35.             show: true
    36.           }
    37.         }
    38.       },
    39.       series: [{
    40.         name: '面积模式',
    41.         type: 'pie',
    42.         radius: [30, 110],
    43.         center: ['25%', '50%'],
    44.         roseType: 'radius',
    45.         color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    46.         itemStyle: {
    47.           borderRadius: 5
    48.         },
    49.         label: {
    50.           show: false,
    51.           fontSize: 10
    52.         },
    53.         emphasis: {
    54.           label: {
    55.             show: true
    56.           }
    57.         },
    58.         labelLine: {
    59.           // 连接扇形图线长
    60.           length: 6,
    61.           // 连接文字线长
    62.           length2: 8
    63.         },
    64.         data: [{
    65.             value: 20,
    66.             name: '云南'
    67.           },
    68.           {
    69.             value: 26,
    70.             name: '北京'
    71.           },
    72.           {
    73.             value: 24,
    74.             name: '山东'
    75.           },
    76.           {
    77.             value: 25,
    78.             name: '河北'
    79.           },
    80.           {
    81.             value: 20,
    82.             name: '江苏'
    83.           },
    84.           {
    85.             value: 25,
    86.             name: '浙江'
    87.           },
    88.           {
    89.             value: 30,
    90.             name: '四川'
    91.           },
    92.           {
    93.             value: 42,
    94.             name: '湖北'
    95.           }
    96.         ]
    97.       }, ]
    98.     };
    99.     ect.setOption(option)
    100. script>

      效果图：

  • 相关阅读:
    【德哥说库系列】-Oracle 19C容器数据库日常管理
    合宙Air724UG LuatOS-Air LVGL API控件-滑动条 (Slider)
    Spring | @Order 与 Ordered 控制加载顺序
    【数据结构】测试7 图
    Python之numpy函数
    利用wasm实现读写本地项目的在线编辑器
    Spring Boot统一功能处理
    【洛谷 P3613】【深基15.例2】寄包柜 题解（映射）
    Hive分区表和分桶表
    模拟经营类游戏是怎么开发的？
  • 原文地址：https://blog.csdn.net/qq_56668869/article/details/125996307