echasrts定义折线图legend的样式-优化
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
//定义折线图legend的形状哈
legend: {
itemWidth: 10,
itemHeight: 1,
itemGap: 10,
data:[
{name:'邮件营销',icon:'rect'},
{name:'联盟广告',icon:'rect'},
{name:'视频广告',icon:'rect'},
{name:'直接访问',icon:'rect'},
{name:'搜索引擎',icon:'rect'}
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
注意
通过 data:[
{name:'邮件营销',icon:'rect'},
{name:'联盟广告',icon:'rect'},
{name:'视频广告',icon:'rect'},
{name:'直接访问',icon:'rect'},
{name:'搜索引擎',icon:'rect'}
],//分别修改legend格式 ,缺省则为默认
还可以定义其他的形状
后面有时间可以看看
然后在回头来写

echasrts定义折线图legend的样式-优化的更多相关文章
- 微信小程序echart 折线图legend不显示的问题
最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- Python 中 plt 画柱状图和折线图
1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...
- ECharts绘制折线图
首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- echarts折线图上下颜色渐变样式
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...
- 4-Highcharts曲线图之时间轴折线图
鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...
- JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- MPAndroidChart 3.0——LineChart(折线图)
显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...
随机推荐
- 字节跳动基于ClickHouse优化实践之“资源隔离”
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 相信大家都对大名鼎鼎的 ClickHouse 有一定的了解了,它强大的数据分析性能让人印象深刻.但在字节大量生产使 ...
- Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令
Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令 Jenkins插件安装 Publish over SSH 系统配置 生成代码 sshPublishe ...
- Spring Boot实战:静态资源无法访问
发现 static 或 public 下面的图片无法访问 spring: profiles: active: dev resources: static-locations: classpath:/ ...
- JSP | JavaBean 的基本使用方法与 IDEA 配置
上一篇重新编写了 IDEA 2021.2 新建JavaWeb项目及Tomcat部署, 接下来的本篇文章才是核心,JavaBean的基本使用方法与 IDEA 配置 JavaBean概述 JavaBean ...
- springboot项目全局异常处理@ControllerAdvice(方式二)
SpringMVC 中 @ControllerAdvice 注解的三种使用场景! @ControllerAdvice ,很多初学者可能都没有听说过这个注解,实际上,这是一个非常有用的注解,顾名思义 ...
- 正泰电力携手图扑:VR 变电站事故追忆反演
VR(Virtual Reality,虚拟现实)技术作为近年来快速发展的一项新技术,具有广泛的应用前景,支持融合人工智能.机器学习.大数据等技术,实现更加智能化.个性化的应用.在电力能源领域,VR 技 ...
- MySQL驱动扯后腿?Spring Boot用虚拟线程可能比用物理线程还差
之前已经分享过多篇关于Spring Boot中使用Java 21新特性虚拟线程的性能测试案例: Spring Boot 3.2虚拟线程搭建静态文件服务器有多快? Spring Boot 虚拟线程与We ...
- uniapp picker组件实现二级联动
https://blog.csdn.net/hxh_csdn/article/details/111504951 https://www.cnblogs.com/jstll/p/14149600.ht ...
- python进阶(4)--字典
文档目录: 一.一个简单的字典二.字典-增删改三.遍历字典四.字典嵌套 ---------------------------------------分割线:正文------------------- ...
- 基于java+springboot的宠物商店、宠物管理系统
该系统是基于java+springboot开发的宠物商城,用户可以登录该网站购买宠物.该系统是给师弟开发的课程作业.运行过程中的问题,可以咨询github或留言. 演示地址 前台地址: http:// ...