ECharts图表图例

已于 2024-09-18 14:17:59 修改
阅读量642 收藏 3
点赞数 16
文章标签： 大数据 java eclipse
于 2024-09-18 13:52:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81687813/article/details/142330860
版权

数据可视化

用eclipse软件

java

代码：

＜!DOCTYPE html>

　<!DOCTYPE NLMI>

　<html>

　<head>

　<meta charset="UTF-8">

　<!-- 引入ECharts脚本-->

　<script src="js/echarts.js"></script>

　<title>绘制堆积柱状图</title>

　</head>

　<body>

　<!--为EChants准备一个指定了大小的DOM-->

　<div id="main"style="width:6θθpx; h-eight:4θθpx "></div>

　<script type="text/javascript">

　//基于准备好的DOM，初始化ECharts图表

　var myChart= echarts.init(document.getElementById("main"));

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

　var option ={

　tooltip:{

　trigger:'axis',

　axisPointer:{//设置坐标轴指示器，坐标轴触发有效

　type:'shadow'//设置坐标轴默认为直线，可选为：'line'或'shadow'

　}

　}，

　legend:{

　data:['直接访问','邮件营销','联盟广告','视频广告'

　'搜索引擎','百度','谷歌','必应','其他']

　}，

　toolbox:{

　show:true,

　orient:'vertical',//垂直显示

　x:'right',

　y:'center',

　feature:

　mark:{show:true}

　dataView:{show:true, readOnly:false},

　magicType:{show:true, type:['line','bar','s-tack', 'tiled']},

　restore:{show:true},

　saveAsImage:{show:true}

　}

　}，

　calculable:true,

　xAxis:[

　{

　type:'category',

　data:['周一','周二','周三','周四','周五','周六','周日']

　子

　}

　],

　yAxis:[

　{

　type:'value'

　}

　],

　series:[

　{

         name:'直接访问',

          type:'bar',

           data:[320,332,301,334,390,330,320]}，

      {

             name:'邮件营销',

              type:'bar',

              stack:'广告',//设置堆积效果

               data:[120,132,101,134,90,230,210]}，

          ｛

                 name:'联盟广告',

                  type:'bar',

                   stack:'广告',//设置堆积效果

                   data:[220,182,191,234,290,330,310]}，

        {

　                  name:'视频广告',

　                  type:'bar',

　                   stack:'广告',//设置堆积效果

　                    data:[150,232,201,154,190,330,410]

　     }，

　    {

　                      name:'搜索引擎',

                       　type:'bar',

　                        data:[862,1018,964,1026,1679,1600,1570],

　markLine:{

　itemStyle:{

　normal:{

　lineStyle:{

　type:'dashed'

　}

　}

　}，

　data:[

　[{type:'min'},{type:'max'}]

　]

　}

　}，

　{

　name:'百度',

　type:'bar',

　barWidth:5,

　stack:'搜索引擎',//设置堆积效果

　data:[620732,701,734,1090,1130,1120]

　}，

　{

　  name:'百度',

　  type:'bar',

      stack:'搜索引擎',//设置堆积效果                        data:[120,132,101,134,290,230,220]

   }，

    {

       name:'必应'，

        type:'bar',

         stack:'搜索引擎',//设置堆积效果

         data:[60,72,71,74,190,130,110]

      }，

     {

             name:"其他',

              type:'bar',

              stack:'搜索引擎',//设置堆积效果

              data:[62,82,91,84,109,110,120]}]}；

　//使用刚指定的配置项和数据显示图表

　     myChart.setOption(option);

　  </script>

</body>

</html>

07746bf478f44293906aa3fee7c10c37.jpg

 

bf6b484aeb5645c89be3c64be4ce50c7.jpg 

 

ae024a900727461d804faeff96507d2b.jpg

 

 

 

 

