ECharts可视化教程（包含用ECharts生成图时配置项参数说明以及用ECharts做可视化大屏案例）

已于 2024-04-03 17:55:27 修改
阅读量3.9k 收藏 75
点赞数 25
分类专栏： 可视化 文章标签： echarts 前端 javascript
于 2024-04-03 16:23:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/manfanying/article/details/137344066
版权

目录

一、关于ECharts

二、官网使用

2.1快速入门 

2.2示例

2.3配置项手册

​三、使用ECharts

3.1下载并引用echarts.js文件

3.2创建index.html文件

3.3初始化echarts实例

3.4指定配置项以及数据

3.5把配置项给实例对象

四、ECharts各种图常用配置项参数说明

4.1柱状图 

4.2折线图 

4.3饼图 

4.4模拟航线图

最近在学着用ECharts做一个可视化大屏，效果如下：

该可视化大屏主要包含了柱状图，折线图，饼图以及模拟航线地图。

该篇文章就以这几种图为例讲一下如何使用ECharts进行可视化。

一、关于ECharts

ECharts（Enterprise Charts）是一个由百度开源的数据可视化库，它提供了丰富的图表类型和可视化选项，使得开发者能够轻松地在网页中创建交互式的图表和数据可视化。ECharts支持多种数据格式，包括JSON、数组等，并且可以与各种现代前端框架（如React、Vue.js、Angular等）无缝集成。

ECharts的主要特点包括：

  1. 丰富的图表类型：ECharts提供了包括折线图、柱状图、饼图、散点图、雷达图、地图、热力图、关系图等多种图表类型，满足不同的数据展示需求。

  2. 灵活的配置项：ECharts的配置项非常灵活，用户可以自定义图表的颜色、字体、布局、提示信息等，以适应不同的设计需求和品牌风格。

  3. 交互性：ECharts支持图表的交互操作，如数据缩放、拖拽、数据视图切换等，增强了用户体验。

  4. 跨平台兼容性：ECharts可以在PC端和移动端上运行，具有良好的跨浏览器兼容性，包括IE、Chrome、Firefox等主流浏览器。

  5. 易于集成：ECharts可以轻松集成到各种前端项目中，支持模块化加载和按需引入，减少资源文件的大小。

  6. 社区支持：作为一个开源项目，ECharts拥有活跃的社区支持，用户可以在GitHub上找到最新的更新、问题解答和丰富的示例。

  7. 国际化：ECharts支持多语言，包括但不限于中文、英文，方便不同地区的用户使用。

ECharts适用于各种数据展示场景，如企业报表、数据监控、网站数据展示等，它通过简洁的API和强大的功能，帮助开发者快速构建出美观、实用的数据可视化图表。

ECharts官网地址：Apache ECharts

二、官网使用

官网的首页有两个重要的模块就是快速入门以及所有示例。

2.1快速入门 

速入门就是教你怎么使用ECharts

2.2示例

所有示例就是用ECharts做的各种各样的图的示例

 这个真的很实用，你可以选择你想要做的图的模板，比如你选择一个折线图堆叠，

点击之后，修改代码里面的参数以及你自己的数据即可做出你想要实现的图的效果 

2.3配置项手册

还有一个重要的是官网里面的配置项手册

配置项就是你使用ECharts实现可视化时在options里面需要配置的参数，不同的图的配置项都不尽相同，这个是我们用ECharts做图时的一个重要参考，最主要的是它里面的说明都是中文，我们也不用担心看不懂了

三、使用ECharts

首先你需要一个能编辑前端代码的IDE，我使用的是vscode

3.1下载并引用echarts.js文件

下载地址：下载 - Apache ECharts

你可以点击Dist下载最新版的或者点击查看历史版本下载你想要的版本

在vscode中将echarts.min.js文件放在项目的根目录下的js文件夹下

3.2创建index.html文件

