注意：一定要自己引入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. PHP程序员 新人求职 平台

    投简历网站:大街网:中下,但是反馈速度不错拉勾网:中上,工资好像很多都很不错实习僧:不太熟悉,中等吧猎聘网:好像不错,本人不常用海投网:不清楚,没用过以上评级都是个人感觉而已,不代表正式评价个人感觉以 ...

  2. 【noiOJ】p8206

    02:二分法求函数的零点 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 有函数: f(x) = x5 - 15 * x4+ 85 * x3- 225 * x ...

  3. Android -- ImageView通过Bitmap得到网上的图片资源

    1. 效果图

  4. JsonP的简单demo

    服务器端代码 public ActionResult GetNewUploadCourseIds() { "; var result = new Result<NewUpload> ...

  5. Lable得到自定义高度！

    方法1(系统):CGSize declabesize = [_questionDecLabel.text boundingRectWithSize:CGSizeMake(CGRectGetWidth( ...

  6. Java_解密ThreadLocal

    概述 相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资 ...

  7. 四、卫星定位《苹果iOS实例编程入门教程》

    该app为应用的功能为用iPhone 显示你现在的位置 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View ...

  8. Winform 窗体最小化隐藏在桌面右下角：转

    ICO文件要放到 bin\Debug 下 1.给主窗体添加 NotifyIcon 控件 2.窗体加载事件里 private void MainF_Load(object sender, EventAr ...

  9. 常用JQ特效代码

    /** * hhBase 平台js * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com * 微博: huanhuan的天使 ...

  10. [CareerCup] 16.4 A Lock Without Deadlocks 无死锁的锁

    16.4 Design a class which provides a lock only if there are no possible deadlocks. 有很多方法可以避免死锁的发生,一个 ...