百度图表插件echart简单应用，简单配置一些要显示的样式及种类
从echart官网下载js，然后引入jq即可运行。足够简单应用了
关键词：echart控制：图标标题、数据标题、折线图、柱状图切换按钮、恢复刷新图表按钮、保存为图片按钮、坐标系控制、坐标数据、坐标倾斜角度、刻度位置、要显示的标线（平均值、最大值、最高点）、折线颜色、折线点颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>折线图</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div>
</body> <script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_box')); // 指定图表的配置项和数据
option = {
title: {
text: '图表标题',//图表标题
subtext: '近一周推广数据'//数据标题
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['日平均点击量','最高点击量']
},
toolbox: {
show:true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
//magicType: {type: ['line', 'bar']},//折线图、柱状图切换
//restore: {},//恢复，即刷新图表
//saveAsImage: {}//保存为图片
}
},
grid:{//直角坐标系控制
left:50,//grid 组件离容器左侧的距离
top:70,
right:40,
bottom:50,
},
xAxis: { //设置横坐标
type: 'category',
axisLabel: {//横坐标的控制
show:true,//是否显示横坐标数据
rotate: 30,//坐标的倾斜角度
inside:false,//刻度是否朝内
margin:8,//标尺与轴线的距离，默认8
},
boundaryGap: false,
data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
},
yAxis: { //设置纵坐标
type: 'value',
axisLabel: {
formatter: '{value}',
rotate: 30,//坐标的倾斜角度
inside:true,//刻度是否朝内
}
},
series: [
{
name:'日平均点击量',
type:'line',
data:[400, 554, 1580, 1355, 1111, 1644, 1066],
markPoint: { },
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最高点击量',
type:'line',
data:[800, 1000, 1700, 1689, 1500, 1900, 2016],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
// label: {
// normal: {
// position: 'start',
// formatter: '最大值'
// }
// },
// type: 'max',
// name: '最高点'
}]
]
},
itemStyle: {
normal: {
color: '#00FF00',//改变折线点的颜色
lineStyle: { //改变折线颜色
color: '#00FF00'
}
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
百度图表插件echart简单应用，简单配置一些要显示的样式及种类的更多相关文章
- JavaWeb图表插件的小研究
背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...
- 百度echart使用心得，百度图表。
百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析.我这里使用饼状图,和柱状图为例: 首先,我们需要定义一个绘图的容器:(class是我自己定 ...
- ionic3引用外部插件--百度地图及echart报表的使用
前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...
- 超简单，webpack配置
有看过我的博客的童鞋可能有看到我最近有在利用闲暇时间做一个前后台均涵盖的音乐播放器项目,但是呢,我是一个小小的前端,对后台的了解可以说只停留在很初级的阶段,当然了音乐播放器的音乐列表是后台轮循出来的, ...
- postman插件的安装以及简单介绍
1:postman是干什么的? Postman官网上这么介绍的:“Modern software is built on APIs,Postman helps you develop APIs fas ...
- 一个简单的零配置命令行HTTP服务器
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- 简单几步配置gitlab
简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...
- Spring简单的文件配置
Spring简单的文件配置 “计应134(实验班) 凌豪” 一.Spring文件配置 spring至关重要的一环就是装配,即配置文件的编写,接下来我按刚才实际过程中一步步简单讲解. 首先,要在web. ...
随机推荐
- C# 中枚举的一点研究(跳过一些net坑的研究而已)
之前一直使用Enum.Parse()将字符串转为枚举,没有深究,后面发现一个问题后对下面的Enum有了一个初步研究(.net 4.0).看下面代码. (留意,枚举类型是值类型,其值不能为Null,所以 ...
- 访问者模式（Visitor）
访问者模式(Visitor) 访问者模式把数据结构和作用于结构上的操作解耦合,使得操作集合可相对自由地演化.访问者模式适用于数据结构相对稳定算法又易变化的系统.因为访问者模式使得算法操作增加变得容易. ...
- spring框架的一些技术总结
纵观现在互联网行业,java的地位依然不可动摇,因为java拥有着的众多开发人员和适用性广,技术与解决技术大部分开源等特点,因此java依然是众多众多开发行业作为互联网开发的首选,而说到开发,我们就不 ...
- 站在 Android 开发的角度，聊聊 Airbnb 的 Lottie！！！
一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时 ...
- 最好用的MongoDB GUI - LivingMongo
LivingMongo是一个mongodb数据库的GUI操作系统,支持对数据字段的修改.数据搜索.集合的分类.索引管理.空间统计.慢查询等 demo地址 : http://living-mongo.k ...
- Java VS .NET：Java与.NET的特点对比
一.前言 为什么要写Java跟.NET对比? .NET出生之后就带着Java的影子.从模仿到创新,.NET平台也越来越成熟.他们不同的支持者也经常因为孰弱孰强的问题争论不休.但是本文并不是为了一分高下 ...
- springboot学习（三）——http序列化/反序列化之HttpMessageConverter
以下内容,如有问题,烦请指出,谢谢! 上一篇说掉了点内容,这里补上,那就是springmvc的http的序列化/反序列化,这里简单说下如何在springboot中使用这个功能. 使用过原生netty ...
- 基于AOE网的关键路径的求解
[1]关键路径 在我的经验意识深处,“关键”二字一般都是指临界点. 凡事万物都遵循一个度的问题,那么存在度就会自然有临界点. 关键路径也正是研究这个临界点的问题. 在学习关键路径前,先了解一个AOV网 ...
- ABAP CDS Table Function介绍与示例
Core data services(以下简称CDS)可以指两样东西,一个是HANA CDS,一个是ABAP CDS. 如我们所知,HANA CDS只支持HANA数据库,ABAP CDS理论上支持多种 ...
- 微信小程序去除button按钮的边框
小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...