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来动态的修改数据,但是有 ...
随机推荐
- 测试Centos硬盘读写速度
yum install hdparm 参数: -a<快取分区> 设定读取文件时,预先存入块区的分区数,若不加上<快取分区>选项,则显示目前的设定. -A<0或1& ...
- JS中的专业术语
本身虽然是学技术出身,但.....此处省略N个字符 1.Namespace 命名空间 允许开发人员在一个独特, 应用相关的名字的名称下捆绑所有功能的容器. 2.Class类 定义对象的特征.它是对象的 ...
- jquery-uploadify 上传
先从官网下载插件 http://www.uploadify.com/ 引入之后.... html.................... <!-- 上传 --> <div id=&q ...
- MaterialCalendarView使用时遇到的问题
一.概述 MaterialCalendarView是一个开源项目.功能强大支持多选.单选.标注等. 二.问题 1.其继承自ViewGroup,故与CalendarView半毛钱关系都没有,完全是一个新 ...
- ArcGIS AddIN开发异常之--修饰符“static”对该项无效
修饰符“static”对该项无效, 修饰符“internal”对该项无效. 该异常弹出的位置为Config.Designer.CS文件中相关插件的声明附近 internal static string ...
- .net 设置导航的当前状态
1.静态地址共用母版页时,加当前页的状态(使用加参数的方法实现): a: main.Master为链接设参数 MenuId <li> <a <%=MenuId==?" ...
- CSS3初学篇章_3（属性选择符/字体样式/元素样式）
属性选择符 选择符 说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~=&quo ...
- Beta阶段站立会议-02
项目名:在线考试系统 组名:金州勇士 组长:尹良亮 组员:王汉斌.杜月.闫浩楠 代码地址: ssh:git@git.coding.net:handsomeman/examm.githttps://gi ...
- 安卓中級教程（1）：@InjectView
package com.mycompany.hungry; import android.annotation.SuppressLint; import android.app.Activity; i ...
- JavaDate类
在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date类的使用. ...