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来动态的修改数据,但是有 ...
随机推荐
- 20145308刘昊阳 《Java程序设计》第2周学习总结
20145308刘昊阳 <Java程序设计>第2周学习总结 教材学习内容总结 第三章 基础语法 3.1 类型.变量与运算符 类型 基本类型 整数(short/int/long) short ...
- 【JAVA】Math.Round()函数常见问题“四舍5入”
java.lang.Math.Round()使用时候,处理方式整理,方便以后查找 /** * 测试函数 2014-01-10 */ public class TestMath { pu ...
- ObjectContext,DataContext和DBContext 分别获取linq 的sql方法
ObjectContext 先定义一个扩展方法: public static string ToTraceString<T>(this IQueryable<T> t) { s ...
- ThinkPHP登录功能代码
<?php /** * 后台登录控制器 */ Class LoginAction extends Action{ /** * 登录视图 */ Public function index(){ $ ...
- js中操作数组的一些方法【转】
增 push 在数组的末尾添加一个或多个元素,并返回新的长度. array.push(1,2,3.........) unshift 在数组的开头添加一个或多个元素,并返回新的长度. arra ...
- php 处理递归提成的方案
好久没有写blog了,最近CRM项目中用到了递归提成的方案 CREATE TABLE `crm_proxy_bonux_rule` ( `id` ) NOT NULL AUTO_INCREMENT C ...
- tshark (wireshark)笔记
1. dumpcap -i eth0 -q -n -b duration:120 -b files:5000 -s65535 -f "! ip broadcast and ! ip mult ...
- java.util.HashMap
做LeeCode上的题目,发现关于数组的题目用HashMap后简化运算,包括在之前的工作中,也多次用到HashMap而我对它的了解却不多,现在来总结一下. 在算法中的用处,暂时的理解是,当数组中两个数 ...
- zk jquery的使用
jQuery_effects.zul: <?page title="Jquery" contentType="text/html;charset=UTF-8&quo ...
- 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)
来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...