移动端写一个图表引用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. Apache服务器下phalcon项目报Mod-Rewrite is not enabled问题

    问题如图: 项目已经按照官网的教程修改了.htaccess文件,仍旧报此错误,判断可能是apache未添加mod_rewrite,通过查询资料,经以下两步解决此问题: 1.执行sudo a2enmod ...

  2. 导入sql文件报错：1071 Specified key was too long; max key length is 767 bytes

    ref: https://stackoverflow.com/questions/1814532/1071-specified-key-was-too-long-max-key-length-is-7 ...

  3. 关于python无法显示中文的问题：SyntaxError: Non-ASCII character '\xe4' in file test.py on line 3, but no encoding declared。

    ［已解决］关于python无法显示中文的问题:SyntaxError: Non-ASCII character '\xe4' in file test.py on line 3, but no enc ...

  4. qtftp 客户端

    今天上午看了看FTP网络,但是当添加头文件时发现qt creater并不包括此头文件,于是找了一下资料发现:在QT5上将QFtp去掉了,建议使用QNetworkAccessManager,但是后者并没 ...

  5. python零散补充与总结

    一 有一种情况,在Windows系统上面有一个文件,编码为gbk,将其上传到Linux虚拟机,系统编码为utf-8, 使用cat命令查看时是乱码,这时如何解决? [root@localhost ~]# ...

  6. docekr－image的区别和container;docker run和start,create

    copy by: https://www.simapple.com/326.html 容器(container)的定义和镜像(image)几乎一模一样,也是一堆层的统一视角,唯一区别在于容器的最上面那 ...

  7. 重识linux-linux系统服务相关

    重识linux-linux系统服务相关 1 tcp wrappers 特殊功能  应用级防火墙 2 系统开启的服务查看 top,ps 命令 3 查看系统启动的服务 1) 找到目前系统开启的网络服务 n ...

  8. node.js 爬虫中文乱码 处理

    爬虫中文乱码可做如下处理 import request from 'superagent'; import cheerio from 'cheerio';//类似jquery写法 const Icon ...

  9. node 支持es6

    安装  babel-cli, 全局安装 npm install babel-cli -g 然后 在工程目录下 安装 npm install babel-cli --save npm install b ...

  10. JSdom操作内容，样式，属性

    <p> JavaScript 能够直接写入 HTML 输出流中: </p> <script> document.write("<h1>This ...