ECharts在网页中添加可视化图标-在网页中添加交互图表+option模块案列详解

一、引言

ECharts 是一个使用 JavaScript 编写的开源可视化库,它可以在浏览器中生成交互式的图表。无论是折线图、柱状图、散点图还是饼图,ECharts 都能轻松应对。本文将带领大家了解如何在网页中添加 ECharts 可视化图标。

本章可以直接跳到第五点完整代码进行尝试,粘贴至HTML格式文件中

option模块案列详解在第六点

二、准备工作

1.引入ECharts

方法一:网页中引入 ECharts 的 JavaScript 文件。你可以通过 CDN 引入,或者下载 ECharts 的文件并在本地引入。以下是通过 CDN 引入 ECharts 的示例:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>ECharts 示例</title>  
    <!-- 引入 ECharts -->  
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>  
</head>  

</html>

方法二:下载ECharts库-导入echarts.js库,在本地导入

ECharts下载地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

2. 准备图表容器

具有特定宽度和高度的 div 元素。

<!-- 图表容器 -->  
    <div id="main" style="width: 600px;height:400px;"></div> 

三、初始化ECharts实例

在 JavaScript 中,你需要首先获取图表容器的 DOM 元素,然后初始化一个 ECharts 实例。

// 基于准备好的dom,初始化echarts实例  
var myChart = echarts.init(document.getElementById('main'));

四、配置图表选项

ECharts 通过一个配置对象来决定图表的样式和数据。以下是一个简单的柱状图配置示例:

// 指定图表的配置项和数据  
var option = {  
    title: {  
        text: 'ECharts 柱状图示例'  
    },  
    tooltip: {},  
    legend: {  
        data:['销量']  
    },  
    xAxis: {  
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
    },  
    yAxis: {},  
    series: [{  
        name: '销量',  
        type: 'bar',  
        data: [5, 20, 36, 10, 10, 20]  
    }]  
};  
  
// 使用刚指定的配置项和数据显示图表。  
myChart.setOption(option);

 五、完整示例

<!-- 1.下载ECharts库-导入echarts.js库 -->
<!-- 2.准备一个确定大小的DOM容器 -->
<!-- 3.初始化ECharts实例 -->
<!-- 4.制定配置项和数据 -->
<!-- 5.将配置项设置给ECharts实例对象 -->

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>ECharts 柱状图示例</title>  
    <!-- 引入 ECharts -->  
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>  
</head>  
<body>  
    <!-- 图表容器 -->  
    <div id="main" style="width: 600px;height:400px;"></div>  
    <script type="text/javascript">  
        // 基于准备好的dom,初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
  
        // 指定图表的配置项和数据  
        option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        };
       
  
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);  
    </script>  
</body>  
</html>

运行效果:

 六、更改option-更改图标的样式

打开ECharts官方网址的示例,选择需要的图标复制option部分内容进行更改

https://echarts.apache.org/examples/zh/index.html

复制该网址中option的的代码,放入图中的的位置

保存运行发现图形已经更改了

六、option中代码详细解释

官方项目编辑手册

