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来动态的修改数据,但是有 ...
随机推荐
- overflow-y:auto
overflow-x:auto; overflow-y:auto; X轴和Y轴自适应:
- topcoder SRM 618 DIV2 MovingRooksDiv2
一开始Y1,Y2两个参数看不懂,再看一遍题目后才知道,vector<int>索引代表是行数,值代表的是列 此题数据量不大,直接深度搜索即可 注意这里深度搜索的访问标识不是以前的索引和元素, ...
- 直接用Qt写soap
直接用Qt写soap 最近的项目里用到了webservice, 同事用的是`gSoap`来搞的. 用这个本身没什么问题, 但这货生成的代码实非人类可读, 到处都是`__`和`_`, 看得我眼晕.... ...
- weblogic 11g 配置db2数据源
配置db2数据源可以直接在包里面配置,不需要专门在服务器上配置数据源. 在11g版本前要配置db2数据源是需要增加包,后续的版本处理了这个问题. 1. 将C:\Program Files\SQLLIB ...
- dubbo源码学习(一)之ExtensionLoader
[转载请注明作者和原文链接,欢迎讨论,相互学习.] 一.前言 ExtensionLoader类,主要是根据扩展点名称来对扩展点接口实现进行的一系列操作,如果获取扩展点接口实现实例.适配类实例.更新实现 ...
- 升级OS X EI Capition 版本导致cocoapods 使用终端上pod: command not found
1)安装过cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 当然 上个步骤解决了我的 难题 2)首先在终端输入 gem so ...
- Facebook通过oAuth验证获取json数据
首先下载facebook相关的动态库,下载文件:facebook.dll 获取授权token方法: private string SetToken(string gettoken)//此处是你的短to ...
- hdu 1312
原题链接 题意:“@”为起点,“.”为路,求可以走的格子有多少个(包括起点) 水题 bfs搜一发 思路:只有可以走的节点才能进入队列,所以每次出队列时ans+1就可以了(没有退出条件,所有可进入的节点 ...
- c#语句 随堂练习2
1.方程ax²+bx+c=0是一元二次方程,求根. 2.输入一个年份 ,判断是不是闰年.(能被4整除但不能被100整除的年份是闰年,有的世纪年也是闰年) 3.标准体重:男士体重=身高-100±3:女士 ...
- 安装redis时遇到zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录
参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc