跟随我在oracle学习php(40)
效果图如下图所示
1.绘制一个图表时,需要有一个给定宽高的容器;基本配置可以阅读echarts的文档;里面有很多示例demo~~
html 结构:
<div id="box"></div>
css样式:
<style>
#box{
width: 600px;
height: 400px;
border: 1px solid #e4e4e4;
}
</style>
js:
1. 首先需要引入echarts.js 的文件;可从echarts官网中按需要进行下载,链接:http://echarts.baidu.com/download.html
2. 如下为js代码;可以根据注释来理解;
其中有几个点也是通过查阅文档与百度所得,仅此记录,方便以后查阅与完善。
(1). 设置折线的虚实,不同折线的颜色设定;
(2). 对折线的拐点样式进行修改设置(拐点大小;拐点背景颜色);达到所求;
(3). 坐标轴的样式(颜色,旋转-适用于内容较多时的完整显示,例如时间)。
<script>
// 获取到这个DOM节点,然后初始化
var myChart = echarts.init(document.getElementById("box"));
var option = {
// 标题
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
//图例名
legend: {
data:['邮件营销','邮件营销1','视频广告','视频广告1']
},
grid: {
left: '3%', //图表距边框的距离
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框,可以选择
toolbox: {
feature: {
saveAsImage: {}
}
},
//x轴信息样式
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
//坐标轴颜色
axisLine:{
lineStyle:{
color:'red'
}
},
//x轴文字旋转
axisLabel:{
rotate:30,
interval:0
},
},
yAxis: {
type: 'value'
},
series: [
//虚线
{
name:'邮件营销',
type:'line',
symbolSize:8, //拐点圆的大小
color:['red'], //折线条的颜色
data:[800, 300, 500, 800, 300, 600,500],
smooth:false, //关键点,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
},
//实线
{
name:'邮件营销1',
type:'line',
symbol:'circle',
symbolSize:8,
itemStyle:{
normal:{
color:'red',
borderColor:'red', //拐点边框颜色
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
symbolSize:8,
color:['orange'],
smooth:false, //关键点,为true是不支持虚线的,实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'视频广告1',
type:'line',
stack: '总量',
color:['orange'],
symbol:'circle',
symbolSize:8,
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle:{
normal:{
color:'orange',
borderColor:'orange',
}
},
},
]
};
myChart.setOption(option);
</script>
转载于:https://www.cnblogs.com/RighTgraM/p/10925038.html
跟随我在oracle学习php(40)相关推荐
- 跟随我在oracle学习php(14)
CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识: keyfram ...
- 跟随我在oracle学习php(21)
变量间的传值方式 总体说明: 1,这里讨论的传值方式是指:一个变量对另一个变量 2,它不仅仅适用于赋值语句,也适用于其他有同样含义的语句,比如:函数的实参到形参 3,传值方式只有2种:值传递,引用传递 ...
- 跟随我在oracle学习php(51)
HTTP协议 超文本传输协议(HTTP,HyperText Transfer Protocol) 最常见B/s架构中,使用,浏览器端与服务器端数据交互协议. 协议:约定好的一套语法规则. 规定:请求数 ...
- 跟随我在oracle学习php(27)
冒泡排序 目标:将下列数组进行正序(从小到大)排列出来 $arr2 = array(5, 15 , 3, 4, 9, 11); 一般性逻辑描述: 1,对该数组从第一个元素开始,从左到右,相邻的2 ...
- Oracle学习系列1-7
Oracle学习系列1 两个服务必须启动: OracleOraDb10g*TNListener 和 OracleService*** 使用sqlplusw先进行环境的设置 set linesize 3 ...
- Oracle学习篇章一——基础
Oracle学习一--总体基础 一.数据库分类 1.1.数据库分类 1.2.项目中如何合理地使用数据库,可以依据如下三个方面入手 1.3.不同规模类型的数据库区别 二.Oracle概念 三.Oracl ...
- oracle 权限问题9017,[数据库]oracle学习笔记(一)用户管理_星空网
oracle学习笔记(一)用户管理 2014-04-13 0 1 --oracle学习第一天 2 --连接 @后面连接数据库实例,具体连接到那个数据库 3 conn scott/tiger@MYORA ...
- 3. oracle学习入门系列之三Unix、Linux历史及基础
oracle学习入门系列之三Unix.Linux历史及基础 终于翻过了前面两篇,喝杯咖啡提下神,咱们继续前行.这次我们要进行操作系统方面知识了,考虑到当前时间上操作系统的多样性.变化性等,蛤蟆斟酌再三 ...
- 开辟ORACLE 学习之路,努力的去成为DBA
开辟ORACLE 学习之路,努力的去成为DBA IT的日子让我奋斗的时候,忘了下班:高兴时候,和朋友聚聚餐,出去游玩一下:迷茫时候,让自己踌躇满志,犹豫不前~ 总体来说IT的日子自己还要坚持下去,一步 ...
最新文章
- lstm处理时序数据结构图_详解LSTM
- WebSphere MQ----通道
- 频繁项集挖掘之Aprior和FPGrowth算法
- MySQL高级 - 案例 - 需求及环境准备
- 华为抓截屏_原来这才是华为截屏的正确姿势,今天才知道,千万别不当回事
- Linux 中防火墙命令
- 科学健脑,让IQ更上一层楼
- love2d贪吃蛇---画方格
- 手动制作满足SARscape要求的_dem数据
- 【汇智学堂】基于Socket+面向对象实现的网络聊天
- 微信小程序 index.js获取app.js异步请求的动态数据
- DM7.0在VM-中标麒麟NeoKylin虚拟机上安装
- svn 命令行创建分支、合并主干
- mac上配置outlook2019 + qqmail
- 渗透测试学习笔记_Day1
- 指令集入选重庆市工业和信息化领域“揭榜挂帅”项目榜单
- 【poj 1182】食物链 并查集应用
- 使用聚类分析 构建信用卡高风险客户识别模型
- 解决安装Windows7后开启AHCI电脑无法启动
- 万人参与“全网通址”技术培训 夯实企业移动商务基础
热门文章
- window7 MySql Cluster数据库集群配置
- SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志(转)...
- 对话框Dialog总结(转)
- 1/7 SELECT语句:基础检索
- echo,print()和print_r()有什么区别?
- 使用Python+turtle绘制同心圆
- 201521123007《Java程序设计》第13周学习总结
- C#/.NET主线程与子线程之间的关系
- Ibatis查询条件对于特殊字符的处理方法
- uniapp h5页面 在移动端 使用clipboardone.js插件实现 写入剪切板 -- 安卓和ios安美适配(仅测试部分机型)