VUE echarts 教程二 折线堆叠图

news2025/1/4 0:29:39

VUE echarts 教程一 折线图 

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

myChart.setOption(option);

 拆线面积图

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

myChart.setOption(option);

 堆叠渐变图

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: 'Gradient Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};
myChart.setOption(option);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2268883.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

linux安装nginxs报错：openssl not found

linux安装nginxs报错：openssl not found

系统： linux 版本：centOS7 nginx版本：nginx-1.20.2 linux安装nginx时 执行下面命令时报错： ./configure --with-http_stub_status_module --with-http_ssl_module --prefix/usr/local/nginxchecking for OpenSSL library ... not …
阅读更多...
项目基本配置

项目基本配置

总说 本节主要记录修改配置文件、连接mysql数据库、git连接 一、配置文件的修改 1.1 配置pom.xml 由于我们要连接mysql数据库，需要在pom.xml中添加相关依赖 这里给出一个网站，可以找到各种依赖Maven Repository: Search/Browse/Explore 添加一个my…
阅读更多...
一个最简单的ios程序(object_c)的编写

一个最简单的ios程序(object_c)的编写

前言 如何在苹果系统MacOS创建一个简单的ios（iphone）程序，貌似非常的简单。但是，作为习惯了Windows开发的程序员来说，有时候还觉得有点麻烦，至少开始有点很不习惯。 本博文试着把这个过程展现一下&#xff…
阅读更多...
Learning Multi-Scale Photo Exposure Correction

Learning Multi-Scale Photo Exposure Correction

Abstract 用错误的曝光捕捉照片仍然是相机成像的主要错误来源。曝光问题可分为以下两类:(i)曝光过度，即相机曝光时间过长，导致图像区域明亮和褪色;(ii)曝光不足，即曝光时间过短，导致图像区域变暗。曝光不足和曝光过度都会大大降低…
阅读更多...
宝塔-firefox(Docker应用)-构建自己的Web浏览器

宝塔-firefox(Docker应用)-构建自己的Web浏览器

安装基础软件 宝塔中安装firefox(Docker应用) 。宝塔中需要先安装docker及docker-composefirefox配置安装 点击firefox应用，选择【安装配置】点击右边绿色按钮，进行安装，这一步等待docker-compose根据你的配置初始化docker应用 等待安装 …
阅读更多...
【深度学习】时间序列表示方法

【深度学习】时间序列表示方法

自然界除了2D的图片数据之外，还有语音、文字，这些数据都有时间的先后顺序的。对于2D的图像的数据，可以用RGB值来表示像素的色彩度。语音可以用信号幅度值来表示，而Pytorch没有自带String支持，在表示文字之前需要进行Em…
阅读更多...
使用 Navicat 官方免费版来实现从 DAT 文件填充 MySQL 8 表

使用 Navicat 官方免费版来实现从 DAT 文件填充 MySQL 8 表

在异构存储库之间迁移数据（即源数据库和目标数据库来自不同供应商的不同数据库管理系统）会遇到一些挑战。在某些情况下，可以同时连接两个数据库。但有时根本无法实现。面对这样的困境，数据库从业者别无选择，只能从转储…
阅读更多...
【CSS in Depth 2 精译_093】16.2：CSS 变换在动效中的应用（上）—— 图标的放大和过渡效果的设置

【CSS in Depth 2 精译_093】16.2：CSS 变换在动效中的应用（上）—— 图标的放大和过渡效果的设置

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 ✔️ 16.2.1 放大图…
阅读更多...
Linux 信号集与信号掩码

Linux 信号集与信号掩码

目录 一、引言 二、信号集是什么 三、信号集关键函数 1.信号集的创建与初始化 2.信号的添加与删除 3.信号集的阻塞与解除阻塞 四、信号集实际应用场景 五、信号掩码的作用 六、信号掩码相关函数 1.sigprocmask 函数 2.sigemptyset 和 sigfillset 函数 七、信号掩码注…
阅读更多...
CPT203 Software Engineering 软件工程 Pt.5 软件测试（中英双语）

CPT203 Software Engineering 软件工程 Pt.5 软件测试（中英双语）

