注意：一定要自己引入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. Python for Informatics 第11章 正则表达式一（译）

    注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 目前为止,我们一直在通读文件,查 ...

  2. ACM: 强化训练-Inversion Sequence-线段树 or STL·vector

    Inversion Sequence Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%lld & %llu D ...

  3. css3立体旋转动画

    demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...

  4. js，html，css注释大集合

    1.js注释: 单行注释,在注释内容前加符号 “//” <script type="text/javascript"> document.write("单行注 ...

  5. DataTable在内存中的使用

    DataTable表示一个与内存有关的数据表,可以使用工具栏里面的控件拖放来创建和使用,也可以在编写程序过程中根据需要独立创建和使用,最常见的情况是作为DataSet的成员使用,在这种情况下就需要用在 ...

  6. Makefile简易模板

    MAKE = g++ -g #MAKE = gcc -g FILES = tf all : $(FILES) #DYSRC = target.c #DYTGT = $(DYSRC:.c=.o) %.o ...

  7. ACM Steps 2.1.4

    Largest prime factor   Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

  8. vmware启动虚拟机报“内部错误”的解决方法

    最近换了Win8系统,结果vmware就报了如标题描述的错误,网上查了些资料,现将解决方法记录在此,以备查阅. 右键点击wmware程序图标,选择[属性],选择[兼容性]选项卡,勾选“以管理员身份运行 ...

  9. form表单提交controller层接收到的值为乱码的问题

    今天遇到个中文乱码问题,大体情况是这样的:前台有一个form表单,其中有几个input的控件,值是带中文的,form表单只设置了id='form1' method='post'  action='xx ...

  10. java客户端调用c#的webservice服务

    此处使用到了CXF框架,可以使用以下坐标从maven仓库中获取相关jar包: <dependency> <groupId>org.apache.cxf</groupId& ...