【数据可视化从入门到精通】ECharts 基本概念：系列-dataset-组件-定位-单双多坐标系④

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量471 收藏 4
点赞数 2
分类专栏： # 【数据可视化】 文章标签： echarts 数据可视化 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/120662302
版权

ECharts 基本概念: 系列

系列（series）是指：一组数值映射成对应的图

在这里插入图片描述

案例：多系列混合

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        xAxis: {
          data: ['一季度', '二季度', '三季度', '四季度']
        },
        yAxis: {},
        series: [{
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          data: [{
            name: '分类1', value: 50
          }, {
            name: '分类2', value: 60
          }, {
            name: '分类3', value: 55
          }, {
            name: '分类4', value: 70
          }]
        }, {
          type: 'line',
          data: [100, 112, 96, 123]
        }, {
          type: 'bar',
          data: [79, 81, 88, 72]
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

ECharts 4.0 新特性：dataset

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性能将逻辑和数据分离，带来更好的复用，并易于理解。

在这里插入图片描述

案例：dataset 移植

在这里插入图片描述

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        dataset: {
          source: [
            ['一季度', 79, 100, '分类1', 50],
            ['二季度', 81, 112, '分类2', 60],
            ['三季度', 88, 96, '分类3', 55],
            ['四季度', 72, 123, '分类4', 70],
          ]
        },
        series: [{
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          encode: { itemName: 3, value: 4 }
        }, {
          type: 'line',
          encode: { x: 0, y: 2 }
        }, {
          type: 'bar',
          encode: { x: 0, y: 1 }
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

ECharts 基本概念: 组件

ECharts 中除了绘图之外其他部分，都可抽象为 「组件」。例如，ECharts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）…

在这里插入图片描述

案例：各种组件

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        title: { // 标题和副标题
          text: '数据可视化',
          subtext: '数据可视化体系课'
        },
        xAxis: { //x轴字段控制
          type: 'category'
        },
        yAxis: {},
        legend: {
          data: [{
            name: '分类',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
              color: 'red'
            }
          }, '折线图', '柱状图'],
          left: 100
        },
        toolbox: { // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [{ // dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
          show: true,
          start: 30,
          end: 70
        }],
        dataset: { // 多系列数组组合，数据集方便数据管理，复用
          source: [
            ['一季度', 79, 100, '分类1', 50],
            ['二季度', 81, 112, '分类2', 60],
            ['三季度', 88, 96, '分类3', 55],
            ['四季度', 72, 123, '分类4', 70],
          ]
        },
        grid: [{
          left: 50,
          top: 70
        }],
        series: [{ //系列数据源
          name: '分类',
          type: 'pie',
          center: ['65%', 60],
          radius: 35,
          encode: { itemName: 3, value: 4 }
        }, {
          name: '折线图',
          type: 'line',
          encode: { x: 0, y: 2 }
        }, {
          name: '柱状图',
          type: 'bar',
          encode: { x: 0, y: 1 }
        }]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

ECharts 基本概念：定位

大多数组件都提供了定位属性，我们可以采用类似 CSS absolute 的定位属性来控制组件的位置，下面这个案例可以通过修改 grid
组件定位来控制图表的位置
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      top: <input type="text" id="top">
      left: <input type="text" id="left">
      right: <input type="text" id="right">
      bottom: <input type="text" id="bottom">
    </div>
    <div id="chart"></div>
    <script>
      let _left = 0
      let _top = 0
      let _bottom = 0
      let _right = 0
      const topInput = document.getElementById('top')
      const leftInput = document.getElementById('left')
      const bottomInput = document.getElementById('bottom')
      const rightInput = document.getElementById('right')
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      function addInputEvent(dom, key) {
        dom.addEventListener('input', function(e) {
          value = e.target.value
          switch(key) {
            case 'top':
              _top = value
              break
            case 'left':
              _left = value
              break
            case 'bottom':
              _bottom = value
              break
            case 'right':
              _right = value
              break
          }
          render()
        })
      }
      function render() {
        const option = {
          title: {
            text: '数据可视化',
            subtext: '慕课网数据可视化体系课'
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          dataset: {
            source: [
              ['一季度', 79, 100, '分类1', 50],
              ['二季度', 81, 112, '分类2', 60],
              ['三季度', 88, 96, '分类3', 55],
              ['四季度', 72, 123, '分类4', 70],
            ]
          },
          grid: [{
            left: _left,
            top: _top,
            right: _right,
            bottom: _bottom
          }],
          series: [{
            name: '折线图',
            type: 'line',
            encode: { x: 0, y: 2 }
          }]
        }
        chart.setOption(option)
      }
      window.onload = function() {
        topInput.value = _top
        leftInput.value = _left
        bottomInput.value = _bottom
        rightInput.value = _right
        addInputEvent(topInput, 'top')
        addInputEvent(leftInput, 'left')
        addInputEvent(bottomInput, 'bottom')
        addInputEvent(rightInput, 'right')
        render()
      }
    </script>
  </body>
</html>

ECharts 基本概念：坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 ECharts中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

案例：散点图

我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），ECharts
会为它们创建 grid 并进行关联：

在这里插入图片描述
在这里插入图片描述

案例：双坐标系

再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用
yAxisIndex 来指定它自己使用的是哪个 yAxis：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        legend: {},
        tooltip: {},
        xAxis: {
          type: 'category'
        },
        yAxis: [{
          min: 0,
          max: 100
        }, {
          min: 0,
          max: 100
        }],
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1]
          ]
        },
        series: [
          { type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
          { type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
        ]
      }
      chart.setOption(option)
    </script>
  </body>
</html>

案例：多坐标系

再来看下图，一个 ECharts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用
xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      const option = {
        legend: {},
        tooltip: {},
        xAxis: [{
          type: 'category',
          gridIndex: 0
        }, {
          type: 'category',
          gridIndex: 1
        }],
        yAxis: [{
          gridIndex: 0
        }, {
          gridIndex: 1
        }],
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
          ]
        },
        grid: [{
          bottom: '55%'
        }, {
          top: '55%'
        }],
        series: [
          // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
        ]
      }
      chart.setOption(option)
    </script>
  </body>
