百度图表插件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. ...
随机推荐
- iframe自适应高度？？？
最近在做一个项目,部分内容是iframe嵌套的,结果发现它不能自适应高. 于是乎我就用js iframe.height(iframe里body的高度),然并卵用.后来才发现,子页面(iframe所写的 ...
- WebRTC介绍及简单应用
WebRTC介绍及简单应用 WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. WebRTC实时 ...
- 数据结构与算法（C/C++版）【栈与队列】
第三章<栈与队列> (一)栈简介 栈(Stack):只允许在一端进行插入或删除操作的线性表.首先栈是一种线性表,但是限定这种线性表只能在某一端进行插入和删除操作栈顶(top):线性表允许 ...
- Java设计模式之单例模式详解
在Java开发过程中,很多场景下都会碰到或要用到单例模式,在设计模式里也是经常作为指导学习的热门模式之一,相信每位开发同事都用到过.我们总是沿着前辈的足迹去做设定好的思路,往往没去探究为何这么做,所以 ...
- 三十天学不会TCP,UDP/IP编程--MAC地址和数据链路层
这篇文章主要是来做(da)推(guang)介(gao)的!由于这两年接触到了比较多的这方面的知识,不想忘了,我决定把他们记录下来,所以决定在GitBook用半年时间上面写下来,这是目前写的一节,后面会 ...
- javac 小记
javac 到底是什么? javac 就是一个编译器,它把 Java 源代码编译成 Java 字节码,即 JVM 能够识别的二进制形式的文件. javac 由什么构成? 词法分析器:识别源代码中的 J ...
- JavaScript中对日期格式化的新想法.
其实我们对与日期的显示,也就那么几种,不需要每次都传格式化字符串. 只要告诉函数你想要什么结果就好了,以下是在ios的JavaScript中我新写的日期格式化函数: /** 格式化日期 @param ...
- 【C语言】统计数组中出现次数超过一半的数字
//统计数组中出现次数超过一半的数字 #include <stdio.h> int Find(int *arr, int len) { int num = 0; //当前数字 int ti ...
- 使用storyboard设置button边框属性（颜色，宽度，圆角）
通常使用Category时.仅仅能加入方法,不可加入属性.可是在使用Storyboard时我们可能会使用到keyPath,这里设置的key都须要是所设置视图的属性值.而且类型有所限制. 比如:我如今有 ...
- Swift入门（五）——数组（Array）
集合 集合的定义 Swift中提供了两种数据结构用于存放数据的集合,各自是数组(Array)和字典(Dictionary). 他们的主要差别在于数组中的元素由下标确定.而字典中的数据的值由数据的键(K ...