设置echarts线的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;background:#ccc"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine: {
show: true,
lineStyle: {
color: '#4B0082',//垂直于x轴的线的颜色
width: 1, //线的宽度
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#e8e8e8', //垂直于y轴的线的颜色
width: 1,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
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],
itemStyle: {
normal: {
color: '#f5bf58',
label: {
show: true,
formatter: '{b}：{c}',
position: 'top',
textStyle: {
fontWeight: '700',
fontSize: '12',
color: '#f5bf58'
}
},
lineStyle: {
color: '#f5bf58',
width: 4
}
}
},
}
]
};
mCharts.setOption(option)
</script>
</body>
</html>
设置echarts线的样式的更多相关文章
- 设置Echarts鼠标悬浮样式
在option下 tooltip内添加以下代码: (本文在后台进行传值 也就是其中的viewstate[]) tooltip: { show: true, trigger: 'axis', //sho ...
- 给自定义cell设置分隔线的不同做法
1.给cell添加一个UIView,设置UIView的高度为1,并设置这个UIView的左.下.右约束. 2.不需要给cell添加任何控件,重写cell的- (void)setFrame:(CGRec ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...
- 封装对NPOIExcel的操作，方便的设置导出Excel的样式
下载: http://pan.baidu.com/s/1boTpT5l 使用方法: 导入: 使用 ReadToDataTable方法 导出: NPOIExcel.ExcelManager manger ...
- style在进行图形绘制前，要设置好绘图的样式
是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的 ...
- 设置app的状态栏样式
http://www.jianshu.com/p/9f7f3fa624e7 http://cocoa.venj.me/blog/view-controller-based-status-bar-sty ...
- Windows Phone 8初学者开发—第6部分：设置应用程序的样式
原文 Windows Phone 8初学者开发—第6部分:设置应用程序的样式 Source Code: http://aka.ms/absbeginnerdevwp8 PDF Version: ht ...
- 使用elementUI的时候，使用Upload 上传的时候，使用 list-type 属性来设置文件列表的样式，before-upload方法失效
最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效. 情况下:使用 list-type 属性来设置文件列表的样式. 最终的优化之后:(演 ...
- 将input或textarea设置为disabled的样式问题
input:disabled{ -webkit-text-fill-color: #333;//是用来做填充色使用的 -webkit-opacity: 1; color: #333; } textar ...
随机推荐
- Datahub新版本0.9.1更新，列级别数据血缘功能发布！
大家好,我是独孤风. 近期Datahub进行了一次大的版本更新,从0.9版本以后Datahub也正式发布了列级别数据血缘的功能. 0.9.1版本又增加了,列的影响分析这个功能. 这样Datahub对于 ...
- [ERROR] Error executing Maven. [ERROR] 1 problem was encountered while building the effective settings
原因: maven 的配置文件 setting.xml 有错. 比如在配置文件中多了一行: 导致配置文件的格式不正确.
- [IM002]Navicat ODBC驱动器管理器 未发现数据源名称并且未指定默认驱动程序
数据库 SQL SERVER 2008,连接时报:[IM002]Navicat ODBC驱动器管理器 未发现数据源名称并且未指定默认驱动程序 到安装目录下找到 sqlncli_x64.mis 双击安装 ...
- JDK,Mysql,Tomcat Linux安装
Linux的软件安装 JDK安装 注意:rpm与软件相关命令 相当于window下的软件助手 管理软件 步骤: 1)查看当前Linux系统是否已经安装java 输入 rpm -qa | grep ja ...
- 打破虚拟边界的视频交互新方式，AR隔空书写的应用理念和探索实践
AR隔空书写演示 随着技术的发展和超视频化的时代驱动,交互的形式日渐丰富.从屏幕点触,到语音交互,人脸.指纹.声纹,再到近年流行的AR和VR--人类早在语言出现之前便习惯使用肢体和手势这种近乎本能的沟 ...
- Redis系列：使用 Redis Module 扩展功能
★ Redis24篇集合 1 啥是Redis Module Redis Module是Redis的一种扩展模块,从 4.0版本开始,允许用户自定义扩展模块,在Redis内部实现新的数据类型和功能,使用 ...
- AcWing 第 13 场周赛 补题记录
比赛链接:Here AcWing 3811. 排列 签到题, 先输出 \(n\) 然后输出 \(1\sim n -1\) 即可 AcWing 3812. 机器人走迷宫 不会什么特别高级的方法 qaq, ...
- P1379 八数码难题 （ A* 算法 与 IDA_star 算法）
P1379 八数码难题 题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初 ...
- P1825 诡异的题
一道不难的题,可是挑了好久也没调好!因为最开始写的代码太复杂了,一大堆嵌套括号,其中有一个ny写成了nx一直没发现.后来用新定义变量取代了那些复杂的用函数."."和方括号表达出来的 ...
- 每天学五分钟 Liunx 000 | 计算机与 Liunx
计算机 计算机是具有数据处理与逻辑运算的机器. 它有输入单元,输出单元,CPU 内部的控制单元,逻辑处理单元以及内存组成. 输入单元如鼠标键盘等输入设备: 输出单元如打印机,显示屏,等输出 ...