移动端写一个图表引用echarts，highcharts插件，本次要找一个能够显示最新数据的折线图，最后只找到显示最大值；
找到echarts的实例；记一下个各功能。
 
<!DOCTYPE html>
<html style="height: 100%">
<head>
　　<meta charset="utf-8">
　　<script type="text/javascript" src="echarts/echarts.min.js"></script>
　　<script type="text/javascript" src="echarts/echarts-gl.min.js"></script>
　　<script type="text/javascript" src="echarts/ecStat.min.js"></script>
　　<script type="text/javascript" src="echarts/dataTool.min.js"></script>
　　<script type="text/javascript" src="echarts/china.js"></script>
　　<script type="text/javascript" src="echarts/world.js"></script>
　　<!-- <script type="text/javascript" src="echarts/api.js"></script> -->
　　<script type="text/javascript" src="echarts/bmap.min.js"></script>
　　<script type="text/javascript" src="echarts/simplex.js"></script>
 
</head>
<body style="height: 100%; margin: 0">
　　<div id="container" style="height: 100%"></div>
　　<script type="text/javascript">
　　　　var dom = document.getElementById("container");
　　　　var myChart = echarts.init(dom);
　　　　var app = {};
　　　　option = null;
　　　　option = {
　　　　　　　　　　title: {
　　　　　　　　　　　　　　text: 'echarts的示例',//标题
　　　　　　　　　　　　　　subtext: '纯属虚构',//标题2
　　　　　　　　　　},
　　　　　　　　　　tooltip: {
　　　　　　　　　　　　　　trigger: 'axis',
　　　　　　　　　　},
　　　　　　　　　　legend: {
　　　　　　　　　　　　　　data: ['最高气温', '最低气温']
　　　　　　　　　　},
　　　　　　　　　　toolbox: {//控制上的小按钮
　　　　　　　　　　　　　　show: true,
　　　　　　　　　　　　　　feature: {
　　　　　　　　　　　　　　　　　　　　dataZoom: {
　　　　　　　　　　　　　　　　　　　　　　　　　　yAxisIndex: 'none'
　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　dataView: { readOnly: false },
　　　　　　　　　　　　　　　　　　　　magicType: { type: ['line', 'bar'] },
　　　　　　　　　　　　　　　　　　　　restore: {},
　　　　　　　　　　　　　　　　　　　　saveAsImage: {}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　xAxis: {
　　　　　　　　　　　　　　type: 'category',
　　　　　　　　　　　　　　boundaryGap: true,//控制是否靠边
　　　　　　　　　　　　　　data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
　　　　　　　　　　},
　　　　　　　　　　yAxis: {
　　　　　　　　　　　　　　type: 'value',
　　　　　　　　　　　　　　axisLabel: {
　　　　　　　　　　　　　　　　formatter: '{value} °C'//y轴的单位
　　　　　　　　　　　　　　}
　　　　　　　　　　},

　　　　　　　　　　dataZoom: [{//滚动条
　　　　　　　　　　　　　　　　startValue: '2014-06-01',
　　　　　　　　　　　　　　　　show: false,//显示，隐藏滚动条；

　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　type: 'inside'
　　　　　　　　　　　　　　}],

　　　　　　　　　　visualMap: {//控制折线曲线颜色
　　　　　　　　　　　　　　　　top: 10,
　　　　　　　　　　　　　　　　right: 10,
　　　　　　　　　　　　　　　　pieces: [{
　　　　　　　　　　　　　　　　　　　　gt: 0,
　　　　　　　　　　　　　　　　　　　　lte: 50,
　　　　　　　　　　　　　　　　　　　　color: '#096'
　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　gt: 50,
　　　　　　　　　　　　　　　　　　　　lte: 100,
　　　　　　　　　　　　　　　　　　　　color: '#ffde33'
　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　gt: 100,
　　　　　　　　　　　　　　　　　　　　lte: 150,
　　　　　　　　　　　　　　　　　　　　color: '#ff9933'
　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　gt: 150,
　　　　　　　　　　　　　　　　　　　　lte: 200,
　　　　　　　　　　　　　　　　　　　　color: '#cc0033'
　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　gt: 200,
　　　　　　　　　　　　　　　　　　　　lte: 300,
　　　　　　　　　　　　　　　　　　　　color: '#660099'
　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　gt: 300,
　　　　　　　　　　　　　　　　　　　　color: '#7e0023'
　　　　　　　　　　　　　　　　}],
　　　　　　　　　　　　　　　　outOfRange: {
　　　　　　　　　　　　　　　　　　　　color: '#999'
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　},
　　　　　　　　　　　series: [
　　　　　　　　　　　　　　　　{//第一条线
　　　　　　　　　　　　　　　　　　name: '最高气温',
　　　　　　　　　　　　　　　　　　type: 'line',
　　　　　　　　　　　　　　　　　　smooth: true,//尖锐、圆弧
　　　　　　　　　　　　　　　　　　data: [11, 11, 15, 13, 12, 13, 10],
　　　　　　　　　　　　　　　　　　markPoint: {//最大、小值汽泡
　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　{ type: 'max', name: '最大值' },
　　　　　　　　　　　　　　　　　　　　　　{ type: 'min', name: '最小值' }
　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　markLine: {
　　　　　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'average', name: '平均值' }
　　　　　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　　　{//第2条线
　　　　　　　　　　　　　　　　name: '最低气温',
　　　　　　　　　　　　　　　　type: 'line',
　　　　　　　　　　　　　　　　areaStyle: {},
　　　　　　　　　　　　　　　　data: [1, -2, 2, 5, 3, 2, 0],
　　　　　　　　　　　　　　　　markPoint: {
　　　　　　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
　　　　　　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　markPoint: {
　　　　　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　　　　　// 纵轴，默认
　　　　　　　　　　　　　　　　　　　　　　　　　　{      type: 'max', name: '最大值',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　symbol: 'emptyCircle',
　　　　　　　　　　　　　　　　　　　　　　　　　　　   itemStyle: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 color: '#dc143c',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 label: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　position: 'top'
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　　　　　　　{ 　　      type: 'min', name: '最小值',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　        symbol: 'emptyCircle',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 itemStyle: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　color: '#dc143c',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 label: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　position: 'bottom'
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　　　　　　　// 横轴
　　　　　　　　　　　　　　　　　　　　　　　　　　{　　 type: 'max',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　  name: '最大值',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　  valueIndex: 0,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　  symbol: 'emptyCircle',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　  itemStyle: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　color: '#1e90ff',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    label: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　position: 'right'
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　 },
　　　　　　　　　　　　　　　　　　　　　　　　　　{      type: 'min',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　name: '最小值',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　valueIndex: 0,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　symbol: 'emptyCircle',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　itemStyle: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 color: '#1e90ff',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 label: {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　position: 'left'
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　markLine: {
　　　　　　　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 纵轴，默认
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'max', name: '最大值', itemStyle: { normal: { color: '#dc143c' } } },
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'min', name: '最小值', itemStyle: { normal: { color: '#dc143c' } } },
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'average', name: '平均值', itemStyle: { normal: { color: '#dc143c' } } },
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 横轴
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'max', name: '最大值', valueIndex: 0, itemStyle: { normal: { color: '#1e90ff' } } },
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'min', name: '最小值', valueIndex: 0, itemStyle: { normal: { color: '#1e90ff' } } },
　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ type: 'average', name: '平均值', valueIndex: 0, itemStyle: { normal: { color: '#1e90ff' } } }
　　　　　　　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　],
　　　　　　　　　　　　markLine: {
　　　　　　　　　　　　　　　　　　data: [
　　　　　　　　　　　　　　　　　　　　　　{ type: 'average', name: '平均值' },
　　　　　　　　　　　　　　　　　　　　　　[{
　　　　　　　　　　　　　　　　　　　　　　　　　　symbol: 'none',
　　　　　　　　　　　　　　　　　　　　　　　　　　x: '90%',
　　　　　　　　　　　　　　　　　　　　　　　　　　yAxis: 'max'
　　　　　　　　　　　　　　　　　　　　　　}, {
　　　　　　　　　　　　　　　　　　　　　　　　　　symbol: 'circle',
　　　　　　　　　　　　　　　　　　　　　　　　　　label: {
　　　　　　　　　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　　　　　　　position: 'start',
　　　　　　　　　　　　　　　　　　　　　　　　　　formatter: '最大值'
　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　　　type: 'max',
　　　　　　　　　　　　　　　　　　　　　　name: '最高点'
　　　　　　　　　　　　　　　　　　　　　　}]
　　　　　　　　　　　　　　　　　　　　]
　　　　　　　　　　　　　　　　　　},
 
　　　　　　　　　　　　　　　　}
 
 
　　　　　　　　　　　　　　　　;
　　　　　　　　　　　　　　if (option && typeof option === "object") {
　　　　　　　　　　　　　　　　　　myChart.setOption(option, true);
　　　　　　　　　　　　　　}
　　　　　　　　</script>
　　　　　　　　</body>
　　　　　　　　</html>

移动端引用echarts的折线图的更多相关文章

  1. echarts版本折线图

    1.效果如下:         绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...

  2. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  3. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  4. echarts实现折线图

    前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...

  5. Echarts案例-折线图

    一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...

  6. echarts自定义折线图横坐标时间间隔踩坑总结

    折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...

  7. echarts之折线图介绍及使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使用Echarts实现折线图的一点总结

    使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...

  9. ECharts绘制折线图

    首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...

随机推荐

  1. WPF 交替行背景属性

    交替行背景色:RowBackground奇数行,AlternatingRowBackground偶数行 <!--#region 表格--> <DataGrid x:Name=&quo ...

  2. 我也说说Nginx——先搞搞清楚

    一.Nginx的诞生 这个很多文章里都有,总之就是当年啊有个技术困难叫C10K问题,就是如何解决10万个客户端的并发请求问题.然后有个俄罗斯大牛某某某,在02年使用C语言搞了个东东声称可以处理每天5亿 ...

  3. 2690036 - SAP HANA 2.0 SPS 03 Database Revision 034

    Symptom This is the SAP Release Note for SAP HANA 2.0 Database Revision 034 (2.00.034.00) of the SAP ...

  4. t default] Failed to discover available identity versions when contacting http://ahswj-cloud-controller:35357. Attempting to parse version from URL.: ConnectFailure

    2018-09-13 21:39:20.778 80758 WARNING keystoneauth.identity.generic.base [req-ea24b7ad-5aee-44b2-b68 ...

  5. centos7.5下安装teamview

    centos7.5下安装teamview, 1 安装 wget https://download.teamviewer.com/download/linux/teamviewer-host.x86_6 ...

  6. python中的isalnum、isalpha、istitle、isspace、islower、isupper、isdigit

    isalnum()判断是否包含字母或者数字 isalpha()判断是否都是字母 istitle()判断每个单词首字母是否是大写 isspace()判断是否是空格 islower()判断字母是否全都是小 ...

  7. maven 插件深入了解

    http://www.infoq.com/cn/news/2011/04/xxb-maven-7-plugin http://www.infoq.com/cn/news/2011/05/xxb-mav ...

  8. SPARK快学大数据分析概要

    Spark 是一个用来实现快速而通用的集群计算的平台.在速度方面,Spark 扩展了广泛使用的MapReduce 计算模型,而且高效地支持更多计算模式,包括交互式查询和流处理.在处理大规模数据集时,速 ...

  9. 关于 jquery+ajax向asp.net传递json的问题研究（呕心沥血、柳暗花明）

    第一种方法:字典的方法 //质检不合格 $('#Button3').click(function () { if (!confirm('确定质检不合格吗?')) return; var obj = n ...

  10. sonar自定义规则

    Sonar并不是简单地把不同的代码检查工具结果(例如 FindBugs,PMD 等)直接显示在 Web 页面上,而是通过不同的插件对这些结果进行再加工处理,通过量化的方式度量代码质量的变化,从而可以方 ...