vue3使用echarts简单教程~~概念篇

news2025/1/21 12:12:18

没写过  写着玩玩  不足的地方还望小伙伴补充~~

概念篇

文档奉上：数据集 - 概念篇 - 使用手册 - Apache EChartsicon-default.png?t=N7T8https://echarts.apache.org/handbook/zh/concepts/dataset

<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>
<script>


import * as echarts from "echarts";
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));

// 绘制图表
myChart.setOption({
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
});
</script>
 遇到的报错问题 

  我觉得应该是在加载的时候 dom还没有加载出来 所以我决定 给他写进生命周期里边 就有了如下代码

<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));

  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

’看下效果图

展示不全   因为我这个显示得宽度是375   而我给定了宽度是600 这种情况怎么让他自适应宽度呢

发现一段代码

响应容器大小的变化

监听图表容器的大小并改变图表大小

加上试试

<template>
  <div id="main" style="height: 400px"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  window.addEventListener("resize", function () {
    myChart.resize();
  });
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

加上后别忘记删除你的行内给的宽度哈  不然还是不生效的 果然  加完这段代码后 我的效果图宽度可以自适应了 看下效果图吧~

为图表设置特定的大小

除了直接调用 resize() 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。

myChart.resize({
  width: 800,
  height: 400
});

样式

颜色主题（深色主题）

   看下效果图吧

数据集

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

