百度 echarts K线图使用

2024-06-19 21:18
文章标签 使用 百度 echarts 线图

本文主要是介绍百度 echarts K线图使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

看个效果图先

1141249-20180223151332920-1668992834.png

首先在需要插入图例的HTML中嵌入 

<div id=
"main"
 
style=
"height:400px"
></div>

接着引入echarts.js 

 
<script src=
"http://echarts.baidu.com/build/dist/echarts.js"
></script>

最后在加入图例生成JS -------- 请在文章最底部查看

        原版的图例生成JS可以去echarts官网找,上面这段JS是我改动后的。原版图例生成的JS中K线数据是固定写死的,这肯定是不行,而且只有一种K线(5分钟K)。

实际项目中有5分钟K,15分钟K,30分钟K,60分钟K以及日K。所以改动第一步肯定是要去后端控制器提取数据,当然返回的数据格式肯定要和官网中给出的数据格式一样的。在控制器

中我返回的JSON格式的数据,这在JS中肯定是不能直接拿来用的,需要转换成二维数组。function json_array(data){}就是把对应的JSON对象转换为二维数组,这样

就可以用来替换原来的固定数据啦。

      接下来第二个问题就是一下子显示5种K线,图例肯定会非常乱。所以我默认就只显示5分钟K,在此设置

legend: {   //图例控件,点击图例控制哪些系列不现实selected: {'k_5':true,'k_15':false,'k_30':false,'k_60':false,'k_day':false,},data: ['k_5','k_15','k_30','k_60','k_day', 'MA5', 'MA10', 'MA20', 'MA30']},

     点击对应的K线小图标肯定要显示对应的K线啦,这里需要用到echarts的图例交互事件,本人在项目中用到的是  legendselectchanged 事件

对应JS在此

myChart.on('legendselectchanged', function(obj) {var selected_1 = {};var selected = obj.selected;var legend = obj.name;if(selected[legend]){for(var key in selected){if(key == legend){selected_1[key] = true;}else{selected_1[key] = false;selected_1['MA5'] = true;selected_1['MA10'] = true;selected_1['MA20'] = true;selected_1['MA30'] = true;}}option.legend.selected = selected_1;if(legend == 'k_5'){data_common = data0;}if(legend == 'k_15'){data_common = data_1;}if(legend == 'k_30'){data_common = data_2;}if(legend == 'k_60'){data_common = data_3;}if(legend == 'k_day'){data_common = data_4;}myChart.setOption(option);}});

    这段JS的目的是将点击对应K线小图标高亮显示或灰暗显示,同时其他未被点击小图标灰暗显示。同时填充对应K线数据。

echarts中的图例交互事件有很多,例如:

1) legendselectchanged : 切换图例选中状态后的事件 (注:图例组件用户切换图例开关会触发该事件,不管你有没有选择,点击了就触发)

2)legendselected:例组件用legendSelect 图例选中后的事件,即点击显示该图例时,触发就生效。

3)legendunselected: legendUnSelect 图例取消选中后的事件。

4)datazoom:数据区域缩放后的事件。缩放视觉映射组件。

5)datarangeselected:selectDataRange 视觉映射组件中,range 值改变后触发的事件。

6)timelinechanged:timelineChange 时间轴中的时间点改变后的事件。

7)timelineplaychanged:timelinePlayChange 时间轴中播放状态的切换事件。

8)restore: restore 重置 option 事件。

9)dataviewchanged:工具栏中数据视图的修改事件。

10)magictypechanged:工具栏中动态类型切换的切换事件。

11)geoselectchanged:geo 中地图区域切换选中状态的事件(用户点击选中会触发该事件。)。

12)geoselected:geo 中地图区域选中后的事件(使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 geoselectchanged))。

13)geounselected:geo 中地图区域取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 geoselectchanged)。

14)pieselectchanged:series-pie 中饼图扇形切换选中状态的事件,用户点击选中会触发该事件。

15)pieselected:series-pie 中饼图扇形选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 pieselectchanged)。

