ECharts图表图例4

news2024/12/24 1:00:14

jave

用eclipse软件

代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

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

    <title>绘制堆积面积图</title>

</head>

<body>

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

     <script type="text/javascript">

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

     var option= {

      title:{

        text:"堆积面积图",

        textStyle:{

         color:'green',

        },

        left:20,

        top:3

       },

       tooltip:{

        trigger:'axis'

       },

       legend:{

        data:['手机','冰箱','空调','电视','其他'],

        left:160,

        top:3

       },

       toolbox:{

        show:true,

        orient:'vertical',

        feature:{

         mark:{show:true}

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

               magicType:{show:true,type:['line','bar','stack','tiled']},

               restore:{show:true},

               saveAsImage:{show:true}

        },

                 top:52,

                 left:550

       },

       calculable:true,

       xAxis:[

                {

                    type:'category',

                    boundaryGap:false,

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

                }

            ],

            yAxis:[

                {

                    type:'value'

                }

            ],

            series:[

                {

                    name:'手机',

                    type:'line',

                    stack:'总量',

                    color:'rgb(0,0,0)',

                    itemStyle:{

                        normal:

                        {

                        }

                    },

                    data:[434,345,456,222,333,444,432]

             },

          {

        name:'冰箱',

        type:'line',

        stack:'总量',

        color:'blue',

        itemStyle:{

         normal:{

          

          }

               },

               data:[420,282,391,344,390,530,410]

          },

   {

           name:'空调',

           type:'line',

           stack:'总量',

           color:'green',

           itemStyle:{

            normal:{

             

             }

                  },

                  data:[350,332,331,334,390,320,340]

             },

          {

           name:'电视',

           type:'line',

           stack:'总量',

           color:'green',

           itemStyle:{

            normal:{

             

             }

                  },

                  data:[420,222,333,442,230,430,430]

             },

             {

                name:'其他',

                type:'line',

                stack:'总量',

                color:'#FA8072';,

                itemStyle:{

                    normal:{

                    }

                },

                data:[330,442,432,555,456,666,877]

            }

        ]

     };

     myChart.setOption(option);

     </script>

</body>

</html>

71b03a4bec8b4e8092fa2d70dc4e809e.jpg

 

代码结果:

b4c97b82f1df4c9fbc246183da6cffc5.jpg

 

 

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

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

相关文章

Unraid的cache使用btrfs或zfs?

Unraid的cache使用btrfs或zfs&#xff1f; 背景&#xff1a;由于在unraid中添加了多个docker和虚拟机&#xff0c;因此会一直访问硬盘。然而&#xff0c;单个硬盘实在难以让人放心。在阵列盘中&#xff0c;可以通过添加校验盘进行数据保护&#xff0c;在cache中无法使用xfs格式…

