注意：一定要自己引入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. RecyclerView android:layout_width="match_parent" 无效

    使用RecyclerView 时,在xml文件中设置宽度match_parent无效. View view = mInflater.from(mContext).inflate(R.layout.it ...

  2. Leetcode Sqrt(x)

    参考Babylonian method  (x0  越接近S的平方根越好) class Solution { public: int sqrt(double x) { ) ; , tolerance ...

  3. ACM 独木舟上的旅行

    独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

  4. 通过/etc/rc.local实现开机自动拉起服务

    添加服务到/etc/rc.local 如自动拉起apache服务: /etc/rc.local: #!/bin/sh # # This script will be executed *after* ...

  5. HttpClient_使用httpclient必须知道的参数设置及代码写法、存在的风险

    结论: 如果使用httpclient 3.1并发量比较大的项目,最好升级到httpclient4.2.3上,保证并发量大时能抗住.httpclient 4.3.3,目前还有一些bug:还是用4.2.x ...

  6. Oralce中SQL删除重复数据只保留一条(转)

    用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 .查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...

  7. Spring 整合 Redis（二）

    pom构建: <modelVersion>4.0.0</modelVersion> <groupId>com.x.redis</groupId> < ...

  8. 2015Web前端攻城之路

    2015目标成为一名合格的前端攻城狮. 养成计划: 1.html / css 2.js 3.ajax 4.框架 5.项目实战

  9. [CareerCup] 16.1 Thread and Process 线程和进程

    16.1 What's the difference between a thread and a process? 进程Process是程序执行时的一个实例.一个进程是被分配系统资源的独立单元,每个 ...

  10. [转载]CRect::DeflateRect

    1基本内容 void DeflateRect(int x,int y); void DeflateRect(SIZE size); void DeflateRect(LPCRECT lpRect); ...