注意：一定要自己引入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. 利用mysqldump 将一个表按条件导出数据

    mysqldump -uroot -pdsideal -t dsideal_db t_resource_info --where="res_type=1 and group_id=1 and ...

  2. 《从陷阱中学习C/C++》读书笔记

    1.运算符优先级很容易引起问题,如a = 4<<1+1,由于<<的优先级低于+,故其执行过程为 a = 4<<(1+1); 常见的运算符优先关系:(具体参照博客) ...

  3. mysql的小总结

    1.什么是数据库 ? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数 ...

  4. tomcat、Linux服务器

    tomcat.Linux服务器 用到的命令        解压命令: tar -zxvf 文件名 配置 :        vi /etc/profile                按 i  进入 ...

  5. windows2008 IIS下配置FTP服务

    一.服务器管理器 1.2008的系统使用服务器管理器,选择角色,因为我之前已经开启了IIS服务器角色,所以我现在只要添加角色服务即可,如果你没有开启过的话,直接添加角色即可. 2.选择WEB服务器,打 ...

  6. java使用poi读取ppt文件和poi读取excel、word示例

    java使用poi读取ppt文件和poi读取excel.word示例 http://www.jb51.net/article/48092.htm

  7. [LintCode] Coins in a Line II 一条线上的硬币之二

    There are n coins with different value in a line. Two players take turns to take one or two coins fr ...

  8. HTML--JS练习小游戏（别踩白块儿）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JSP中乱码问题

    一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到的中文乱码的问题及解决办法写出来供大 ...

  10. C++以对象管理资源

    先看下面一段代码: class Node {}; Node* CreateNode() { } void Solve() { Node *p=CreateNode(); //调用CreateNode函 ...