option = {
  //设置图表标题
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  //设置线条的颜色
  color:['red','pink','green'],
  //图表提示框组件
  tooltip: {
    //trigger:触发方式
    trigger: 'axis'
  },
  //图例组件(series中有name属性,legend里面的data可以删掉)
  legend: {},
  //工具箱组件
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}  //图标保存为图片
    }
  },
  //网格配置,配置网格的大小,距离容器的距离
  grid:{
    left:'5%',
    right:'4%',
    bottom:'3%',
    continuous:true  //是否显示刻度标签,没有刻度标签图就贴着容器
  },
  //设置X轴的相关配置
  xAxis: {
    type: 'category',  //轴类型,category:类目轴
    boundaryGap: true,  //线条与坐标轴是否有缝隙
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',  //轴类型,value:值
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  //系列图标配置  决定显示那种系列的图标
  series: [
    {
      name: 'Highest',  
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    },
    {
      data: [1, 0.5, 0.4, -1, 3, 2, 1],
      type: 'bar'
    }
  ]
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flask简介

Flask简介 安装概述使用PyCharm创建一个Flask程序 Flask程序的基本结构初始化路由和视图函数启动服务器请求-响应循环 安装 概述 Flask算是小型框架&#xff0c;小到可以称为“微框架”。Flask 非常小&#xff0c;因此你一旦能够熟练使用它&#xff0c;很可能就能读懂它所有的…

Copilot Workspace是GitHub对人工智能驱动的软件工程的诠释

软件开发的未来是人工智能驱动的集成开发环境吗&#xff1f;至少GitHub 是这样想的。 在今年初秋于旧金山举行的 GitHub Universe 年度大会之前&#xff0c;GitHub 发布了 Copilot Workspace&#xff0c;这是一种开发环境&#xff0c;利用 GitHub 所称的 “Copilot 驱动的代理…

OneFlow新概念清单,AI深度学习的革命性突破(AI写作)

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

kotlinDSL控制的安卓项目导入已存在的模块后sync报错

原因很明显&#xff0c;但是我还找了好久 因为在import时并没有选择groove还是kotlin控制&#xff0c; 所以默认为groovy控制的&#xff0c;然而主项目是由kotlin dsl控制的grale行为。 原因清楚之后&#xff0c;就可以去检查一下&#xff0c;项目里是否包含了settings.gradle和…

基于EBAZ4205矿板的图像处理:03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03使用VIO调试输出HDMI视频图像 在zynq调试时VIO是真的方便&#xff0c;特此写一篇博客记录一下 先看效果 项目简介 下面是我的BD设计&#xff0c;vtc用于生成时序&#xff0c;注意&#xff0c;2021.2的vivado的vtcIP是v6.2版本&…

动手学深度学习——softmax分类

1. 分类问题 回归与分类的区别&#xff1a; 回归可以用于预测多少的问题&#xff0c; 比如"预测房屋被售出价格"&#xff0c;它是个单值输出。softmax可以用来预测分类问题&#xff0c;例如"某个图片中是猫、鸡还是狗&#xff1f;"&#xff0c;这是一个多…

用Docker 创建并运行一个MySQL容器

可以在DockerHub官网上荡:mysql - Official Image | Docker Hub 指令是:docker pull mysql; 因为文件比较大可能时间比较长&#xff0c;我是跟着黑马的课走的 课程提供的有文件&#xff0c;我就用已有的资源了。 在tmp目录里放入mysql.tar包 然后cd进去 输入指令:docker lo…

java技术栈快速复习05_基础运维(linux,git)

Linux知识总览 linux可以简单的理解成和window一样的操作系统。 Linux和Windows区别 Linux是严格区分大小写的&#xff1b;Linux中一切皆是文件&#xff1b;Linux中文件是没有后缀的&#xff0c;但是他有一些约定俗成的后缀&#xff1b;Windows下的软件一般是无法直接运行的Li…

管理能力学习笔记八:Will-Skill矩阵“盘“团队

如何把握带教中的“度”&#xff0c;才能在把事情做好的基础上&#xff0c;又能使员工获得成长呢&#xff1f; 需要做到 合理授权 & 适当辅导 如何做到&#xff1f; 通过使用 意愿-技能矩阵(Will-Skill Matrix) 辨别不同带教方法的适用情形&#xff0c;"盘"…

【Vue 2.x】学习vue之一基础部分

文章目录 Vue 一基础部分第一章1、git两个分支主分支子分支 使用方法方式1&#xff1a;采用命令的方式操作分支方式2&#xff1a;在idea中使用git的分支 向git远程仓库提交时忽略文件使用git时的一些冲突注意事项 2、Vue问题1&#xff1a;什么是Vue&#xff1f;问题2&#xff1…

网站升级提示:我用react+go重构了网站并记录了部署项目简要步骤

先贴出来地址&#xff0c;这是我网站的地址易查网 可能有细心的小伙伴们已经看到了&#xff0c;原来我的网站是这样式的 妥妥的phph5 改造 前端react框架 前段时间学习了react&#xff0c;正愁无处练手&#xff0c;就有人说我的网站很low,我感觉这正是一个好的机会&#xff…

纯血鸿蒙APP实战开发——发布图片评论

介绍 本示例将通过发布图片评论场景&#xff0c;介绍如何使用startAbilityForResult接口拉起相机拍照&#xff0c;并获取相机返回的数据。 效果图预览 使用说明 通过startAbilityForResult接口拉起相机&#xff0c;拍照后获取图片地址。 实现思路 创建CommentData类&#…

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二

在本章中,我们将深入探讨 网络的开始和 结束阶段发生的情况, 我将花大量时间回顾一些重要的背景知识,这些知识是熟悉Transformer的机器学习工程师的基础知识。 如果你已经熟悉背景知识,迫不及待地想了解更多,你可以跳到下一节,重点将放在Transformer的核心部分——注意…

nacos(docker部署)+springboot集成

文章目录 说明零nacos容器部署初始化配置高级配置部分访问权限控制命名空间设置新建配置文件 springboot配置nacos添加依赖编写测试controller 说明 nacos容器部署采用1Panel运维面板&#xff0c;进行部署操作&#xff0c;简化操作注意提前安装好1Panel和配置完成docker镜像加…

深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

上一章介绍了Tomcat的默认连接器&#xff0c;后续程序都会使用默认连接器。前面有讲过Catalina容器的两大块内容就是连接器与Servlet容器。不同于第二章的自定义丐版Servlet容器&#xff0c;这一章就来探讨下Catalina中的真正的Servlet容器究竟长啥样。 四种容器 在Catalina中…

Unity涂鸦纹理实现

文章目录 前言实现过程UV坐标和UI坐标对齐修改像素代码 前言 心血来潮实现下场景中提供一张纹理进行涂鸦的功能。 最终实现效果: 实现过程 UV坐标和UI坐标对齐 这里的纹理使用了UGUI的Canvas进行显示&#xff0c;所以这里使用一张RawImage。 因为Unity的视口坐标是以左下角…

【Excel】excel计算相关性系数R、纳什效率系数NSE、Kling-Gupta系数KGE

对于采用的数据&#xff1a; B2:B10958是观测值的所在范围 C2:C10958是模型计算值的所在范围 一、相关系数R是用来衡量两个变量之间线性关系强度和方向的统计量。在水文学和气象学中&#xff0c;常用的相关系数是皮尔逊相关系数&#xff08;Pearson correlation coefficient&am…

Baidu Comate:“AI +”让软件研发更高效更安全

4月27日&#xff0c;百度副总裁陈洋出席由全国工商联主办的第64届德胜门大讲堂&#xff0c;并发表了《深化大模型技术创新与应用落地&#xff0c;护航大模型产业平稳健康发展》主题演讲。陈洋表示&#xff0c;“人工智能”成为催生新质生产力的重要引擎&#xff0c;对于企业而言…

线上线下收银一体化,新零售POS系统引领连锁门店数字化转型-亿发

在市场竞争日益激烈的背景下&#xff0c;没有哪个商家能够永远屹立不倒。随着互联网技术的快速发展&#xff0c;传统的线下门店面临着来自电商和新零售的新型挑战。实体零售和传统电商都需要进行变革&#xff0c;都需要实现线上线下的融合。 传统零售在客户消费之后就与商家失…

网络基础(1)网络编程套接字UDP

要完成网络编程首先要理解原IP和目的IP&#xff0c;这在上一节已经说明了。 也就是一台主机要进行通信必须要具有原IP和目的IP地址。 端口号 首先要知道进行网络通信的目的是要将信息从A主机送到B主机吗&#xff1f; 很显然不仅仅是。 例如唐僧要去到西天取真经&#xff0…