在html文件里面引用echarts.min.js创建DOM容器用来存放用ECharts生成的图

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据可视化</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部的盒子 -->
  <header>
    <h1>数据可视化-Echarts</h1>
    <div class="showTime"></div>
    <script>
      var t = null;
      // 初始化定时器，每秒更新显示时间
      t = setTimeout(time, 1000);//開始运行
      function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        // 更新页面显示的时间
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
      }
    </script>
  </header>
  <!-- 页面主体部分 -->
  <section class="mainbox">
    <div class="column">
      <!-- 柱形图展示就业行业数据 -->
      <div class="panel bar">
        <h2>柱形图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>

      <!-- 折线图展示人员变化趋势 -->
      <div class="panel line">
        <h2>折线图-人员变化 <a href="javascript:;">2020</a><a href="javascript:;">2021</a></h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <!-- 饼形图展示年龄分布数据 -->
      <div class="panel pie">
        <h2>饼形图-年龄分布</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <!-- 该模块用于展示前端需求与市场供应人数对比 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>123456</li>
            <li>101010</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div>
      </div>
      <!-- 地图模块，可能用于展示地域相关数据 -->
      <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="chart"></div>
      </div>
    </div>
    <div class="column">
      <!-- 柱形图展示就业形势数据 -->
      <div class="panel bar2">
        <h2>柱形图-就业形势</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>

      <!-- 折线图展示播放量数据 -->
      <div class="panel line2">
        <h2>折线图-播放量</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <!-- 饼形图展示地区分布数据 -->
      <div class="panel pie2">
        <h2>饼形图-地区分布</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>
  <!-- 引入外部JavaScript库和自定义脚本 -->
  <script src="./js/flexible.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/jquery.js"></script>
  <script src="./js/china.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>

3.3初始化echarts实例

在项目的根目录下面的js目录里面创建一个index.js文件来写用ECharts生成图表的代码

初始化echarts实例示例代码

//实例化对象
var myChart = echarts.init(document.querySelector('.bar .chart'));

3.4指定配置项以及数据

//指定配置项和数据
  var option = {
    color: ['#2f89cf'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    //修改图标的大小
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
        axisTick: {
          alignWithLabel: true
        },
        //修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "8",
          // interval: 0
        },
        //不显示x坐标轴的样式
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        //修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //不显示x坐标轴的样式
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 2
          }
        },
        //y轴分割线样式
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '35%',
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          //修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };

3.5把配置项给实例对象

//把配置项给实例对象
myChart.setOption(option);

四、ECharts各种图常用配置项参数说明

4.1柱状图 

柱状图配置项参数说明
参数说明
title标题组件，用于定义图表的标题。它包含了 text（标题文本）、left（标题水平位置）、top（标题垂直位置）等属性
tooltip提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等
legend图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。
grid网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小
xAxis

X 轴配置，通常用于显示类别数据。可以设置 type（轴类型）、data（类别数据数组）等。

yAxisY 轴配置，通常用于显示数值数据。可以设置 type（轴类型）、name（轴名称）等。
series系列列表，用于定义图表的数据内容。每个系列通过 type 指定为 'bar' 来表示柱状图。data 属性用于定义系列中的数据点
color用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩柱状图
animation动画配置，用于设置图表初始化或数据更新时的动画效果。可以设置 duration（动画时长）和 easing（缓动效果）
dataset数据集配置，用于定义图表的数据源。source 属性用于指定外部数据，transform 属性用于对数据进行处理
toolbox工具箱组件，提供了数据视图、下载等功能。可以设置 feature 属性来定义工具箱中的功能
dataZoom数据区域缩放组件，用于放大和缩小图表的显示区域。可以设置 type（数据区域缩放的类型，如 'inside' 或 'slider'）
visualMap视觉映射组件，用于根据数据值大小对图形的颜色、大小等进行映射。可以设置 min、max（数据的最小值和最大值）和 orient（布局方向）等

可视化大屏柱状图代码示例：

