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 ...
随机推荐
- Python 绑定:从 Python 调用 C 或 C++
摘要:您是拥有想要从 Python 中使用的C或 C++ 库的 Python 开发人员吗?如果是这样,那么Python 绑定允许您调用函数并将数据从 Python 传递到C或C++,让您利用这两种语言 ...
- Gzip之后继者Brotli浅析之CDN厂商的智能压缩,服务器Brotli设置
"智能压缩"按照又拍云的说法是,同时支持 Gzip 和 Brotli 压缩算法.根据用于浏览器开启自动选择不同压缩方式. Gzip 压缩算法 Gzip 基于 DEFLATE 算法, ...
- 火山引擎DataLeap如何解决SLA治理难题(一):应用场景与核心概念介绍
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 基于火山引擎分布式治理的理念,数据平台数据治理团队自研了火山引擎DataLeap SLA保障平台,目前已在字节内部 ...
- 火山引擎 DataLeap 下 Notebook 系列文章三:架构升级详解
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 当使用 Notebook 的项目日渐增加时,火山引擎 DataLeap 研发团队发现运行中的 PaaS 服务实在太 ...
- Solon 开发进阶,四、启动参数说明
Solon 开发进阶 一.插件扩展机制 二.体外扩展机制 三.常用配置说明 四.启动参数说明 五.全局异常订阅 启动参数,在应用启动后会被静态化(为了内部更高效的利用).比如,想通过体外扩展加载配置, ...
- 从 AI 绘画到 ChatGPT,聊聊生成式 AI
我们小时候经常有幻想,未来不用再去上班了,在工厂工作的都是机器人.在家也不用打扫卫生,机器人可以包揽一切.不知不觉间,我们小时候的幻想已经慢慢变成现实,工厂里有了多种型号的机械臂,代替了部分流水线功能 ...
- freeswitch APR库内存池
概述 freeswitch的核心源代码是基于apr库开发的,在不同的系统上有很好的移植性. apr库中的大部分API都需要依赖于内存池,使用内存池简化内存管理,提高内存分配效率,减少内存操作中出错的概 ...
- C++ 覆盖写文件
写文件有三种模式: 截断写,文件打开之后立即清空原有内容 附加写,文件打开之后不清空原有内容,每次只能在文件最后写入 覆盖写,文件打开之后不清空原有内容,可以在文件任意位置写入 例如:文件原有内容为 ...
- TOEFL | Reading · 题型总结
目录 直接引用 - 直译题(不要读文章) 直接引用 - why 题(需要细读题干) 直接引用 - 其他(需要细读题干) 理解题(出现最多,需要细读题干) 转义题(不要读题干) 添加句子题(不要读题干) ...
- WPF|分享一个登录界面设计
分享一个登录界面,先看效果图: 准备 文中使用到了一些图标: 我们可以从 iconfont免费下载: 代码简单说明 请随手创建一个WPF项目(.NET Framework..NET 5\6\7皆可), ...