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 ...
随机推荐
- 一文掌握数仓中auto analyze的使用
摘要:analyze执行的是否及时,在一定程度上直接决定了SQL执行的快慢. 本文分享自华为云社区<一文读懂autoanalyze使用[这次高斯不是数学家]>,作者: leapdb. an ...
- 云图说丨初识数据工坊DWR
摘要:数据工坊DWR是一款近数据处理服务,通过易用的工作流编排和开放生态的数据处理算子,能够在云上实现图像.视频.文档.图片等数据处理业务. 本文分享自华为云社区<[云图说]第236期 初识数据 ...
- selenium 访问无等待
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities desired_capabilities ...
- Java FTP操作
pom引用: <dependency> <groupId>commons-net</groupId> <artifactId>commons-net&l ...
- i 的二次幂求和
学习 自为风月马前卒 大佬的数学笔记 \(i^2\) 求和 查阅资料我们很容易就发现 \(\sum_{i = 1}^ni^2 = \frac{n(n + 1)(2n + 1)}{6}\) 但具体怎么求 ...
- Vue项目实现导入导出Excel表格功能
前提:在我的项目中我使用的是ElementUi前端UI框架,用到的是里面的Upload上传组件. 第一步:需要安装三个依赖 npm install -S file-saver xlsx (这里其实安 ...
- [QML]从零开始QML开发(二)QML开发,浅谈控件、槽函数、锚等基本概念。QML和C++怎么交互?贯彻落实MVC原则
[QML]从零开始QML开发(二)QML开发,浅谈控件.槽函数.锚等基本概念.QML和C++怎么交互?贯彻落实MVC原则 先看代码: import QtQuick 2.12 import QtQuic ...
- SD Host控制器微架构设计-02
SD_clk 测试模式下,选择hclk,将扫描链中的时钟保持一致 clk_en表示可以通过软硬件关闭时钟 sd_if模块 模块中设置一些寄存器,我们可以对寄存器进行读写或者对于寄存器中的某些域段进行读 ...
- pycharm等编辑器快捷键大赏
1.序论 平时打代码的时候用鼠标在写代码的时候还行,代码一长就GG,快捷键便是我们的好选择 2.应用场景 1.问题一--选中一段指定区域 我想选中一段区域(我们一般用鼠标拖动),或者某一个标识符(光标 ...
- [STM32H7] 实战技能分享,如何让工程代码各种优化等级通吃,含MDK AC5,AC6,IAR和GCC
引出问题: 一个好的工程项目代码,特别是开源类的,如果能做到各种优化等级通吃,是一种非常好的工程案例,这样别人借鉴的时候,可以方便的适配到自己工程里.但实际项目中,针对一款产品代码,我们一般不会 ...