注意：一定要自己引入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入门基础，画折线图的更多相关文章

  1. echars画折线图的一种数据处理方式

    echars画折线图的一种数据处理方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）

    最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...

  3. SAS 画折线图PROC GPLOT

    虽然最后做成PPT里的图表会被要求用EXCEL画,但当我们只是在分析的过程中,想看看数据的走势,直接在SAS里画会比EXCEL画便捷的多. 修改起来也会更加的简单,,不用不断的修改程序然后刷新EXCE ...

  4. Matplotlib学习---用matplotlib画折线图（line chart）

    这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevd ...

  5. 使用OpenCV画折线图

    使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程 原文链接:http://www.360doc.com/content ...

  6. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  7. echarts入门基础，画柱型图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  8. gnuplot画折线图

    之前尝试用jfreechart画自定义横坐标的折线图或时序图,发现很复杂,后来改用gnuplot了. gnuplot在网上一搜就能找到下载地址. 安装完成后,主要是命令行形式的交互界面,至少比jfre ...

  9. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

随机推荐

  1. 自动备份mysql

    创建备份文件存放的目录 mkdir /usr/local/dbbak 脚本:vi /usr/local/mysqlback.sh # /bin/bash DB_NAME="dsideal_d ...

  2. ios retain 与 copy 的区别

    .retain 与copy区别 retain 的仅仅是引用计数加1,但是并没有创建新的对象.它们的指针是指向相同的内存地址. copy 是创建一个新的对象作为原来对象的副本,新创建出来的引用计数并没有 ...

  3. 【JAVA】Quartz中时间表达式的设置

    Quartz中时间表达式的设置-----corn表达式 时间格式: <!-- s m h d m w(?) y(?) -->,   分别对应: 秒>分>小时>日>月 ...

  4. OLTP与OLAP的介绍

    OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...

  5. PL/SQL无法连接，提示：pl/sql initialization error sql*net not properly installed

    各种找资料都不行,最后还是在公司的线上环境中去找不同点配置好的.不多说了,就做了如下配置: 服务器环境是:windows server 2008 64位操作系统 1.电脑系统环境变量PATH增加:x: ...

  6. jsp实现过滤器的简单例子

    web.xml配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns=&quo ...

  7. 使用Eclipse构建Maven项目 (step-by-step)

    Maven这个个项目管理和构建自动化工具,越来越多的开发人员使用它来管理项目中的jar包.本文仅对Eclipse中如何安装.配置和使用Maven进行了介绍.完全step by step. 如果觉得本文 ...

  8. CSS样式优化

    一.css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...

  9. Objective-c的内存管理MRC与ARC

    Objective-c的内存管理MRC与ARC   Objective-c中提供了两种内存管理机制MRC(MannulReference Counting)和ARC(Automatic Referen ...

  10. ubuntu 安装 wkhtmltopdf 的方法

    参考自:http://vivianyw.blog.163.com/blog/static/1345474222014334256367/ wkhtmltopdf有编译好的Linux版本,找到http: ...