echarts入门基础，画折线图
注意：一定要自己引入echarts库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
transform: translate(50%,50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform-origin: translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript"> var arr = [1,2,3,4,5,6];
var option = { tooltip : {/*鼠标跟随效果*/
trigger: 'axis'
},
legend: { /*中间的小图标*/
data:['最高气温','最低气温']
}, //右上角工具条
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
}, xAxis : [
{
type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'],
show:true,
splitLine:{
show:true,
}
}
],
yAxis : [
{
type : 'value',
name: '总户数(户)',
axisLabel : { /*坐标轴的刻度文字设置*/
formatter: '{value} °C',
textStyle:{
color:"yellowgreen"
}
},
splitLine:{ /*网格线的设置*/
show:true,
},
axisLine:{/*坐标轴，轴线的设置*/
lineStyle:{
color:"red",
}
},
axisTick:{ /*坐标轴刻度的设置*/
lineStyle:{
color:"blue",
}
}, },
{
type : 'value',
name:"户均持股数(股/户)",
position :"right", /*轴的位置，默认是左边*/
axisLabel : {
formatter: '{value} °C' /*{value}指的series中对应的值， 可以用回调函数设置*/
},
splitLine:{ /*网格线，不画，*/
show:false,
}, } ],
series : [
{
name:'最高气温',/*数据的名称*/
type:'line', /*这个数据的类型，画折线*/
data:[11, 11, 20, 13, 12, 13, 10],
yAxisIndex:0, /*与上面y轴的数组中，第一组数据对应*/ },
{
name:'最低气温',
type:'line',
data:[1, 4, 2, 5, 3, 2, 0],
yAxisIndex:1, }
]
}; var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option); </script>
<html>
echarts入门基础，画折线图的更多相关文章
- echars画折线图的一种数据处理方式
echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）
最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...
- SAS 画折线图PROC GPLOT
虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...
- Matplotlib学习---用matplotlib画折线图（line chart）
这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevd ...
- 使用OpenCV画折线图
使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程 原文链接:http://www.360doc.com/content ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- echarts入门基础，画柱型图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- gnuplot画折线图
之前尝试用jfreechart画自定义横坐标的折线图或时序图,发现很复杂,后来改用gnuplot了. gnuplot在网上一搜就能找到下载地址. 安装完成后,主要是命令行形式的交互界面,至少比jfre ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
随机推荐
- hdu2553 N皇后问题
N皇后问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- IOS 蓝牙相关-BabyBluetooth蓝牙库介绍(4)
BabyBluetooth 是一个最简单易用的蓝牙库,基于CoreBluetooth的封装,并兼容ios和mac osx. 特色: 基于原生CoreBluetooth框架封装的轻量级的开源库,可以帮你 ...
- iOS 上线被拒收集
根据上线被拒的原因 自己 也在慢慢总结 希望对各位有所帮助 1)QQ 微信 等第三方平台 必须要做是否安装应用的检测
- 第1章 ZigBee协议栈初始化网络启动流程
作者:宋老师,华清远见嵌入式学院讲师. ZigBee的基本流程:由协调器的组网(创建PAN ID),终端设备和路由设备发现网络以及加入网络. 基本流程:main()->osal_init_sys ...
- C#操作文件夹及文件的方法的使用
本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内容 ...
- Mobile data
1.Consume REST web services from app 2.De-serialize JSON into an in-memory object collection 3.Save ...
- Java中的try，catch，finally
讲解的是关于java中关于try.catch.finally中一些问题 下面看一个例子(例1),来讲解java里面中try.catch.finally的处理流程 public class TryCat ...
- 20个有用的jq弹窗
链接地址:http://www.ffpic.com/zixun/20-useful-jquery-modal-plugins.html 推荐:jQuery.bPopup.js
- 对Oracle数据库坏块的理解
1.物理坏块和逻辑坏块 在数据库中有一个概念叫做数据块的一致性,Oracle的数据块的一致性包括了两个层次:物理一致性和逻辑一致性,如果一个数据块在这两个层次上存在不一致性,那就对应到了我们今天要要说 ...
- NGUI之Slider，最简单的方法做进度条。
既然标题是最简单的,那么很多东西就不需要我们自己做了,使用的是NGUI的示例,只针对初学者,接下来让我们来做一个最简单游戏设置里的声音控制. 1.导入NGUI: 2.找到NGUI的Menu示例Demo ...