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 ...
随机推荐
- 顶级加密混淆混淆工具测评:ipagurd
顶级加密混淆混淆工具测评:ipagurd 摘要 JavaScript代码安全需求日益增长,因此JavaScript混淆工具的使用变得广泛.本文将对专业.商业JavaScript混淆工具ipagur ...
- 十大 CI/CD 安全风险(四)
在上一篇文章,我们着重介绍 PPE 风险,并提供缓解相关风险的安全建议与实践.在本篇文章中,我们将会了解凭据使用环境管理不善与不安全的系统配置,并给出相应的风险缓解建议. 凭据使用管理不善 由于与凭据 ...
- Axure 获取验证码
拖两个矩形框,一个用来做文档输入,一个做获取验证码的按钮 设置全局变量OnLoadVariable的初如值为60 1.用例中的条件:当OnLoadVariable的值不等于0 2.用例中的步骤 禁用& ...
- C-Shopping基于Next.js,开源电商平台全新亮相
嗨,大家好!欢迎来到C-Shopping,这是一场揭开科技面纱的电商之旅.我是C-Shopping开源作者"继小鹏",今天将为你介绍一款基于最新技术的开源电商平台.让我们一同探索吧 ...
- -bash: /home/advert/bin/vim: No such file or directory
今天advert用户使用vim时,突然报错 -bash: /home/advert/bin/vim: No such file or directory 之前还好好的,且其他用户都能用vim,查看也是 ...
- vue-cli3开启gzip压缩
首先添加yarn add 插件 "compression-webpack-plugin" 然后在vue.config.js里引入 在configureWebpack里增加插件代码. ...
- window对象的常见事件
2.1 窗口加载事件 window.onload = function() { } 或者 window.addEventListener("load", function(){}) ...
- .NET CORE实战项目之CMS 开发篇 思维导图
导图地址下载: 链接:https://pan.baidu.com/s/1sGiNZI-pc_yueqQiddvImQ 提取码:ql4v -------------------------------- ...
- Java项目配置Maven依赖时不知需要的最低jdk版本?(报错java: 错误: 无效的目标发行版:17)
1.问题 在配置SpringBoot项目依赖时,使用了最新的spring-boot-starter-parent 3.1.5,但是出现了java: 错误: 无效的目标发行版:17的报错 2.解决 经过 ...
- [转帖]Linux 下rsync命令详细整理
https://blog.csdn.net/weixin_44052462/article/details/116134761 rsync是一个功能非常强大的工具,其命令也有很多功能特色选项,我们下面 ...