//柱状图1
// 立即执行函数，用于封装柱状图的配置和初始化
(function () {
  // 1. 实例化 ECharts 对象并绑定到指定的 DOM 元素
  var myChart = echarts.init(document.querySelector('.bar .chart'));

  // 2. 定义柱状图的配置项
  var option = {
    // 定义图表的主题颜色
    color: ['#2f89cf'],
    // 提示框组件配置，用于交互时的信息提示
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴触发
      axisPointer: { // 指示器配置
        type: 'shadow' // 类型为阴影指示器
      }
    },
    // 网格组件配置，控制图表的网格位置和大小
    grid: {
      left: "0%", // 左边距
      top: "10px", // 顶部距
      right: "0%", // 右边距
      bottom: "4%", // 底部距
      containLabel: true // 网格是否包含坐标轴的标签
    },
    // X 轴配置
    xAxis: [
      {
        type: 'category', // 类型为类目轴
        data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], // 类目数据
        axisTick: { // 坐标轴刻度的配置
          alignWithLabel: true // 刻度线与标签对齐
        },
        // X 轴标签的样式配置
        axisLabel: {
          color: "rgba(255,255,255,.6)", // 标签颜色
          fontSize: "8", // 标签字体大小
        },
        // X 轴轴线的样式配置
        axisLine: {
          show: false // 不显示轴线
        }
      }
    ],
    // Y 轴配置
    yAxis: [
      {
        type: 'value', // 类型为数值轴
        // Y 轴标签的样式配置
        axisLabel: {
          color: "rgba(255,255,255,.6)", // 标签颜色
          fontSize: "12" // 标签字体大小
        },
        // Y 轴轴线的样式配置
        axisLine: {
          lineStyle: { // 轴线样式配置
            color: "rgba(255,255,255,.1)", // 轴线颜色
            width: 2 // 轴线宽度
          }
        },
        // Y 轴分割线的样式配置
        splitLine: {
          lineStyle: { // 分割线样式配置
            color: "rgba(255,255,255,.1)" // 分割线颜色
          }
        }
      }
    ],
    // 系列配置
    series: [
      {
        name: 'Direct', // 系列名称
        type: 'bar', // 图表类型为柱状图
        barWidth: '35%', // 柱子宽度
        data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
        // 柱子样式配置
        itemStyle: {
          barBorderRadius: 5 // 柱子圆角大小
        }
      }
    ]
  ];

  // 3. 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // 4. 监听浏览器窗口大小变化事件，实现图表的自适应大小
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

