程序员开发实例大全宝库

网站首页 > 编程文章 正文

Echats框架简单入门使用（exposed框架）

zazugpt 2024-08-13 13:09:08 编程文章 34 ℃ 0 评论

ECharts是一个基于JavaScript的开源可视化库，可以用于创建交互式的图表和地图等数据可视化。它提供了丰富的图表类型和交互方式，可以轻松地创建漂亮且功能强大的数据可视化应用。

ECharts框架可以用于各种场景，包括数据分析、BI报表、数据监控等等。下面是一个使用ECharts创建一个简单的柱状图的代码示例：

一、柱状图代码

首先，需要在HTML文件中引入ECharts的JavaScript文件：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

接着，需要在HTML文件中添加一个用于显示图表的div元素：

<div id="chart" style="width: 600px;height:400px;"></div>

然后，可以在JavaScript中使用ECharts创建一个柱状图：

// 初始化echarts实例

var myChart = echarts.init(document.getElementById('chart'));

// 指定图表的配置项和数据

var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 5]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

以上代码会在div元素中显示一个简单的柱状图，其中横轴表示星期几，纵轴表示销量。

除了柱状图，ECharts还支持折线图、散点图、饼图、地图等多种图表类型，并且提供了丰富的交互方式，比如数据缩放、拖拽、数据视图等。

总之，ECharts是一个功能强大、易于使用的数据可视化框架，可以帮助开发者快速创建各种复杂的数据可视化应用。

二、饼状图

echarts是百度开源的一个基于JavaScript的可视化图表库，可以用来制作各种各样的图表和数据可视化展示，包括折线图、柱状图、饼状图、散点图、地图等等。使用echarts可以快速地将数据转换成可视化的图表展示，使得数据更加直观、易于理解。

下面是一个简单的使用echarts制作饼状图的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>echarts饼状图示例</title>
    <!-- 引入echarts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </head>
  <body>
    <!-- 用一个div来放置我们的饼状图 -->
    <div id="pie" style="width: 600px;height:400px;"></div>
    <script>
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('pie'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ]
          }
        ]
      };

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

在这个示例中，我们首先引入了echarts的JavaScript文件，然后创建了一个div来放置我们的饼状图。接着，我们使用echarts.init方法初始化了一个echarts实例，指定了我们要在哪个dom元素中显示图表。然后，我们定义了图表的配置项和数据，包括标题、数据提示框、图例、系列等等。最后，我们使用myChart.setOption方法将这些配置项和数据应用到我们的echarts实例中，从而显示出饼状图。

需要注意的是，这个示例中的数据是手动定义的，如果要显示真实的数据，需要通过ajax等方式从后端获取数据。同时，echarts还提供了许多其他的配置项和数据格式，可以满足不同的需求，具体使用方法可以参考echarts的官方文档。

三、折线图

Echarts是一个基于JavaScript的开源可视化库，由百度开发维护。它提供了丰富的可视化组件和图表类型，可以帮助开发者快速搭建并展示数据可视化。

使用Echarts需要先引入Echarts的脚本文件，可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

然后就可以创建一个图表实例，配置相关参数，最后将图表渲染到页面中。

下面以折线图为例，演示使用Echarts的过程。

首先，创建一个HTML文件，引入Echarts的脚本文件，并定义一个占位图表的div元素：

<!DOCTYPE html>
<html>
<head>
    <title>Echarts Line Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px;height: 600px;"></div>
</body>
</html>

然后，在JavaScript中创建一个图表实例，配置折线图的相关参数：

// 获取占位图表的div元素
var chart = document.getElementById('chart');

// 创建图表实例
var myChart = echarts.init(chart);

// 配置图表参数
var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20, 5]
    }]
};

// 将图表配置项设置到实例中
myChart.setOption(option);

最后，将图表渲染到HTML页面中：

myChart.setOption(option);

以上代码就可以创建一个简单的折线图，并将其渲染到页面中。

当然，Echarts还支持很多其他类型的图表，如柱状图、饼图、散点图等，实现方式类似，只需要调整不同的配置参数即可。

四、散点图

使用 ECharts，我们需要下载 ECharts 的源代码或使用 CDN 引入相关的 JavaScript 文件，然后在 HTML 页面中创建一个容器，通过 JavaScript 代码调用 ECharts 的相关 API 生成图表。

下面是一个使用 ECharts 生成散点图的示例代码：

首先，在 HTML 页面中创建一个容器：

复制代码<div id="scatter-chart" style="width: 600px;height:400px;"></div>

然后，在 JavaScript 中引入 ECharts 的相关库文件并初始化图表：

复制代码// 引入 ECharts 库
import echarts from 'echarts';

// 初始化散点图
const chart = echarts.init(document.getElementById('scatter-chart'));

// 指定图表的配置项和数据
const option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'scatter',
    data: [[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [5.0, 5.68]]
  }]
};

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

上面的代码中，我们首先通过 echarts.init 方法初始化了一个散点图实例，然后指定了图表的配置项和数据，最后使用 setOption 方法将配置项和数据应用到图表中。

在指定数据时，我们使用了一个二维数组，每个元素表示一个散点的坐标，例如 [10.0, 8.04] 表示一个坐标为 (10.0, 8.04) 的散点。

通过上面的示例代码，我们可以看到使用 ECharts 生成散点图非常简单。当然，实际使用时还需要深入了解 ECharts 的各种配置项和 API，以实现更加复杂的图表效果。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表