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 ...
随机推荐
- windows使用rclone挂载alist为本地磁盘,设置开机自启
前言 实现在windows下将alist挂载为本地磁盘,并设置开机自启,使得重启后依然生效. 教程 下载软件 Rclone: Rclone downloads WinFsp: https://winf ...
- [SDR] GNU Radio 系列教程(十五)—— GNU Radio GFSK 模块
目录 1 GFSK 背景知识 2 GNU Radio GFSK 模块参数详解 3 GNU Radio GFSK 模块简示例 4 本文视频教程 参考链接 教程列表 基础教程: 综合教程: 视频和博客 1 ...
- AtCoder Beginner Contest 217 D~E
比赛链接:Here ABC水题, D - Cutting Woods 题意:开始一根木棒长度为 \(n\) 并以 \(1\) 为单位在木棒上标记\((1\sim n)\) ,输出 \(q\) 次操作 ...
- CodeCraft-21 and Codeforces Round #711 (Div. 2) A~C 个人题解
补题链接:Here 1498A. GCD Sum 题意:给定一个 gcdSum 操作:\(gcdSum(762) = gcd(762,7 + 6 + 2) = gcd(762,15) = 3\) 请问 ...
- SPI 在 Dubbo中 的应用
通过本文的学习,可以了解 Dubbo SPI 的特性及实现原理,希望对大家的开发设计有一定的启发性. 一.概述 SPI 全称为 Service Provider Interface,是一种模块间组件相 ...
- oracle表空间已满解决
在日常的oralce使用中最长遇到的问题就是oralce的表空间满了,数据无法写入报错,这种情况下通常是磁盘没有足够的空间或者表空间的数据文件达到32G(linux最大限制单个文件不超过32G)无法继 ...
- java基础-IO流-day13
目录 1. IO的概念 2. 一个一个字符 完成文件的复制 3. 字节流 4. 转换字节流 5. System.in 7.基本数据类型的数据 8. object的处理 1. IO的概念 计算机内存中的 ...
- ReentrantLock 可重入锁总结
本文为博主原创,未经允许不得转载: ReentrantLock 是一种内置锁,也叫可重入锁(ReentrantLock),它允许线程再次获取已持有的同步锁,这样防止死锁的发生.在使用Reentrant ...
- Seata 分布式事务解决方案及特点
本文为博主原创,未经允许不得转载: 目录: 1. Seata官方链接 2. Seata的三大角色 3.Seata 常见分布式事务解决方案 4. 2PC两阶段提交协议 5. 2PC 的问题 6. AT模 ...
- 如果诸葛亮会编程,用Java写出师表...
继上一篇 "如果诸葛亮用C#写出师表..."后,站长想自己的第一语言是Java,虽然平时工作上用的不多,也用Java实现一遍吧,改改就是了,无非就是: C#的Console.Wri ...