//柱状图2
// 立即执行函数，用于封装第二个柱状图的配置和初始化
(function () {
  // 声明颜色数组，用于定义柱状图的颜色
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 实例化 ECharts 对象并绑定到指定的 DOM 元素
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));

  // 定义柱状图的配置项
  var option = {
    // 网格组件配置
    grid: {
      top: "10%", // 顶部距
      left: "22%", // 左边距
      bottom: "10%", // 底部距
      containLabel: true // 网格是否包含坐标轴的标签
    },
    // X 轴配置，不显示 X 轴
    xAxis: {
      show: false // 不显示 X 轴
    },
    // Y 轴配置，包含两个 Y 轴，一个用于显示类目，一个用于显示数值
    yAxis: [
      {
        axisLine: {
          show: false // 不显示 Y 轴轴线
        },
        axisTick: {
          show: false // 不显示 Y 轴刻度
        },
        axisLabel: {
          color: "#fff" // Y 轴标签颜色
        },
        type: 'category', // 类型为类目轴
        inverse: true, // 反转坐标轴
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"] // 类目数据
      },
      {
        show: true, // 显示 Y 轴
        data: [702, 350, 610, 793, 664], // 数值数据
        inverse: true, // 反转坐标轴
        axisLabel: { // Y 轴标签的样式配置
          textStyle: {
            fontSize: 12, // 标签字体大小
            color: "#fff" // 标签颜色
          }
        }
      }
    ],
    // 系列配置，包含两个系列，一个为柱状图，一个为边框
    series: [
      {
        name: '条', // 系列名称
        type: 'bar', // 图表类型为柱状图
        data: [70, 34, 60, 78, 69], // 数据数组
        yAxisIndex: 0, // 使用第一个 Y 轴
        barCategoryGap: 50, // 柱子类目间隔
        barWidth: 10, // 柱子宽度
        itemStyle: { // 柱子样式配置
          normal: {
            barBorderRadius: 20, // 柱子圆角大小
            color: function (params) { // 柱子颜色动态绑定
              return myColor[params.dataIndex];
            }
          }
        },
        label: { // 图形上的文本标签
          normal: {
            show: true, // 显示标签
            position: "inside", // 标签显示在柱子内部
            formatter: "{c}%" // 标签显示格式
          }
        }
      },
      {
        name: "框", // 系列名称
        type: "bar", // 图表类型为柱状图
        barCategoryGap: 50, // 柱子类目间隔
        barWidth: 15, // 柱子宽度
        itemStyle: { // 边框样式配置
          color: "none", // 柱子颜色设置为透明
          borderColor: "#00c1de", // 边框颜色
          borderWidth: 3, // 边框宽度
          barBorderRadius: 15 // 边框圆角大小
        },
        yAxisIndex: 1, // 使用第二个 Y 轴
        data: [100, 100, 100, 100, 100] // 数据数组，这里为固定值
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // 监听浏览器窗口大小变化事件，实现图表的自适应大小
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

效果图

  

4.2折线图 

折线图配置项参数说明
参数说明
title标题组件，用于定义图表的标题。它包含了 text（标题文本）、left（标题水平位置）、top（标题垂直位置）等属性
tooltip提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等
legend图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。
grid网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小
xAxisX 轴配置，通常用于显示类目数据。可以设置 type（轴类型）、data（类目数据数组）、axisLabel（轴标签样式）等
yAxisY 轴配置，通常用于显示数值数据。可以设置 type（轴类型）、name（轴名称）、axisLabel（轴标签样式）等
series系列列表，用于定义图表的数据内容。对于折线图，type 应设置为 'line'。data 属性用于定义系列中的数据点
color用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩折线图
animation动画配置，用于设置图表初始化或数据更新时的动画效果。可以设置 duration（动画时长）和 easing（缓动效果）
dataset数据集配置，用于定义图表的数据源。source 属性用于指定外部数据，transform 属性用于对数据进行处理
dataZoom数据区域缩放组件，用于放大和缩小图表的显示区域。可以设置 type（数据区域缩放的类型，如 'inside' 或 'slider'）
visualMap视觉映射组件，用于根据数据值大小对图形的颜色、大小等进行映射。可以设置 min、max（数据的最小值和最大值）和 orient（布局方向）等
lineStyle折线样式配置，可以设置折线的宽度、类型、颜色等。例如，{color: '#ff0000', width: 2} 表示红色的折线，宽度为 2
areaStyle填充样式配置，用于设置折线图下方的填充颜色和透明度。例如，{color: 'rgba(255, 0, 0, 0.3)'} 表示红色的填充，透明度为 0.3
markLine 或 markPoint用于在图表中标记特定的数据点或数据线。可以设置 data 属性来定义标记的内容和位置

可视化大屏折线图代码示例：

//折线图1
// 立即执行函数，用于封装折线图 1 的配置和初始化
(function () {
  var yearData = [
    {
      year: '2020',  // 定义年份为 2020 的数据对象
      data: [  // 两个数组分别代表两条折线的数据
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],  // 第一条折线的数据点
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]  // 第二条折线的数据点
      ]
    },
    {
      year: '2021',  // 定义年份为 2021 的数据对象
      data: [  // 两个数组分别代表两条折线的数据
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],  // 第一条折线的数据点
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]  // 第二条折线的数据点
      ]
    }
  ];
  var myChart = echarts.init(document.querySelector(".line .chart"));  // 实例化 ECharts 对象并绑定到指定的 DOM 元素
  var option = {
    color: ['#00f2f1', '#ed3f35'],  // 定义两条折线的颜色
    tooltip: {  // 提示框组件配置
      trigger: 'axis'  // 触发类型为坐标轴触发
    },
    legend: {  // 图例组件配置
      data: ['新增粉丝', '新增游客'],  // 图例的数据数组
      textStyle: {  // 图例文字的样式配置
        color: '#4c9bfd'  // 图例文字颜色
      },
      right: '10%'  // 图例距离右边 10%
    },
    grid: {  // 网格组件配置
      top: '20%',  // 网格顶部距离
      left: '3%',  // 网格左侧距离
      right: '4%',  // 网格右侧距离
      bottom: '3%',  // 网格底部距离
      show: true,  // 显示网格边框
      borderColor: '#012f4a',  // 网格边框颜色
      containLabel: true  // 网格包含标签
    },
    xAxis: {  // X 轴配置
      type: 'category',  // 类型为类目轴
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],  // 类目数据
      axisTick: {  // 坐标轴刻度的配置
        show: false  // 不显示刻度线
      },
      axisLabel: {  // 坐标轴标签的样式配置
        color: '#4c9bfd'  // 标签颜色
      },
      axisLine: {  // 坐标轴线的样式配置
        show: false  // 不显示轴线
      },
      boundaryGap: false  // 去除轴内间距
    },
    yAxis: {  // Y 轴配置
      type: 'value',  // 类型为数值轴
      axisTick: {  // 坐标轴刻度的配置
        show: false  // 不显示刻度
      },
      axisLabel: {  // 坐标轴标签的样式配置
        color: '#4c9bfd'  // 文字颜色
      },
      splitLine: {  // 分割线的样式配置
        lineStyle: {  // 分割线样式配置
          color: '#012f4a'  // 分割线颜色
        }
      }
    },
    series: [  // 系列配置
      {
        name: '新增粉丝',  // 系列名称
        type: 'line',  // 图表类型为折线图
        smooth: true,  // 折线平滑显示
        data: yearData[0].data[0]  // 使用 2020 年 '新增粉丝' 的数据
      },
      {
        name: '新增游客',  // 系列名称
        type: 'line',  // 图表类型为折线图
        smooth: true,  // 折线平滑显示
        data: yearData[0].data[1]  // 使用 2020 年 '新增游客' 的数据
      }
    ]
  };
  myChart.setOption(option);  // 使用刚指定的配置项和数据显示图表
  window.addEventListener("resize", function () {  // 监听浏览器窗口大小变化事件
    myChart.resize();  // 实现图表的自适应大小
  });

  // 点击切换效果
  $('.line h2').on('click', 'a', function () {  // 绑定点击事件到 '.line h2' 下的 'a' 元素    var index = $(this).index();  // 获取点击的元素索引
    option.series[0].data = yearData[index].data[0];  // 更新 '新增粉丝' 的数据
    option.series[1].data = yearData[index].data[1];  // 更新 '新增游客' 的数据
    // 需要重新更换数据
    myChart.setOption(option);  // 重新设置配置项和数据显示图表
  });
})();
// 折线图2 模块制作
(function () {
  // 初始化图表，将图表渲染在指定的DOM元素中
  var myChart = echarts.init(document.querySelector(".line2 .chart"));

  // 配置项
  var option = {
    // 鼠标悬浮提示框配置
    tooltip: {
      trigger: 'axis' // 提示框触发类型为坐标触发
    },
    // 图例组件配置，控制图例的显示和位置
    legend: {
      top: "0%", // 图例组件离容器顶部的距离
      textStyle: { // 图例文字的样式
        color: "rgba(255,255,255,.5)", // 图例文字的颜色
        fontSize: "12" // 图例文字的大小
      }
    },
    // 网格组件配置，控制图表的网格位置和大小
    grid: {
      left: "10", // 网格组件离容器左侧的距离
      top: "30", // 网格组件离容器顶部的距离
      right: "10", // 网格组件离容器右侧的距离
      bottom: "10", // 网格组件离容器底部的距离
      containLabel: true // grid 区域是否包含坐标轴的刻度标签
    },
    // X轴配置
    xAxis: [
      {
        type: 'category', // 类型为类目轴
        boundaryGap: false, // 坐标轴两边留白策略，false表示两边都不留白
        data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"], // 类目数据
        // X轴标签的样式配置
        axisLabel: {
          textStyle: { // 标签的文字样式
            color: "rgba(255,255,255,.6)", // 文本颜色
            fontSize: 12 // 文字大小
          }
        },
        // X轴线的样式配置
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)" // 坐标轴线的颜色
          }
        }
      }
    ],
    // Y轴配置
    yAxis: [
      {
        type: 'value', // 类型为数值轴
        axisTick: { show: false }, // 是否显示轴刻度线
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)" // 坐标轴线的颜色
          }
        },
        // Y轴标签的样式配置
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)", // 文本颜色
            fontSize: 12 // 文字大小
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)" // 分隔线的颜色
          }
        }
      }
    ],
    // 系列列表配置
    series: [
      {
        name: '点赞量', // 系列名称
        type: 'line', // 图表类型为折线图
        smooth: true, // 折线图是否平滑
        // 线条的样式配置
        lineStyle: {
          color: "#0184d5", // 线条颜色
          width: 2 // 线条宽度
        },
        // 填充区域的样式配置
        areaStyle: {
          // 渐变色的配置
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0, // 渐变色的起始偏移
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },
              {
                offset: 0.8, // 渐变色的结束偏移
                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)" // 阴影颜色
        },
        // 数据点的样式配置
        symbol: "circle", // 数据点形状
        symbolSize: 8, // 数据点大小
        itemStyle: { // 数据点的样式
          color: "#0184d5", // 数据点颜色
          borderColor: "rgba(221, 220, 107, .1)", // 边框颜色
          borderWidth: 12 // 边框宽度
        },
        // 控制数据点是否显示
        showSymbol: false,
        emphasis: {
          focus: 'series' // 高亮系列的高亮策略
        },
        data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40] // 数据值
      },
      {
        name: '转发量', // 系列名称
        type: 'line', // 图表类型为折线图
        smooth: true, // 折线图是否平滑
        // 线条的样式配置
        lineStyle: {
          normal: { // 正常状态下的线条样式
            color: "#00d887", // 线条颜色
            width: 2 // 线条宽度
          }
        },
        // 填充区域的样式配置
        areaStyle: {
          normal: { // 正常状态下的填充样式
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0, // 渐变色的起始偏移
                  color: "rgba(0, 216, 135, 0.4)" // 渐变色的起始颜色
                },
                {
                  offset: 0.8, // 渐变色的结束偏移
                  color: "rgba(0, 216, 135, 0.1)" // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)" // 阴影颜色
          }
        },
        // 数据点的样式配置
        symbol: "circle", // 数据点形状
        symbolSize: 5, // 数据点大小
        itemStyle: { // 数据点的样式
          color: "#00d887", // 数据点颜色
          borderColor: "rgba(221, 220, 107, .1)", // 边框颜色
          borderWidth: 12 // 边框宽度
        },
        // 控制数据点是否显示
        showSymbol: false,
        emphasis: {
          focus: 'series' // 高亮系列的高亮策略
        },
        data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20] // 数据值
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // 监听浏览器窗口大小变化事件，动态调整图表大小以适应屏幕
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

效果图

4.3饼图 

饼图配置项参数说明
参数说明
title

标题组件，用于定义图表的标题。它包含了 text（标题文本）、left（标题水平位置）、top（标题垂直位置）等属

tooltip提示框组件，用于展示图表中某个数据项的详细信息。可以设置 trigger（触发类型）、axisPointer（指示器配置）等
legend图例组件，展示了不同系列的标记、颜色和名字。可以通过 data 属性定义图例的数据数组。
grid网格组件，用于控制图表的网格，包括 left、right、top、bottom、width 和 height 等属性来控制网格的位置和大小
radius饼图的半径，可以是绝对值，也可以是相对于容器大小的百分比。可以设置为数组，分别表示内半径和外半径，用于创建环形图
center饼图的中心位置，可以是绝对值，也可以是百分比。通常设置为 ['50%', '50%'] 表示居中
series系列列表，用于定义图表的数据内容。对于饼图，type 应设置为 'pie'。data 属性用于定义系列中的数据点，通常包括 value（数据值）和 name（数据项名称）
color用于定义系列的颜色，可以是一个具体的颜色值，也可以是一个颜色数组，用于多彩柱状图
label标签的样式配置，包括 show（是否显示标签）、position（标签位置）、formatter（标签内容格式化器）等
labelLine标签直线的样式配置，用于连接标签和对应的扇形块
itemStyle扇形块的样式配置，可以设置 borderColor（扇形块边框颜色）、borderWidth（扇形块边框宽度）等
emphasis鼠标悬停或高亮时的系列样式，可以用来设置高亮时的标签、扇形块等的样式
roseType用于设置是否为南丁格尔图（半径不等的饼图），可以取值 'radius' 或 'area'
sort是否根据数据值进行排序，可以取值 'asc'（升序）、'desc'（降序）或 false（不排序）
hoverAnimation

