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. 顶级加密混淆混淆工具测评:ipagurd

    ​ 顶级加密混淆混淆工具测评:ipagurd 摘要 JavaScript代码安全需求日益增长,因此JavaScript混淆工具的使用变得广泛.本文将对专业.商业JavaScript混淆工具ipagur ...

  2. 十大 CI/CD 安全风险(四)

    在上一篇文章,我们着重介绍 PPE 风险,并提供缓解相关风险的安全建议与实践.在本篇文章中,我们将会了解凭据使用环境管理不善与不安全的系统配置,并给出相应的风险缓解建议. 凭据使用管理不善 由于与凭据 ...

  3. Axure 获取验证码

    拖两个矩形框,一个用来做文档输入,一个做获取验证码的按钮 设置全局变量OnLoadVariable的初如值为60 1.用例中的条件:当OnLoadVariable的值不等于0 2.用例中的步骤 禁用& ...

  4. C-Shopping基于Next.js,开源电商平台全新亮相

    嗨,大家好!欢迎来到C-Shopping,这是一场揭开科技面纱的电商之旅.我是C-Shopping开源作者"继小鹏",今天将为你介绍一款基于最新技术的开源电商平台.让我们一同探索吧 ...

  5. -bash: /home/advert/bin/vim: No such file or directory

    今天advert用户使用vim时,突然报错 -bash: /home/advert/bin/vim: No such file or directory 之前还好好的,且其他用户都能用vim,查看也是 ...

  6. vue-cli3开启gzip压缩

    首先添加yarn add 插件 "compression-webpack-plugin" 然后在vue.config.js里引入 在configureWebpack里增加插件代码. ...

  7. window对象的常见事件

    2.1 窗口加载事件 window.onload = function() { } 或者 window.addEventListener("load", function(){}) ...

  8. .NET CORE实战项目之CMS 开发篇 思维导图

    导图地址下载: 链接:https://pan.baidu.com/s/1sGiNZI-pc_yueqQiddvImQ 提取码:ql4v -------------------------------- ...

  9. Java项目配置Maven依赖时不知需要的最低jdk版本?(报错java: 错误: 无效的目标发行版:17)

    1.问题 在配置SpringBoot项目依赖时,使用了最新的spring-boot-starter-parent 3.1.5,但是出现了java: 错误: 无效的目标发行版:17的报错 2.解决 经过 ...

  10. [转帖]Linux 下rsync命令详细整理

    https://blog.csdn.net/weixin_44052462/article/details/116134761 rsync是一个功能非常强大的工具,其命令也有很多功能特色选项,我们下面 ...