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的样式-优化的更多相关文章

  1. 微信小程序echart 折线图legend不显示的问题

    最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:

  2. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  3. Python 中 plt 画柱状图和折线图

    1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...

  4. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

  5. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  6. echarts折线图上下颜色渐变样式

    // 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { ...

  7. 4-Highcharts曲线图之时间轴折线图

    鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...

  8. JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

  9. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

  10. MPAndroidChart 3.0——LineChart(折线图)

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

随机推荐

  1. 云小课|教你如何使用RDS for PostgreSQL插件

    摘要:本文介绍RDS for PostgreSQL支持的插件及不同插件的创建.删除或使用方法. 本文分享自华为云社区<[云小课][第42课]RDS for PostgreSQL插件介绍>, ...

  2. Netty 框架学习 —— 初识 Netty

    Netty 是一款异步的事件驱动的网络应用程序框架,支持快速地开发可维护的高性能的面向协议的服务器和客户端 Java 网络编程 早期的 Java API 只支持由本地系统套接字库提供的所谓的阻塞函数, ...

  3. 🔥 DeepVideo 智能视频生产训练营火热报名中!

    阿里云视频云和阿里云开发者学堂联合打造 国内首个视频云训练营11月8日启幕 四天直播,技术大咖亲临授课干货 全面介绍视频智能生产技术和产品 帮助开发者迅速入门视频云 已超千人报名,丰富打卡玩法礼品 活 ...

  4. VF01/VF11 创建和冲销开票凭证

    1.创建开票凭证 1.1.前台 VF01创建开票凭证 1.2.源代码 "--------------------@斌将军--------------------DATA:lt_billing ...

  5. 【LibCurl】HomeBrew 安装 LibCurl & CMake 配置

    LibCurl 在官网中明确指出支持 HomeBrew 进行安装. 那么在 macOS 端的安装就不会想 Win 下需要根据版本进行编译了,方便许多 brew install curl # 安装完成后 ...

  6. Spring 学习笔记(4)依赖注入 DI

    本篇文章主要对 Spring 框架中的核心功能之一依赖注入 (DI,Dependency Injection) 进行介绍,也是采用 理论+实战 的方式给大家阐述其中的原理以及明确需要注意的地方. 相关 ...

  7. 题解 CF1550C. Manhattan Subarrays (思维)

    来源:Educational Codeforces Round 111 (Rated for Div. 2) 不难但很好的思维题 设 \(d(p,q)\) 为 \(p,q\) 两点之间的曼哈顿距离 给 ...

  8. AtCoder Beginner Contest 208 A~E个人题解

    比赛链接:Here A - Rolling Dice 水题 一个六面的骰子,请问摇动 \(A\) 次最后的点数和能否为 \(B\) 如果 \(B \in [a,6a]\) 输出 YES C++ voi ...

  9. vivo平台化实践探索之旅-平台产品系列01

    vivo 互联网平台产品研发团队- Yang Yang 本篇为<vivo 平台产品>系列文章的第1篇.主要描述在业务高速发展的背景下,vivo软件工程师通过系统平台化建设等手段,逐步解决软 ...

  10. spring-transaction源码分析(1)概述和事务传播级别

    spring-tx概述 spring-tx包使用注解驱动和AOP通知将事务开启.提交/回滚.以及复杂的传播机制封装了起来,开发者不再需要编写事务管理的代码,而是可以只关注自己的业务逻辑. 本文将简单介 ...