当前位置: 首页 > news >正文

如何给echarts的legend设置不同的样式和位置 legend分组显示

legend分组显示 给每一个图例设置不一样的位置和样式

样式如下

在这里插入图片描述

demo代码

option = {title: {text: 'Stacked Line'},tooltip: {trigger: 'axis'},// legend写为数组可以给一些给某些组分配一些不一样的样式legend: [{data: [// 使用svg画任意的图形{name:'Email',icon: 'path://"M 100 100 L 150 100 L 125 150 L 100 150 L 75 100 Z"'},{name: 'Union Ads',icon: 'arrow'}],left:150,itemWidth: 20,itemHeight: 20,},// 每一个对象是一组样式{data:['Video Ads', 'Direct', 'Search Engine'],right:100,itemWidth: 20,itemHeight: 20,icon: 'rect'}],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]}]
};

相关文章:

  • 备考雅思记录
  • u8g2图形库——丝滑菜单制作
  • Linux系统常用指令大全(图文详解)
  • 发布鸿蒙的第一个java应用
  • 什么是索引?索引的作用是什么?
  • app小程序定制的重点|软件定制开发|网站搭建
  • 你了解Postman 变量吗?
  • DeepWalk代码实战-维基百科词条图嵌入可视化
  • pcie-2-rj45速度优化
  • 【数据结构】动态顺序表详解
  • 【科普知识】什么是步进电机?
  • stm32实现0.96oled图片显示,菜单功能
  • java容器
  • Centos 7 更改 PostgreSQL 14 默认存储路径
  • HCIA-RS基础-距离矢量路由协议
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 2017 前端面试准备 - 收藏集 - 掘金
  • interface和setter,getter
  • js中的正则表达式入门
  • pdf文件如何在线转换为jpg图片
  • Sass Day-01
  • SpiderData 2019年2月13日 DApp数据排行榜
  • spring boot 整合mybatis 无法输出sql的问题
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 诡异!React stopPropagation失灵
  • 悄悄地说一个bug
  • 如何在 Tornado 中实现 Middleware
  • 使用 QuickBI 搭建酷炫可视化分析
  • 微服务入门【系列视频课程】
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • Android开发者必备:推荐一款助力开发的开源APP
  • python最赚钱的4个方向,你最心动的是哪个?
  • ​flutter 代码混淆
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​Python 3 新特性:类型注解
  • #define、const、typedef的差别
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (¥1011)-(一千零一拾一元整)输出
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (二十三)Flask之高频面试点
  • (三)终结任务
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (转)scrum常见工具列表
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • (最简单,详细,直接上手)uniapp/vue中英文多语言切换
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .axf 转化 .bin文件 的方法
  • .dwp和.webpart的区别
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET 读取 JSON格式的数据
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • .net下简单快捷的数值高低位切换