鼠标悬停时的动画效果，可以设置为 true（开启）或 false（关闭）

可视化大屏饼图代码示例

// 饼形图1的模板制作
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));

  // 指定图表的配置项和数据
  var option = {
    color: [
      "#065aab",
      "#066eab",
      "#0682ab",
      "#0696ab",
      "#06a0ab",
    ],
    tooltip: {
      trigger: 'item' // 提示框的触发方式，这里设置为触发item
    },
    legend: {
      bottom: "0%", // 图例组件离容器底部的距离
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10, // 图例标记的图形高度
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"], // 图例的数据数组
      textStyle: {
        color: "rgba(255,255,255,.5)", // 图例文字颜色
        fontSize: "12" // 图例文字大小
      }
    },
    series: [
      {
        name: '年龄分布', // 系列名称
        type: 'pie', // 系列类型
        radius: ['40%', '60%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略
        label: {
          show: false, // 是否显示标签
          position: 'center' // 标签的位置
        },
        emphasis: {
          label: {
            show: true, // 高亮时是否显示标签
            fontSize: 12, // 高亮时标签字体大小
            fontWeight: 'bold' // 高亮时标签字体粗细
          }
        },
        labelLine: {
          show: false // 是否显示标签的视觉引导线
        },
        data: [ // 系列中的数据内容数组
          { value: 1, name: "0岁以下" },
          { value: 4, name: "20-29岁" },
          { value: 2, name: "30-39岁" },
          { value: 2, name: "40-49岁" },
          { value: 1, name: "50岁以上" }
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 监听浏览器窗口的变化，动态调整图表大小
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
//饼图2
// 立即执行函数，用于封装饼形图 2 的配置和初始化
(function () {
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));  // 实例化 ECharts 对象并绑定到指定的 DOM 元素，选择器为 .pie2 .chart

  var option = {
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],  // 定义饼图的颜色数组

    tooltip: {  // 提示框组件配置
      trigger: 'item',  // 触发类型为数据项图形触发
      formatter: '{a} <br/>{b} : {c} ({d}%)'  // 自定义提示框内容格式，显示系列名、数据项名称、值和百分比
    },

    legend: {  // 图例组件配置
      bottom: '0%',  // 图例组件离容器底部的距离为 0%
      itemWidth: 10,  // 图例标记的宽度为 10px
      itemHeight: 10,  // 图例标记的高度为 10px
      textStyle: {  // 图例文字的样式配置
        color: "rgba(255,255,255,.5)",  // 图例文字颜色，使用 rgba 定义透明度
        fontSize: "10"  // 图例文字大小为 10px
      }
    },

    series: [  // 系列列表配置
      {
        name: '地区分布',  // 系列名称，用于 tooltip 的显示
        type: 'pie',  // 指定系列类型为饼图
        radius: ['10%', '70%'],  // 饼图的内外半径，创建环形图效果
        center: ['50%', '50%'],  // 饼图的中心位置，设置为容器的中心
        roseType: 'radius',  // 玫瑰图的类型，设置为 'radius' 表示半径不等的饼图
        label: {  // 文本标签的样式配置
          fontSize: 10  // 标签文字的字体大小为 10px
        },
        labelLine: {  // 标签直线的样式配置
          length: 6,  // 标签直线的长度
          length2: 8  // 标签直线的第二段长度
        },
        data: [  // 系列中的数据内容数组
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
        ]
      }
    ]
  };

  myChart.setOption(option);  // 使用刚指定的配置项和数据显示图表
  window.addEventListener("resize", function () {  // 监听浏览器窗口大小变化事件
    myChart.resize();  // 实现图表的自适应大小
  });
})();

效果图

4.4模拟航线图

模拟航线图是在ECharts社区里面大佬已经写好的模板，直接用就可以了。

ECharts社区地址：makeapie echarts社区图表可视化案例 

模拟航线图模板地址：模拟航线 - category-work,geo地理坐标,legend,series-effectScatter,series-lines线图,title标题,tooltip提示框 - makeapie echarts社区图表可视化案例

效果图

反应慢两拍
关注
  • 25
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts数据可视化模板
03-07
基于echarts实现的销售统计数据可视化模板，好用的轮子，适用80%数据可视化场景
echarts 图表案例demo很多好看的demo
03-20
echarts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demo
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1251
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
数据可视化高级技术(Echarts)
m0_63181360的博客
04-01 2217
（一）数据可视化概念及Echarts基础知识。数据可视化的好处： 1.清晰有效地传达与沟通信息 2.更容易洞察隐藏在数据中的信息 3.信息记录
【echart】数据可视化
沉淀，积累、进步
03-26 856
常用echarts使用
一篇文章带你搞定所有Echarts可视化图表
qq_41765777的博客
12-05 2508
可视化图表种类如此之多，什么场景下应该用什么图表展示，是一个让人头秃的难题。本篇文章带你从ECharts安装使用到配置各种样式的ECharts图表。ECharts官网Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
echarts.min.js
07-26
基于layUI模块规范改造的 echarts组件，测试完美，可用直接应用到自己的项目中 使用方法 layui.config({ base: '../../../layuiadmin/lib/' //静态资源所在路径(使用时,根据自己的结构改动) }).extend({ echarts: '/extend/echarts.min' //主入口模块(名字同样根据自己的结构改动) }); layui.use(['form','table','echarts','util'],function(){ var echarts = layui.echarts; var $ = layui.jquery; var table = layui.table; console.log(echarts); var myCharts = echarts.init($(dom)); // 要绘制图表的盒子dom;
ECHART基本使用，折线图，柱状图，散点图，饼图，盒形图5分钟上手
知其白，守其黑；和其光，同其尘。
11-24 2万+
Echarts 是由百度团队打造的纯 JavaScript 的图表库，官网下载路径如下：http://echarts.baidu.com/download.htmlEcharts的特性：丰富的图表类型： 常用的有折线图，柱状图，散点图，饼图，盒形图，用于地理数据可视化的地图，热力图，线图等多个坐标系的支持 直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） 使
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
【图表】echart指南
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
06-23 1万+
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 可以流畅的运行在 PC 和移动
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
m0_63622279的博客
03-11 1万+
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
基于ECharts数据可视化大屏案例源码
12-03
在“基于ECharts数据可视化大屏案例源码”中，我们可以学习到以下几个关键知识点： 1. **ECharts基础使用**：了解如何引入ECharts库，设置图表容器，以及初始化图表。这包括配置项的设置，如`title`、`legend`、`...
基于JavaScript的echarts数据可视化大屏设计源码
03-28
**基于JavaScript的ECharts数据可视化大屏设计源码详解** 在大数据时代，数据可视化成为企业理解和展示业务数据的重要工具。ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用...
基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip
12-28
基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip 【功能特点】 页面内容适应各种比例的大屏。可以设置为自动等比例缩放(contain和cover两种模式)，也可以设置为拉伸(stretch模式)来铺满...
基于ECharts智慧社区数据可视化大屏源码
12-03
【ECharts智慧社区数据可视化大屏源码详解】 在当今数字化时代，智慧社区的建设已成为城市管理与服务的重要组成部分。利用大数据、云计算等技术，我们可以构建一个高效、智能、宜居的社区环境。ECharts，作为一款...
基于ECharts可视化大数据用户案例可视化大屏源码.rar
08-15
本案例主要聚焦于如何利用ECharts实现大数据的可视化展示，特别适用于构建可视化大屏，帮助用户更直观地理解海量数据。 一、ECharts基础知识 1. 安装与引入：ECharts可以通过npm或者直接在HTML中引入CDN链接进行...
echarts 基础图形使用
xin_yun_Jian的博客
10-27 403
1. 安装 npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div> 3. 引入 import * as echarts from "echarts"; 4. 柱状图 initBar() { var myCha...
echarts的一些基础笔记
asdfghjk11111111的博客
01-25 440
图表标题 title: { x: "left", // 水平安放位置，默认为左对齐，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: "top", // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位...
ECharts 数据可视化 上 基础篇
m0_55170432的博客
04-01 1080
1.0 数据可视化 数据可视化主要目的： 借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 1.1 数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： 通用报表 移动端图表 大屏可视化 图编辑&图分析 地理可视化 1.2 常见的数据可视化库（国内主流用 ECharts） D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源
echarts可视化大屏
07-27
对于echarts可视化大屏，你可以使用ECharts这个JavaScript的可视化库来创建各种各样的图表和数据可视化。ECharts提供了丰富的图表类型和交互功能，可以帮助你快速构建出漂亮、交互丰富的可视化大屏。 你可以通过以下步骤来创建echarts可视化大屏： 1. 引入ECharts库：首先，在你的HTML文件中引入ECharts库的JavaScript文件。 2. 创建容器：在HTML文件中创建一个容器元素，用于承载你的图表。 3. 初始化图表：使用JavaScript代码初始化一个ECharts实例，并将其绑定到容器元素上。 4. 设置图表配置项：通过配置项来定义你想要展示的图表类型、数据和样式等。 5. 渲染图表：调用实例的`setOption`方法，将配置项应用到图表上，并渲染出来。 6. 更新数据：如果你需要实时更新数据，可以通过修改配置项中的数据，然后再次调用`setOption`方法来更新图表。 7. 响应用户交互：ECharts提供了丰富的交互功能，你可以通过配置项来定义图表的交互行为，比如点击、悬停、缩放等。 通过以上步骤，你可以使用ECharts创建出各种类型的图表，如折线图、柱状图、饼图等，并将其组合成一个可视化大屏。你可以根据自己的需求，来展示和分析数据，提升数据的可视化效果和交互性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值