文章目录 8. 软件测试8.1 Testing（测试）8.1.1 A note of testing under the V & A framework8.1.2 The Basics8.1.3 The Goals8.1.4 The Stages 8.2 Developing testing（开发测试）8.2.1 Unit testing（单元测试&…
阅读更多...
微信小程序中遇到过的问题

微信小程序中遇到过的问题

记录微信小程序中遇到的问题（持续更新ing） 问题描述：1. WXML中无法直接调用JavaScript方法。2. css中无法直接引用背景图片。3. 关于右上角胶囊按钮。4. 数据绑定问题。5. 事件处理问题。6. 关于movable-view组件的问题7. 关于设置宽度后设置…
阅读更多...
【C++】B2084 质因数分解

【C++】B2084 质因数分解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯 题目描述：质因数分解输入格式输出格式输入输出样例： 💯 问题解析1. 质数的定义2. 题目特点3. 约束范围4. 问题分解 💯 解题…
阅读更多...
Unity中列表List使用出类似字典Dictionary的感觉

Unity中列表List使用出类似字典Dictionary的感觉

首先为什么会有这个标题？ 因为字典很好用，只需要键就能拿到值，这种感觉是真的爽，新手最喜欢用了，遇事不决就字典，但是也有不好的地方，字典的内存开销比列表List要大，遍历也是List占…
阅读更多...
分布式项目___某污水处理项目

分布式项目___某污水处理项目

一.分布式项目___污水处理项目 项目地址:https://gitee.com/yanyigege/collaborative-water-springboot.git ​ 1.项目背景 总公司在全国各地有处理污水的项目部,各项目部处理自己的污水,总部需要监控各地分项目部每天处理污水的原料用量,掌握各分部的污水处理情况 ​ 2.功…
阅读更多...
WebRTC：实现浏览器与移动应用的实时通信

WebRTC：实现浏览器与移动应用的实时通信

1.技术简介 （Web Real-Time）是一种开放式实时通信技术，旨在使浏览器和移动应用程序通过简单的API即可实现实时音频、视频和数据传输，而无需安装插件或额外软件。它支持网络应用中的点对点通信，例如视频聊天、语音通话…
阅读更多...
小程序基础 —— 07 创建小程序项目

小程序基础 —— 07 创建小程序项目

创建小程序项目 打开微信开发者工具，左侧选择小程序，点击 号即可新建项目： 在弹出的新页面，填写项目信息（后端服务选择不使用云服务，开发模式为小程序，模板选择为不使用模板）&…
阅读更多...
数据结构之线性表之链表(附加一个考研题)

数据结构之线性表之链表(附加一个考研题)

链表的定义 链表的结构： 单链表-初始化 代码实现： 单链表-头插法 代码实现： 这里我给大家分析一下 我们每创建一个新的节点都要插在头节点的后面，我们一定要注意顺序 一定要先让新节点指向头节点指向的下一个节点，…
阅读更多...
RocketMQ（二）RocketMQ实战

RocketMQ（二）RocketMQ实战

文章目录 一、RocketMQ实战1.1 批量消息发送1.2 消息发送队列自选择1.3 事务消息1.4 SpringCloud集成RocketMQ 二、最佳实践2.1 生产者2.1.1 发送消息注意事项2.1.2 消息发送失败处理方式 2.2 消费者2.2.1 消费过程幂等2.2.2 消费打印日志 2.3 Broker 三、相关问题3.1 为什么要…
阅读更多...
Vue router router-link router-view keep-alive

Vue router router-link router-view keep-alive

Vue router router-link router-view keep-alive keep-alive 1. /:id 2 ?id
阅读更多...
掌握 PostgreSQL 的 psql 命令行工具

掌握 PostgreSQL 的 psql 命令行工具

title: 掌握 PostgreSQL 的 psql 命令行工具 date: 2024/12/30 updated: 2024/12/30 author: cmdragon excerpt: psql 是 PostgreSQL 关系数据库管理系统的交互式命令行工具，是数据库管理员和开发人员进行数据库管理和操作的主要接口。熟练使用 psql 工具，不仅能够提高对 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023