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

原创 已于 2024-04-03 17:55:27 修改 · 3.2w 阅读 · 423 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

于 2024-04-03 16:23:48 首次发布
本文介绍了ECharts数据可视化库，它由百度开源，有丰富图表类型、灵活配置项等特点。讲解了官网使用方法，包括快速入门、示例和配置项手册。还详细说明了使用ECharts的步骤，以及柱状图、折线图、饼图和模拟航线图等常用图的配置项参数。
该文章已生成可运行项目，

目录

一、关于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社区图表可视化案例

效果图

本文章已经生成可运行项目
Echart常用折线图
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
05-24 1万+
1. 渐变色折线图 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import { fontChart } from "@/utils/echartPxToRem"; import * as echarts from "echarts"; export default { data() { ret.
基于ECharts数据可视化大屏案例源码
12-03
基于ECharts数据可视化大屏案例源码
基于ECharts智慧社区数据可视化大屏源码
12-03
基于ECharts智慧社区数据可视化大屏源码
数据可视化 ECharts
最新发布
2301_81157366的博客
10-10 996
数据可视化的核心是将冰冷的数字转化为直观图形，揭示数据规律，广泛应用于报表、大屏展示、业务监控等场景。可视化库核心特点上手难度适用场景开源协议 / 商用情况ECharts百度出品，基于 Canvas，图表类型丰富（含地图、水球图），配置化开发，文档完善低企业级报表、大屏展示、常规图表（柱状图 / 折线图 / 饼图等）Apache-2.0 协议，免费商用D3.js底层可视化库，灵活性极高，可自定义任意图形高复杂自定义可视化（如学术图表、特殊交互图形）BSD 协议，免费商用。
ECharts 数据可视化 上 基础篇
m0_55170432的博客
04-01 1523
1.0 数据可视化 数据可视化主要目的： 借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 1.1 数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： 通用报表 移动端图表 大屏可视化 图编辑&图分析 地理可视化 1.2 常见的数据可视化库（国内主流用 ECharts） D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源
echarts图表库的展示
m0_74242675的博客
05-26 6976
ECharts 是一个强大的，使用 JavaScript 编写的开源数据可视化库，由百度开发和维护。它能够帮助开发者在网页上轻松创建出丰富、交互式的图表，广泛应用于各种数据展示场景，包括但不限于Web应用、仪表盘、业务报表等。ECharts的特点和功能包括但不限于以下几点：如折线图、柱状图、散点图、饼图、雷达图、热力图、漏斗图、仪表盘、地图、关系图、旭日图、平行坐标等，几乎涵盖了数据可视化领域的所有基本需求。ECharts擅长处理多维数据，能够将复杂的数据集以清晰直观的方式展现出来，非常适合进行深度数据分析
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
m0_63622279的博客
03-11 1万+
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
ECharts实现数据可视化入门教程（超详细）
热门推荐
『愚』的博客
02-20 22万+
ECharts实现数据可视化入门教程（超详细）ECharts介绍ECharts入门教程第一步：下载并引入scharts.js文件第二步：编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置（常用的）案例讲解 ECharts介绍 官网链接：Apache ECharts ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢
ECharts数据可视化
qq_63806300的博客
06-23 6233
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
可视化大屏-echarts可视化教程
09-29
《可视化大屏-echarts可视化教程》正是针对想要学习ECharts并应用于可视化大屏开发的学习者而编写的教程。 首先，教程会从基础入手，带领读者了解ECharts的基本概念和基本使用方法。通过对ECharts的配置项进行介绍...
精选资源
基于JavaScript的echarts数据可视化大屏设计源码
03-28
**基于JavaScript的ECharts数据可视化大屏设计源码详解** 在大数据时代，数据可视化成为企业理解和展示业务数据的重要工具。ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用...
Echarts入门教程
11-01
改资源主要是介绍了如何使用Echarts，来源于Echarts的核心开发者林峰。
精选资源
ECharts 数据可视化大屏项目学习
04-28
ECharts 数据可视化大屏项目学习是一项重要的技能，它结合了数据处理、前端开发与交互设计，使得复杂的业务数据能够以直观、生动的方式呈现出来。在实际应用中，数据可视化大屏通常用于监控中心、决策支持系统或者...
Echarts数据可视化教程(超详细，持续更新中....)
stc_ljc的博客
01-04 13万+
Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。持续更新中！！！
Echarts 数据可视化
Floatwor青舟的博客
12-22 1335
目录1. Echarts 简介2. Echarts快速上手3. 柱状图3.1 柱状图基本使用3.2 其他常见效果 1. Echarts 简介 Echarts 缩写来自 Enterprise Charts（商业级数据图表），是百度的一个开源的数据可视化工具 Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形 Echarts 能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器 Echarts 是一个纯 JavaScript 的图表库，底层依赖轻量级的 Ca
echarts实现数据可视化
m0_45052521的博客
11-18 2万+
目录 1.数据可视化前言 1.1什么是数据可视化 1.2数据可视化的好处 1.3数据可视化的实现方式 2.ECharts的基本使用 2.1ECharts的快速上手 2.2相关配置 3.ECharts常用图表 3.1柱状图 3.2折线图 3.3堆叠图 3.4散点图 3.5直角坐标系常见配置 1.数据可视化前言 1.1什么是数据可视化 数据可视化，简单来说就是把数据以更加直观的方式进行呈现。 例如一组数据 我们可以用图表的形式形式呈现出来 1.2数据可视化的..
Echarts数据可视化
weixin_46341513的博客
03-06 693
Echarts数据可视化 数据可视化 目的：借助于图像化手段，清晰有效地传达与沟通信息 场景： 通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化 常见数据可视化 Echarts.js 开源JavaScript数据可视化库 Echarts简介 是一个使用JavaScript实现的开源可视化库 Echarts官网地址 基本使用 五步曲 1.下载并引入echart.js文件 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置项和数据 5.将配置项给echarts实
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值