Leecode热题100-283.移动零

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […

【Python报错已解决】ImportError: No module named ‘module‘

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

单目操作符、--、++和do-while循环

昨天我们算术操作符的除法和乘法&#xff0c;以及引入while和for循环&#xff0c;今天我们来看新的内容。 借助我们之前写的计算器代码来深入学习一下其他东西。 单目操作符——、--、& 除了昨天说的那些操作符之外&#xff0c;记不记得输入函数中有一个&这么一个符…

分散加载文件 scatter files

目录 一、加载域和执行域二、Image entry points三、映射符号四、链接器预定义符号1、将符号引入到程序中1.1 引入到 C/C1.2 引入到汇编 2、域相关的符号2.1 执行域符号 Image$$2.2 执行域符号 Load$$2.3 加载域符号 Load$$LR$$2.4 节相关的符号2.5 镜像符号2.6 输入节符号 五、…

HarmonyOS鸿蒙 Next 实现协调布局效果

HarmonyOS鸿蒙 Next 实现协调布局效果 ​ 假期愉快! 最近大A 的涨势实在是红的让人晕头转向&#xff0c;不知道各位收益如何&#xff0c;这会是在路上&#xff0c;还是已经到目的地了? 言归正传&#xff0c;最近有些忙&#xff0c;关于鸿蒙的实践系列有些脱节了&#xff0c;…

Electron 是如何工作的

1. 创建electron项目 pnpm init pnpm add -D electron修改配置项 package.json {"name": "electron-menu","version": "1.0.0","description": "","main": "main.js", // eletron入口&quo…

【重学 MySQL】四十七、表的操作技巧——修改、重命名、删除与清空

【重学 MySQL】四十七、表的操作技巧——修改、重命名、删除与清空 修改表添加字段语法示例注意事项 删除字段语法示例 修改字段使用 MODIFY COLUMN语法示例 使用 CHANGE COLUMN语法示例 重命名表语法示例 删除表语法示例 清空表使用 TRUNCATE TABLE使用 DELETE FROM对比 TRUNC…

聊聊晶圆厂中的常见口语(1)

知识星球里的学员问&#xff1a;半导体公司的工程师总爱用一些英语代替中文&#xff0c;比如care,show&#xff0c;用这种简单的单词代替中文&#xff0c;能不能给我们总结工程师常用的英语单词&#xff0c;比较口语化的&#xff01; 为什么晶圆厂会用很多英文口语&#xff1f…

华为---以太网静态路由配置使用下一跳通信正常,而使用出接口无法通信

目录 1. 实验环境 2. 结果测试 3. 分析验证 3.1 以太网静态路由配置使用下一跳跨网段通信抓包分析 3.2 以太网静态路由配置使用出接口跨网段通信抓包分析 3.3 以太网静态路由配置使用出接口无法跨网段通信问题解决办法 1. 实验环境 以太网静态路由配置使用下一跳跨网段通…

番茄成熟度检测系统源码分享

番茄成熟度检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…

Opencv第十一章——视频处理

1. 读取并显示摄像头视频 1.1 VideoCapture类 VideoCapture类提供了构造方法VideoCapture(),用于完成摄像头的初始化工作&#xff0c;其语法格式如下&#xff1a; capture cv2.VideoCapture(index) 参数说明&#xff1a; capture:要打开的摄像头视频。 index:摄像头设备索引。…

【区间dp】AT_dp_l 题解

题意 给一个双端队列&#xff0c;双方轮流取数&#xff0c;每一次能且只能从队头或队尾取数&#xff0c;取完数后将这个数从队列中弹出。双方都希望自己取的所有数之和尽量大&#xff0c;且双方都以最优策略行动&#xff0c;假设先手取的所有数之和为 X X X&#xff0c;后手取…

【Git】一文看懂Git

Git 一、简介1. Git 与 SVN 区别1.1 Git 是分布式的&#xff0c;SVN 不是1.1.1 分布式版本控制系统Git1.1.2 集中式版本控制系统SVN 1.2 Git 把内容按元数据方式存储&#xff0c;而 SVN 是按文件1.3 Git 分支和 SVN 的分支不同1.4 Git 没有一个全局的版本号&#xff0c;而 SVN …

五.运输层

目录 5.1概述 5.2传输层的寻址与端口 熟知端口号 套接字(Socket) 5.3 UDP 特点 UDP报文格式 UDP校验 二进制反码求和 5.4 TCP 特点 可靠传输 停止等待协议 流水线方式 累计应答 流量控制 滑动窗口 拥塞控制 三次握手&#xff0c;四次握手 5.1概述 只有主机…

Pikachu-Cross-Site Scripting-反射型xss(get)

存储型XSS 存储型XSS是指恶意脚本被存储在目标服务器上&#xff0c;当用户访问包含该脚本的页面时&#xff0c;脚本会被执行。攻击者通常通过输入框、留言板等用户可输入的地方进行注入。例如&#xff0c;攻击者可以在留言板中输入恶意脚本&#xff0c;当其他用户查看留言时&a…

3.基于分数的生成模型

1.简介 基于分数的生成模型(SGM)的核心是Stein分数(或分数函数)。给定一个概率密度函数p(x)&#xff0c;其分数函数定义为对数概率密度的梯度Vxlogp(x)。生成模型通过学习并建模输入数据的分布&#xff0c;从而采集生成新的样木&#xff0c;该模型广泛运用于图片视频生成、文本…

假期惊喜,收到公司款项86167.14元

假期惊喜 近日&#xff0c;有网友爆料称&#xff0c;比亚迪在未提前通知员工的情况下&#xff0c;突然发放了利润奖金。 有人获得了七八万元&#xff0c;也有人拿到了十多万元。 一位比亚迪员工的帖子显示&#xff0c;在9月26日下午&#xff0c;他的银行卡突然收到一笔 86167.1…

数字化那点事:一文读懂数字孪生

一、数字孪生的定义 数字孪生&#xff08;Digital Twin&#xff09;是指通过数字技术构建的物理实体的虚拟模型&#xff0c;能够对该实体进行全方位、动态跟踪和仿真预测。简单来说&#xff0c;数字孪生就是在一个设备或系统的基础上创造一个数字版的“克隆体”&#xff0c;这…

Redis --- 第二讲 --- 特性和安装

一、背景知识 Redis特性&#xff1a; Redis是一个在内存中存储数据的中间件&#xff0c;用于作为数据库&#xff0c;作为缓存&#xff0c;在分布式系统中能够大展拳脚。Redis的一些特性造就了现在的Redis。 在内存中存储数据&#xff0c;通过一系列的数据结构。MySQL主要是通…