百度图表插件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. ...
随机推荐
- strlen 与 sizeof
#include<stdio.h>#include<string.h>#include<string>#include<iostream>using n ...
- java MD5比较文件内容
最近用到,记下来…… 功能: 对指定目录下的所有TXT文件,通过MD5比较内容,删除掉重复的文件.文件的扩展可以修改成.docx..doc..jpg..png,或者其它类型,根据需求灵活修改. pub ...
- JAVA基础-JDBC二（常用的开源工具）
一.连接池 在实际的开发应用中,我们常常会对数据库进行大量的高并发的访问,而最原始的连接和操作方式并不能满足这种大量的访问,程序员为了追求更方便.更快捷.更科学安全的开发.第三方的工具类和Dao层的框 ...
- 第三方登录，一般都是遵循OAuth2.0协议。
1. QQ登录OAuth2.0协议开发流程 1.1 开发流程 申请接入,获取appid和appkey; 开发应用,设置协作者账号,上线之前只有协作者才能进行第三方登录 放置QQ登录按钮(这个自己可以用 ...
- UWP 应用程序内购
今天来说一下应用程序内购的问题,这里面有坑,给自己做个笔记,也给需要的人提个醒. 我目前的需要是可以允许用户捐赠赞助App的形式内购,最终效果如下 只讲上面的列表部分,下面的就是图片布局啥的,没意思了 ...
- Web前端学习——JavaScript
一.JavaScript介绍JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚 ...
- C#使用ManagementObjectSearcher来获取系统信息时会有out of memory的异常
在开发环境下,时不时出现out of memory的异常,最后是在服务界面重新启动 Windows Management Instrumentation后就好了.
- day9、用户登陆出现-bash-4.1$错误的原因及解决方法
原因:用户家目录里面与环境变量有关的文件被删除所导致的 下面两个文件被删除导致的 .bash_profile .bashrc 解决方法:从/etc/skel把丢失的文件 复制回来就可以了 -bash- ...
- 玩了几天的ARToolKit
因为玩的不深,就说一说配置环境出错的解决. 假如大家网上下载的ARToolKit下面有glut32.dll,那按照教程来配置环境的时候(其中有一步是:将OpenGL的dll拷贝到windows sys ...
- 》》ajax加蒙版
在与后台交互时,用时过长.禁止页面操作等,有提示,增强页面体验: $.ajax({ type:'POST',url:url,data:obj,dataType:'json',beforeSend: f ...