16)pieunselected:series-pie 中饼图扇形取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 pieselectchanged)。

17)mapselectchanged: series-map 中地图区域切换选中状态的事件,用户点击选中会触发该事件。

18)mapselected:series-map 中地图区域选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 mapselectchanged)。

19)mapunselected:series-map 中地图区域取消选中后的事件,使用dispatchAction可触发此事件,用户点击不会触发此事件(用户点击事件请使用 mapselectchanged)。

20)axisareaselected:平行坐标轴 (Parallel) 范围选取事件,

感兴趣的老铁们可以去研究研究。

文末插入改动之后的图例生成JS

<script type="text/javascript">$(function(){var product_id = $("#product_id").val(); $.ajax({ type: 'post', url: '/index/product/ajax_product_info', data : {'product_id':product_id}, success:function(msg) { var data5 = msg.minute_5; var data15 = msg.minute_15; var data30 = msg.minute_30; var data60 = msg.minute_60; var dataday = msg.minute_day; var data = json_array(data5); var data1 = json_array(data15); var data2 = json_array(data30); var data3 = json_array(data60); var data4 = json_array(dataday); /*基于准备好的dom,初始化echarts实例*/ var myChart = echarts.init(document.getElementById('main')); // 数据意义:开盘(open),收盘(close),最低(lowest),最高(highest) var data0 = splitData(data); var data_1 = splitData(data1); var data_2 = splitData(data2); var data_3 = splitData(data3); var data_4 = splitData(data4); var data_common = data0; //json对象转二维数组 function json_array(data){ var len=eval(data).length; var arr=[]; for(var i=0;i<len;i++){ arr[i] = new Array(); arr[i]['0']=data[i].date; arr[i]['1']=data[i].open; arr[i]['2']=data[i].close; arr[i]['3']=data[i].low; arr[i]['4']=data[i].high; } return arr; } //切割数组,把数组中的日期和数据分离,返回数组中的日期和数据 function splitData(rawData) { var categoryData = []; var values = []; for (var i = 0; i < rawData.length; i++) { //splice 返回每组数组中被删除的第一项,即返回数组中被删除的日期 //alert(rawData[i].splice(0, 1)[0]); //categoryData 日期 把返回的日期放到categoryData[]数组中  categoryData.push(rawData[i].splice(0, 1)[0]); //alert(categoryData); //数据数组,即数组中除日期外的数据 // alert(rawData[i]);  values.push(rawData[i]) } return { categoryData: categoryData, //数组中的日期 x轴对应的日期  values: values //数组中的数据 y轴对应的数据  }; } //计算MA平均线,N日移动平均线=N日收盘价之和/N dayCount要计算的天数(5,10,20,30) function calculateMA(dayCount) { var result = []; for (var i = 0, len = data_common.values.length; i < len; i++) { if (i < dayCount) { result.push('-'); //alert(result); continue; //结束单次循环,即不输出本次结果  } var sum = 0; for (var j = 0; j < dayCount; j++) { //收盘价总和  sum += data_common.values[i - j][1]; //alert(sum);  } result.push(sum / dayCount); // alert(result);  } return result; } option = { title: { //标题  text: '价格', left: 0 }, tooltip: { //提示框  trigger: 'axis', //触发类型:坐标轴触发  axisPointer: { //坐标轴指示器配置项  type: 'cross' //指示器类型,十字准星  } }, legend: { //图例控件,点击图例控制哪些系列不现实  selected: { 'k_5':true, 'k_15':false, 'k_30':false, 'k_60':false, 'k_day':false, }, data: ['k_5'

这篇关于百度 echarts K线图使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076166

相关文章

百度/小米/滴滴/京东,中台架构比较

小米中台建设实践 01 小米的三大中台建设:业务+数据+技术 业务中台--从业务说起 在中台建设中,需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况,判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等,再结合其业务发展历程及业务现状,整理了中台架构的核心方法论,一是企业如何共享服务,二是如何为业务提供便利。

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti