百度图表插件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. ...
随机推荐
- python爬虫实战 获取豆瓣排名前250的电影信息--基于正则表达式
一.项目目标 爬取豆瓣TOP250电影的评分.评价人数.短评等信息,并在其保存在txt文件中,html解析方式基于正则表达式 二.确定页面内容 爬虫地址:https://movie.douban.co ...
- 【原创】1、简单理解微信小程序
先看下网站的运行方式: 而小程序是这样: what?就这样?是的,就这样.那小程序官方提供的Wafer,还有Wafer2...想太多了,抛弃它们吧.不应当为了解决一个简单的旧问题而去整一个复杂的新问题 ...
- HDU 5504 GT and sequence 模拟
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5504 思路:模拟 代码: #include<stdio.h>//------杭电5504 ...
- Linux中MySQL5.6编译安装与MySQL5.7二进制安装步骤
首先,介绍一下MySQL的几种安装方式 1.RPM.Yum 的安装方式:安装方便.安装速度快,无法定制 2.二进制:不需要安装,解压即可使用,不能定制功能 3.编译安装:可定制,安装慢. 编译安装中需 ...
- 海尔U+的启发：让用户对智能家居拥有“话语权”
近年来,智能家居成了IT产业的重要话题,随着智能家电一系列产品的出现,智能家居最终開始从概念走向落地.只是,眼下智能家居行业有个非常突出的问题------因为缺乏开放的意识,不管是产品还是理念 ...
- mac os x 触摸板点击无效
macbook默认轻击触摸板无效,这样是为了防止误点击.可是习惯了windows笔记本的我对这一设置非常不习惯. 能够在"system preference"的"Trac ...
- 【CODEFORCES】 A. Dreamoon and Sums
A. Dreamoon and Sums time limit per test 1.5 seconds memory limit per test 256 megabytes input stand ...
- Windows环境下部署Tomcat服务器图文教程
Tomcat是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选. 本文将详细介绍在Windows环境下 ...
- 项目实战12.1—企业级监控工具应用实战-zabbix安装与基础操作
无监控,不运维.好了,废话不多说,下面都是干货. 警告:流量党勿入,图片太多!!! 项目实战系列,总架构图 http://www.cnblogs.com/along21/p/8000812.html ...
- 用keras做SQL注入攻击的判断
本文是通过深度学习框架keras来做SQL注入特征识别, 不过虽然用了keras,但是大部分还是普通的神经网络,只是外加了一些规则化.dropout层(随着深度学习出现的层). 基本思路就是喂入一堆数 ...