<template>
  <div id="main" style="height: 400px"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"), "dark");
  window.addEventListener("resize", function () {
    myChart.resize();
  });
  // 绘制图表
  myChart.setOption({
    legend: {},
    tooltip: {},
    dataset: {
      // 提供一份数据。
      source: [
        ["product", "2015", "2016", "2017"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
        ["Walnut Brownie", 72.4, 53.9, 39.1],
      ],
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: { type: "category" },
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  });
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

看下效果图吧

坐标轴

上代码

<template>
  <div id="main" style="height: 400px"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"), "dark");
  window.addEventListener("resize", function () {
    myChart.resize();
  });
  // 绘制图表
  myChart.setOption({
    //  提示框，可以全局设置，也可设置在坐标系或系列数据中
    tooltip: {
      //触发类型，'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    // /图例，图中的标记(symbol)，通常位于右上方，颜色和名字。可以通过点击图例控制哪些系列不显示。
    legend: {},
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true, //刻度是否位于标签中间
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "降水量",
        min: 0,
        max: 250,
        position: "right",
        axisLabel: {
          formatter: "{value} ml",
        },
      },
      {
        type: "value",
        name: "温度",
        min: 0,
        max: 25,
        position: "left",
        axisLabel: {
          formatter: "{value} °C",
        },
      },
    ],
    series: [
      {
        name: "降水量",
        type: "bar",
        yAxisIndex: 0,
        data: [
          6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3,
        ],
      },
      {
        name: "温度",
        type: "line",
        smooth: true,
        yAxisIndex: 1,
        data: [
          6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2,
        ],
      },
    ],
    title: {
      text: "ECharts 入门示例",
    },
  });
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

 看下效果图吧

代码有些注释我已经写上了  具体还得看文档

图例

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。

option = {
  legend: {
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

看下效果图吧

 

 事件与行为

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

 

我点击了羊毛衫  就log出了羊毛衫

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

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

相关文章

使用海康威视的SDK，利用WPF设计一个网络摄像头的显示控制程序（上位机）

使用海康威视的SDK，利用WPF设计一个网络摄像头的显示控制程序（上位机）

目录 一、下载海康威视的SDK 1.1 关于SDK 1.2 关于API 1.3 关于DLL 1.4 下载海康威视的SDK 1.5 关于网络高清摄像机 二、对下载的SDK进行调试 三、利用Visual Studio打开项目的解决方案 3.1 Visual Studio 2022下载 3.2 关于句柄 四、打开WPF进行ui页面设计 4.1 关于…
阅读更多...
Idea连接GitLab的过程以及创建在gitlab中创建用户和群组

Idea连接GitLab的过程以及创建在gitlab中创建用户和群组

上期讲述了如何部署GitLab以及修复bug&#xff0c;这期我们讲述&#xff0c;如何连接idea。 首先安装gitlab插件 下载安装idea上并重启 配置ssh免密登录 使用管理员打开命令行输入&#xff1a;ssh-keygen -t rsa -C xxxaaa.com 到用户目录下.ssh查看id_rsa.pub文件 打开复制…
阅读更多...
【机器学习】第7章 集成学习（小重点，混之前章节出题但小题）

【机器学习】第7章 集成学习（小重点，混之前章节出题但小题）

一、概念 1.集成学习&#xff0c;顾名思义&#xff0c;不是一个玩意&#xff0c;而是一堆玩意混合到一块。 &#xff08;1&#xff09;基本思想是先 生成一定数量基学习器&#xff0c;再采用集成策略 将这堆基学习器的预测结果组合起来&#xff0c;从而形成最终结论。 &#x…
阅读更多...
【LinkedList与链表】

【LinkedList与链表】

目录 1&#xff0c;ArrayList的缺陷 2&#xff0c;链表 2.1 链表的概念及结构 2.2 链表的实现 2.2.1 无头单向非循环链表实现 3&#xff0c;LinkedList的模拟实现 3.1 无头双向链表实现 4&#xff0c;LinkedList的使用 4.1 什么是LinkedList 4.2 LinkedList的使用 5…
阅读更多...
无需付费，没有广告，驱动人生海外版本DriverTalent_Pro_v8.0.0.2单文件

无需付费，没有广告，驱动人生海外版本DriverTalent_Pro_v8.0.0.2单文件

如果你是一位电脑爱好者&#xff0c;你一定知道驱动程序的重要性。驱动程序是连接电脑硬件和操作系统的桥梁&#xff0c;它们可以让你的电脑运行更流畅&#xff0c;更稳定&#xff0c;更高效。但是&#xff0c;驱动程序也会随着时间的推移而过时&#xff0c;或者与新的系统不兼…
阅读更多...
iview 组件里面的（任何一个月）整月日期全部选中_iview时间轴选中有历史记录日期

iview 组件里面的（任何一个月）整月日期全部选中_iview时间轴选中有历史记录日期

iview 组件里面的整月日期全部选中&#xff1a; ①&#xff1a;第一种是当前月的日期全部选中&#xff1a; 先上效果图&#xff1a;当前月分 获取到的值&#xff1a; 当前月的方法&#xff1a; // getDateStr() {// var curDate new Date();// var curMonth curDate.ge…
阅读更多...
C# 利用XejeN框架源码，编写一个在 Winform 界面上的语法高亮的编辑器，使用 Monaco 编辑器

C# 利用XejeN框架源码，编写一个在 Winform 界面上的语法高亮的编辑器，使用 Monaco 编辑器

析锦基于Monaco技术实现的Winform语法高亮编辑器 winform中&#xff0c;我们有时需要高亮显示基于某种语言的语法编辑器。 目前比较强大且UI现代化的&#xff0c;无疑是宇宙最强IDE的兄弟&#xff1a;VS Code。 类似 VS Code 的体验&#xff0c;可以考虑使用 Monaco Editor&a…
阅读更多...
每日一题——冒泡排序

每日一题——冒泡排序

C语言——冒泡排序 冒泡排序练习 前言&#xff1a;CSDN的小伙伴们&#xff0c;大家好&#xff01;今天我来给大家分享一种解题思想——冒泡排序。 冒泡排序 冒泡法的核心思想&#xff1a;两两相邻的元素进行比较 2.冒泡排序的算法描述如下。 (1)比较相邻的元素。如果第一 个比…
阅读更多...
ARCGIS 如何对河流等线条图形进行Smooth处理——具有多个断点高阶版

ARCGIS 如何对河流等线条图形进行Smooth处理——具有多个断点高阶版

1.线转点折点&#xff08;注意&#xff01;很重要&#xff0c;不是线转点&#xff09; 2.点转线步骤 ## 3 线的融合 2.1 新建Filed 》短精度类型》利用选择工具的 线文件。全选同一条河流点&#xff0c;进入Tabel的选择界面。给同一条河赋值同一个值。 大功告成&#xff01;…
阅读更多...
JS安全应用

JS安全应用

JS应用 常见分析调试&#xff1a; -代码全局搜索 案例 登录框&#xff0c;可以看到发送用户名密码被JS加密 搜索Username&#xff0c;找到加密地方 logindata.UserName encodeURI(encrypt.encrypt(numMobile));logindata.Mobile encodeURI(encrypt.encrypt(numMobile));…
阅读更多...
Jmeter如何进行分布式测试

Jmeter如何进行分布式测试

使用Jmeter进行性能测试时&#xff0c;有些同学问我如果并发数比较大(比如最近项目需要支持1000并发)&#xff0c;单台电脑的配置(CPU和内存)可能无法支持&#xff0c;怎么办就需要使用分布式压测 1.分布式原理&#xff1a; 1、Jmeter分布式测试时&#xff0c;选择其中一台作…
阅读更多...
视频融合共享平台LntonCVS视频监控管理平台技术方案详细介绍

视频融合共享平台LntonCVS视频监控管理平台技术方案详细介绍

LntonCVS国标视频综合管理平台是一款以视频为核心的智慧物联应用平台。它基于分布式、负载均衡等流媒体技术进行开发&#xff0c;提供广泛兼容、安全可靠、开放共享的视频综合服务。该平台具备多种功能&#xff0c;包括视频直播、录像、回放、检索、云存储、告警上报、语音对讲…
阅读更多...
jpa下hibernate的ddl-auto的各种属性

jpa下hibernate的ddl-auto的各种属性

在jpa中ddl-auto一共有四种&#xff0c;分别为&#xff1a; ddl-auto&#xff1a;create ----每次运行该程序&#xff0c;没有表格会新建表格&#xff0c;表内有数据会清空&#xff1b; ddl-auto&#xff1a;create-drop ----每次程序结束的时候会清空表 ddl-auto&#xff1a;…
阅读更多...
2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词]（idea源代码）

2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词]（idea源代码）

2024最新IDEA插件开发&#xff08;发布&#xff09;-SelectCamelWords[选中驼峰单词]&#xff08;idea源代码&#xff09; 参考文档 Jetbrains Idea插件开发文档: https://plugins.jetbrains.com/docs/intellij/welcome.html代码地址&#xff1a;https://github.com/yangfeng…
阅读更多...
如何覆盖!important修饰的属性

如何覆盖!important修饰的属性

最简单的方法 如果这个!important修饰的属性 是自己的写的&#xff0c;去掉这种写法&#xff0c;使用优先级的方式来写这个属性&#xff08;.outter .inner 的优先级就会比 。outter的优先级高&#xff09; 复杂的方法&#xff1a;用魔法打败魔法 但是这个样式来自于全局css&am…
阅读更多...
代码随想录——子集Ⅱ（Leecode 90）

代码随想录——子集Ⅱ（Leecode 90）

题目链接 回溯 class Solution {List<List<Integer>> res new ArrayList<List<Integer>>();List<Integer> list new ArrayList<Integer>();boolean[] used; public List<List<Integer>> subsetsWithDup(int[] nums) {use…
阅读更多...
Maven 插件列表详解

Maven 插件列表详解

Maven 是一个强大的项目管理和构建工具&#xff0c;广泛应用于 Java 项目中。作为一款优秀的构建管理工具&#xff0c;Maven 不仅提供了标准化的项目结构和依赖管理&#xff0c;还通过其丰富的插件系统&#xff0c;极大地扩展了其功能和灵活性。无论是代码编译、测试、打包&…
阅读更多...
第55期|GPTSecurity周报

第55期|GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
怎样搭建serveru ftp个人服务器

怎样搭建serveru ftp个人服务器

首先说说什么是ftp&#xff1f; FTP协议是专门针对在两个系统之间传输大的文件这种应用开发出来的&#xff0c;它是TCP/IP协议的一部分。FTP的意思就是文件传输协议&#xff0c;用来管理TCP/IP网络上大型文件的快速传输。FTP早也是在Unix上开发出来的&#xff0c;并且很长一段…
阅读更多...
【linux】内核从tcp层调用IP层摸索中

【linux】内核从tcp层调用IP层摸索中

合入代码&#xff1a; 登录 - Gitee.com 这是运行日志&#xff1a; https://gitee.com/r77683962/linux-6.9.0/raw/master/test_log/kern_tcp_ip.log 日志截取部分&#xff08;也不知道对不对&#xff0c;凭感觉走。。。。&#xff09;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023