柚乐果果
关注
echarts图表组件封装模板
m0_51431448的博客
03-31 1704
这里提供的模板都是可以直接复用的。不同的图表，无非就是 option 配置不同，props接受传递过来的数据按需设置即可 这里我使用了一个 fontChart 的方法，这是为了让图表的字体在浏览器变化时能够达到自适应 fontChart 方法 // 字体转换 px -> rem export function fontChart(res) { let docEl = document.documentElement, clientWidth = window.in.
echarts图表自定义图例
summer
11-17 1万+
在echarts中自定义图例样式 就跟表格一样清晰的展示数据 <!-- 图表容器 --> <div id="myChart1" ref="myChart1" :style="{ width: '100%'}"></div> //在获取到图表数据后再调用此方法进行图表渲染 drawLine() { let myChart = ""; let option = { title: { text: "0.00".
自定义Echarts图表图例的图片
HuLuWa1997的博客
04-13 740
从Echarts官网上我们可以知道图例默认的图片样式有以下几种，分别是’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’,那如果我们要实现图片的标记类型该怎么实现呢，给大家分享两种实现方式 第一种： <script> import imgZhiWu from "./img/jhx/1.png"; import imgDongWu from "./img/jhx/2.png"; import i
echarts图表图例过多, 导致重叠的小tips
qq_49935630的博客
06-22 3144
1. 如图文字重叠在了一起 2. 添加两个属性，可以滚动的图例
echarts点击图例
weixin_44286765的博客
05-26 951
ECharts 实例
echarts图例内容太多分页显示
qq_56107885的博客
07-18 263
Echarts图表介绍
wangxuanyang_zer的博客
10-22 1672
开发者可以自定义图表的外观，以满足特定的设计需求，从而保持一致的品牌标识。
echarts改变图例位置
热门推荐
诚的博客
09-18 1万+
只需要legend属性中修改如下几个示数即可： legend：{ orient:"horizontal", x:'right', y:' center', width:'100', padding:[10, 30,0 0], itemWidth:30, textStyle:{ color:'#000', }, } x : 左（left）、...
Echarts图表图例数据更新加载不刷新
weixin_42735973的博客
05-28 1693
多次调用时option选项默认是合并（merge）的，加上true表示不合并配置 myChart.setOption(option,true); // 加上true表示不合并配置 this.myChart.setOption({...}，true)
解决按需引入 ECharts 后图例不显示的问题
前端小记
05-09 4649
众所周知，我们在项目中如果能够按需引入模块，这将大大缩小项目体积，避免不必要的性能耗费。本文介绍如何解决按需引入 ECharts 后图例不显示的问题。
完美解决vue 中多个echarts图表自适应的问题
12-28
　<IEcharts option=bar ref=echarts></IEcharts> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function ()...
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
### ECharts中图例Legend和坐标系Grid实现左右布局实例详解 #### 一、引言 在使用ECharts进行数据可视化的过程中，合理的布局对于图表的可读性和美观性至关重要。本文将详细介绍如何在ECharts中实现图例(`legend`)...
微信小程序Echarts图表组件使用方法详解
10-16
上述内容提到css文件配置中的空白显示问题，这实际上是因为Echarts图表需要有足够大的区域来显示，所以需要确保在wxss中为ec-canvas设置正确的宽度和高度，通常设置为100%来确保其能够填满其父容器。 在开发微信小...
Flume：大规模日志收集与数据传输的利器
Casual_Lei的博客
09-14 1025
是一个分布式、可靠、可扩展的日志收集和聚合系统，设计的初衷是用于高效收集和传输大量日志数据。它通常用于将数据从各种数据源，如日志文件、应用服务器、甚至是消息队列，实时传输到大数据处理系统（如 Hadoop 的 HDFS、HBase 或 Kafka）。Flume 的一个重要特点是其“可插拔性”，可以灵活地配置不同的数据源（Source）和目标存储（Sink），通过中间通道（Channel）来实现可靠的数据传输。Apache Flume 是一个非常强大的工具，适用于大规模日志数据的实时收集和传输。
消息中间件有哪些常见类型
最新发布
weixin_57763462的博客
09-15 602
需要注意的是，这些类型并不是严格互斥的，有些消息中间件可能支持多种消息传递模式或结合了多种类型的特点。在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。在发布/订阅模型中，消息被发布到特定的主题（Topic）上，所有订阅了该主题的消费者都可以接收到这个消息。消息代理是一种更通用的概念，它涵盖了上述的点对点和发布/订阅模型，以及可能的其他消息传递模式。消息代理作为消息的存储和转发中心，负责消息的路由、过滤、持久化等功能。这类消息系统使用日志结构来存储消息，提供了极高的吞吐量和可扩展性。
【大数据】探索怎么从一段话中解析关键信息（寄件人相关信息）
一个不断前行的程序者
09-12 621
通过使用Spacy的NLP功能，我们成功实现了从文本中提取姓名、地址和电话号码的功能。需要注意的是，这个简单的示例可能在处理复杂文本时效果不佳，实际应用中可能需要进一步的优化和训练。此外，对于电话号码的识别，我们简单地使用了数字长度作为判断依据，这并不准确。在实际应用中，我们可以使用正则表达式来更准确地识别电话号码。希望这个博客能够帮助你了解如何使用NLP技术实现文本信息解析功能。如果有任何疑问，欢迎在评论区留言讨论！
Java 学习路线：语言、框架、中间件与数据库
qq_64272546的博客
09-13 1540
Spring Boot 是 Spring 框架的子项目，可简化 Spring 应用的开发与配置。通过提供一系列默认配置和自动化配置功能，Spring Boot 极大地减轻了开发者的工作量。Spring Cloud 是一系列框架的集合，用于开发分布式系统和微服务架构。它涵盖了负载均衡、服务发现、配置管理、分布式追踪等功能。MyBatis-Plus 是 MyBatis 的增强工具，它在 MyBatis 的基础上提供了大量的易用功能，如单表 CRUD 操作、分页、代码生成器等，旨在简化数据库操作。
海量数据查找最大K个值：数据结构与算法的选择
许你安然的博客
09-13 1106
本文详细探讨了如何在海量数据集中查找最大的K个值，从基础的排序方法到高效的优先队列/堆方法，再到分布式计算框架的应用，以及一些优化策略。通过合理的数据结构和算法选择，我们可以大大提高处理大数据集的效率，确保在有限的时间内获得所需的结果。希望这些信息能够帮助开发者在实际项目中更好地应对大数据处理挑战。
测试-Testcontainers
Flying_Fish_roe的博客
09-12 648
Testcontainers 允许你通过自定义 Docker 容器，适用于不在官方支持列表中的服务或应用。// 获取 Redis 的地址和端口 String address = redis . getHost();} } }// 获取 Redis 的地址和端口 String address = redis . getHost();} } }// 获取 Redis 的地址和端口 String address = redis . getHost();} } }
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值