</html>
不停喝水
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts实现多维坐标轴
09-17
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
echarts双Y轴对齐；echarts堆叠柱状图；echarts数据集dataset结构；
i_am_a_div的博客
04-24 4629
echarts双Y轴对齐；echarts堆叠柱状图；echarts数据集dataset结构；
echarts 高级应用
aoshisen的博客
08-27 2987
文章目录多坐标轴异步数据数据集数据集与图表的映射方式数据集的行列映射数据集的维度映射dimensions 中元素的书写方式数据集的编码映射encode 编码映射的使用方法区域缩放视觉映射 多坐标轴 多坐标轴的常见应用就是一个图表有两个y 轴。 多坐标轴的设置方法： 在yAxis 中写入两组数据，让两组数据的行数保持一致 在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联 异步数据 数据的更新有两种思路： 请求到数据后，setOption() 先setOption(
Echarts多坐标系 多张图表
唐都恩了的博客
11-22 1128
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Echarts 组件</title> <script src="https://cdn.jsdeliv..
Echarts坐标系之多个坐标系
buhaisao321的博客
03-20 1581
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
echarts（五）高级篇（多坐标轴、复杂多坐标轴）
陈小陈的博客
01-19 4001
高级篇 多坐标轴 多坐标轴的常见应用就是一个图表有两个y 轴。 /*基于准备好的dom，初始化echarts实例*/ const myChart = echarts.init(document.getElementById('main')); /*指定图表的配置项和数据*/ const option = { /*图例*/ legend:{data:['学习人数','就业人数']}, /*提示*/ tooltip:{}, /*x 轴*/ xA
ECharts数据集（ dataset ）的行或列映射为系列（series）
冲出仁川，走出马德里，故事还会再继续
12-09 1627
把数据集（ dataset ）的行或列映射为系列（series） 用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值： ’column’: 默认值。系列被安放到 dataset 的列上面。 ‘row’: 系列被安放到 dataset 的行上面。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
新冠病毒可视化-novel-corona-virus-2019-dataset.zip
07-13
新冠病毒可视化-novel-corona-virus-2019-dataset.zip新冠病毒可视化-novel-corona-virus-2019-dataset.zip新冠病毒可视化-novel-corona-virus-2019-dataset.zip新冠病毒可视化-novel-corona-virus-2019-dataset.zip...
waymo-open-dataset:Waymo打开数据集
03-26
Waymo打开数据集Waymo Open数据集于2019年8月首次推出，其感知数据集包括高分辨率传感器数据和1,950个细分的标签。 我们已公开发布Waymo开放数据集，以帮助研究社区在机器感知和自动驾驶技术方面取得进步。2021年3月...
中文实体关系抽取数据集 Chinese-Literature-NER-RE-Dataset
10-05
基于几个可用的NER和RE数据集定义了7个实体标签和9个关系标签。实体(Entity)：每个实体都由带有多个属性的T标签标识。关系(Relation):每个关系由R标签标识，该标签可以具有多个属性。
lapa-dataset:大规模的人脸解析数据集（AAAI2020）
05-06
LaPa数据集用于人脸解析介绍我们开发的像素级分析脸标注一个高效率的框架，构建引导面霸的面解析一个新的大型拉ndmark rsing数据集（拉帕）。 它由超过22,000张面部图像组成，这些面部图像在表情，姿势和遮挡方面都...
NGSIM-US-101-trajectory-dataset-smoothing:使用Savitzky-Golay滤波器平滑NGSIM US-101轨迹数据集
05-24
NGSIM US-101数据集平滑 描述 NGSIM US-101数据集平滑功能使用提供了众所周知的轨迹NGSIM US-101数据集的低噪点和平滑版本。 平滑过程分为两个步骤，该过程包括：首先，平滑X和Y值，然后相对于平滑的X，Y值重新计算...
产品经理眼里的数据可视化产品定位
chuantianyan3100的博客
10-30 177
一听产品经理这四个字，想必最头疼的该是程序员了。《还珠格格》里有句话“还记得大明湖畔的夏雨荷吗？”，小编要说的是“还记得中国平安的那个产品经理和APP程序员吗？”，对程序员来讲，产品经理绝对是黑科技般的存在-无解。 其实也怨不得产品经理，如果没有产品经理天马行空的想法话，就没有现如今那些...
echarts使用多个dataset，一个图上显示多中
曹先森的博客
07-14 360
echarts使用多个dataset，一个图上显示多中
Echarts经纬度坐标实现地图定位
热门推荐
liwan09的博客
11-14 1万+
一、Echarts下载 echarts官网：http://echarts.apache.org/zh/index.html echarts下载 https://echarts.apache.org/zh/download.html 我是从github上下载的zip压缩包 下载后，解压，然后将dist文件夹中的内容和map文件夹中的文件放在一个文件夹中，引入到项目中 二、功能实现 项目中的引用 页面代码实现 页面中添加js引用 注：如果需要世界地图则引用world.js，我..
百度ECharts 3.0 多坐标轴统计图一般配置详解（实例）
JathamJ的博客
10-03 1万+
ECharts 是百度出品的jquery图表插件。相对于Chartist，拥有更加强大的功能，以及更加详细的文档（ECharts的文档形式非常优秀，简明易懂）。ECharts支持的图表种类非常多，同时兼容性也十分优良，故而在网站建设动态统计图表时，是一个非常优秀的选择。配置首先，配置echart首先需要在前台模板建立一个div容器，同时必须给容器指定一个宽度或高度，因而在响应式页面中发挥并不出色。<
echarts多坐标系图表联动示例
天色还不晚的博客
06-09 1257
多个echarts图表联动示例 function drawchart(timearr, dataarr) { // 基于准备好的dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main')); var myChart2 = echarts.init(document.getElementById('main2')); // 指定图表的配置项和数据 var option1 =
关于echarts直角坐标系中多坐标轴的实现与效果优化
陈小陈的博客
01-24 339
多坐标轴 你是否在处理多坐标轴时，纵轴数据总是感觉不完美，视觉效果还不好呢？ 我们看代码+注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多坐标轴</title> <style> #main{ margin: 20px; width:
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 375
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
argparse.ArgumentError: argument --dataset: conflicting option string: --dataset
06-02
例如，如果你在定义命令行参数时，使用了"-d"和"--dataset"两个选项字符串来表示同一个参数，就会出现这个错误。 要解决这个问题，只需要检查一下是否在程序的不同部分中重复定义了相同的选项字符串即可。如果确实...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值