• ECharts 数据可视化简介与基本使用

    一、ECharts简介

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

            简单来讲就是：ECharts 是一个JS插件，可流畅运行于PC与移动设备，性能优异；兼容性强，兼容当前绝大部分主流浏览器；并能提供很多常用图表，且可定制，如：

    折线图、柱状图、散点图、饼图、K线图

    二、ECharts 的使用

    官网使用手册：快速上手

    基本使用步骤：

    • 1、下载并引入 echarts.min.js

            下载链接（三个方法）：下载

             我使用的是第一个方法，点击 Dist 进入相应页面，找到其中的 echarts.min.js 文件，点击打开，然后复制其代码到自己创建的 echarts.min.js 文件中，并将 echarts.min.js 引入即可。

    2.     <script src="js/echarts.min.js">script>
    • 2、为 ECharts 准备一个具备大小即定义了宽高的 DOM 容器
    2.     <div class="box" style="width: 500px;height: 500px;margin: 50px auto;border:1px solid skyblue;">div>
    • 3、初始化 echarts 实例对象
    1. // 3、初始化 echarts 实例对象 
    2.     var myChart = echarts.init(document.querySelector('.box'));
    • 4、指定配置项和数据(option)
    1. // 4、指定配置项和数据(option)
    2. var option = {
    3.       legend: {
    4.         top: 'bottom'
    5.       },
    6.       toolbox: {
    7.         show: true,
    8.         feature: {
    9.           mark: { show: true },
    10.           dataView: { show: true, readOnly: false },
    11.           restore: { show: true },
    12.           saveAsImage: { show: true }
    13.         }
    14.       },
    15.       series: [
    16.         {
    17.           name: 'Nightingale Chart',
    18.           type: 'pie',
    19.           radius: [30, 150],
    20.           center: ['50%', '50%'],
    21.           roseType: 'area',
    22.           itemStyle: {
    23.             borderRadius: 8
    24.           },
    25.           data: [
    26.             { value: 40, name: 'rose 1' },
    27.             { value: 38, name: 'rose 2' },
    28.             { value: 32, name: 'rose 3' },
    29.             { value: 30, name: 'rose 4' },
    30.             { value: 28, name: 'rose 5' },
    31.             { value: 26, name: 'rose 6' },
    32.             { value: 22, name: 'rose 7' },
    33.             { value: 18, name: 'rose 8' }
    34.           ]
    35.         }
    36.       ]
    37.     };
    • 5、将配置项设置给 echarts 实例对象
    1. // 5、将配置项设置给 echarts 实例对象
    2.     myChart.setOption(option);

    完整代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Echarts 基本使用title>
    8.     
    9.     <script src="js/echarts.min.js">script>
    10. head>
    11. <body>
    12.     
    13.     <div class="box" style="width: 500px;height: 500px;margin: 50px auto;border:1px solid skyblue;">div>
    14.     <script>
    15.         // 3、初始化 echarts 实例对象 
    16.         var myChart = echarts.init(document.querySelector('.box'));
    17.         // 4、指定配置项和数据(option)
    18.         var option = {
    19.               legend: {
    20.                 top: 'bottom'
    21.               },
    22.               toolbox: {
    23.                 show: true,
    24.                 feature: {
    25.                   mark: { show: true },
    26.                   dataView: { show: true, readOnly: false },
    27.                   restore: { show: true },
    28.                   saveAsImage: { show: true }
    29.                 }
    30.               },
    31.               series: [
    32.                 {
    33.                   name: 'Nightingale Chart',
    34.                   type: 'pie',
    35.                   radius: [30, 150],
    36.                   center: ['50%', '50%'],
    37.                   roseType: 'area',
    38.                   itemStyle: {
    39.                     borderRadius: 8
    40.                   },
    41.                   data: [
    42.                     { value: 40, name: 'rose 1' },
    43.                     { value: 38, name: 'rose 2' },
    44.                     { value: 32, name: 'rose 3' },
    45.                     { value: 30, name: 'rose 4' },
    46.                     { value: 28, name: 'rose 5' },
    47.                     { value: 26, name: 'rose 6' },
    48.                     { value: 22, name: 'rose 7' },
    49.                     { value: 18, name: 'rose 8' }
    50.                   ]
    51.                 }
    52.               ]
    53.             };
    54.         // 5、将配置项设置给 echarts 实例对象
    55.         myChart.setOption(option);
    56.     script>
    57. body>
    58. html>

    效果：

  • 相关阅读:
    麒麟信安携手河南IT联盟召开 《麒麟信安信创应用解决方案》线上分享会
    PdfSharp 对中文字体显示乱码的问题
    前端基础建设与架构27 同构渲染架构：实现一个 SSR 应用
    使用Python绘制CPI和PPI曲线
    RocketMQ 5.0 新版版本新特性总结
    VMware/kali使用小贴士（持续更新（吧
    Laravel视图：构建动态用户界面的基石
    图形编辑器基于Paper.js教程01：入门必读
    【算法题】207. 课程表
    淘宝/天猫API：item_search_img-按图搜索淘宝商品（拍立淘）
  • 原文地址：https://blog.csdn.net/qq_64133626/article/details/126916084