28、跟我来一起精通echarts吧

1、折线图

 1 option = {
 2     title : {
 3         text: ‘未来一周气温变化‘,
 4         subtext: ‘纯属虚构‘
 5     },
 6     tooltip : {
 7         trigger: ‘axis‘
 8     },
 9     legend: {
10         data:[‘最高气温‘,‘最低气温‘]
11     },
12     toolbox: {
13         show : true,
14         feature : {
15             mark : {show: true},
16             dataView : {show: true, readOnly: false},
17             magicType : {show: true, type: [‘line‘, ‘bar‘]},
18             restore : {show: true},
19             saveAsImage : {show: true}
20         }
21     },
22     calculable : true,
23     xAxis : [
24         {
25             type : ‘category‘,
26             boundaryGap : false,
27             data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]
28         }
29     ],
30     yAxis : [
31         {
32             type : ‘value‘,
33             axisLabel : {
34                 formatter: ‘{value} °C‘
35             }
36         }
37     ],
38     series : [
39         {
40             name:‘最高气温‘,
41             type:‘line‘,
42             data:[11, 11, 15, 13, 12, 13, 10],
43             itemStyle:{//这里可以定义折线的主颜色
44                 normal:{
45                     color:‘red‘
46                 }
47
48             },
49             markPoint : {
50                 data : [
51                     {type : ‘max‘, name: ‘最大值‘},
52                     {type : ‘min‘, name: ‘最小值‘}
53                 ]
54             },
55             markLine : {
56                 data : [
57                     {type : ‘average‘, name: ‘平均值‘}
58                 ]
59             }
60         },
61         {
62             name:‘最低气温‘,
63             type:‘line‘,
64             data:[1, -2, 2, 5, 3, 2, 0],
65             markPoint : {
66                 data : [
67                     {name : ‘周最低‘, value : -2, xAxis: 1, yAxis: -1.5}
68                 ]
69             },
70             markLine : {
71                 data : [
72                     {type : ‘average‘, name : ‘平均值‘}
73                 ]
74             }
75         }
76     ]
77 };
78

时间: 2024-10-06 03:15:08

28、跟我来一起精通echarts吧的相关文章

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

Windows7WithSP1/TeamFoundationServer2012update4/SQLServer2012

[Info   @09:03:33.737] ====================================================================[Info   @09:03:33.743] Team Foundation Server Administration Log[Info   @09:03:33.748] Version  : 11.0.61030.0[Info   @09:03:33.748] DateTime : 05/24/2014 17:0

Oracle SQL语言DML语句与事务_超越OCP精通Oracle视频教程培训28

Oracle SQL语言DML语句与事务_超越OCP精通Oracle视频教程培训28 本课程介绍: Oracle视频教程,风哥本套oracle教程培训是<<Oracle数据库SQL语言实战培训教程>>的第3/5套:Oracle SQL语言DML语句与事务.主要学习Oracle数据库SQL语句INSERT命令,学习使用UPDATE命令,学习使用DELETE命令,学习创建PL/SQL对象,事务概念与控制,锁的检测和锁争用,了解撤销数据. Oracle SQL语言DML语句与事务管理,课

Superset 0.28三奏曲——安装、集成ECharts和汉化

1 环境和版本 操作系统:CentOS Linux release 7.5.1804 (Core) python版本:3.6.4(直接安装Anaconda即可) 2 一奏曲--Superset安装(0.28版本) Superset 0.22版本的看板中存在很多bug,比如:多个类型一样的图表加入到看板中,只有第一个图可以显示,其他同类型的图均显示不出.在最新版本中不存在,故建议安装最新版本Superset 0.28. (1)万事开头难.首先咱们得要先安装Anaconda,因为接下来需要用到pip

Opencv图像识别从零到精通(28)----Kmeans

K-means算法算是个著名的聚类算法了,不仅容易实现,并且效果也不错,训练过程不需人工干预,实乃模式识别等领域的居家必备良品啊,今天就拿这个算法练练手.属于无监督学习中间接聚类方法中的动态聚类 流程: 1.随机选取样本中的K个点作为聚类中心 2.计算所有样本到各个聚类中心的距离,将每个样本规划在最近的聚类中 3.计算每个聚类中所有样本的中心,并将新的中心代替原来的中心 4.检查新老聚类中心的距离,如果距离超过规定的阈值,则重复2-4,直到小于阈值 聚类属于无监督学习,以往的回归.朴素贝叶斯.S

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

Hbase从入门到精通_如何学好Hbase

Hbase从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/188 课程出自学途无忧网:http://www.xuetuwuyou.com 课程简介 面对海量数据的存储及实时查询,传统的RDBMS已经无法满足,基于HDFS之上的HBase应运而生,每个表的数据可以达到数百万列和数十亿条,数据存储在HDFS之上充分利用其存储优势,分布式的架构让其查询数据更加快,绝大数电商互联网公司都是用它.   课程内容 (1)HBase 初窥使用 HBase 应用场景

echarts学习之——电力迁徙图(一)

今天主要就是在搞echarts,我们都知道他为我们提供了丰富的api方法,使我们能够迅速的搭建图标.同时他里面还有许多的案例, 其中就有这么一个国内航线模拟迁徙的地图,如下所示: 而我们通常因为各种需求原因,不想要全国地图,而单单想要一个省,或一个市的地图,进行类似模拟迁徙的效果,就比如我接下来要做的这个效果图: 首先第一个案例中的demo代码我就不说了,可以到http://gallery.echartsjs.com/editor.html?c=xSyn_h87Sg 进行下载 接下来的步骤为: