php k线图 echarts,股票K线图，折线图总结（echarts）
此处利用bootstrap+echarts画布配置参数实现响应式，并且利用socket实时通信实现数据的实时更新
(一)介绍
ECharts (Enterprise Charts 商业产品图表库)
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript
图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 提供商业产品常用图表，底层基于ZRender
(一个全新的轻量级canvas类库)，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K
线图、地图、力导向布局图以及和弦图，
同时支持任意维度的堆积和多图表混合展现。 优势：拖拽重计算，大规模数据模式直角系图表(折、柱、散点、K线)
20万数据秒级出图，拥有值域漫游的功能，让你可以轻松进行数值筛选。
(二)使用
一、插件的下载(echarts+bootstrap)
二、引入echarts+bootstrap+socket.io
echarts
只需要像普通的 JavaScript 库一样用 script 标签引入。
代码如下：
bootstrap
我这里设置的啦ravel路径，根据自己情况，自行设置
socket.io
三、绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
body里设置一个div放置画布使用
代码如下：
@yield('content')//这里利用了laravel的模板继承
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图
官网完整简单实例代码。
ECharts
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
我的初始化
> 因为使用了模板继承，将html头部和画布的div初始化到了一个模板中，代码如下
文件名：'zoushi.blade.com'
@media (min-width: 1200px) {
.col--2-5 {
float: left;
width: 8%;
margin-right: 1.4%;
}
}
Starter Template for Bootstrap
@yield('content')
< 一下代码均在js中实现
1. K线图(需要的数据有：开盘价，闭盘价，最高价，最低价，时间)
1. 获取dom节点初始化
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '2015 年上证指数';
var limit=50;
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
var data=[['4654','6485','5456','6684']];
var dates=['122/12/4'];
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
2. 设置K线图的画布配置参数//详情见代码注释
require(
[
'echarts',
'echarts/chart/bar',// 使用柱状图就加载bar模块，按需加载
'echarts/chart/line',
'echarts/chart/k',
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var option = {
backgroundColor: '#21202D',
legend: {
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: dates,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
min:'100%',
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false }
},
dataZoom: [{
textStyle: {
color: '#8392A5'
},
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside'
}],
animation: false,
series: [
{
type: 'candlestick',
name: '日K',
data: data,
markLine: {
symbol: ['none', 'none'],
symbolOffset:[0, '50%'],
data : [
[
{name: '标线2起点', value: data[data.length-1][1], x: '100%', yAxis: data[data.length-1][1]},
{name: '标线2终点', x: '10%', yAxis: data[data.length-1][1]}
]
]
},
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
3. 写实时刷新需要改变的参数，封装为刷新函数//详情见代码注释
function refreshData(){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
option.xAxis[0].dates = dates;
option.series[0].markLine.data[0][0].value=data[data.length-1][1];
option.series[0].markLine.data[0][0].yAxis=data[data.length-1][1];
option.series[0].markLine.data[0][1].value=data[data.length-1][1];
option.series[0].markLine.data[0][1].yAxis=data[data.length-1][1];
option.series[1].data=calculateMA(5, data);
option.series[2].data=calculateMA(10, data);
option.series[3].data=calculateMA(20, data);
option.series[4].data=calculateMA(30, data);
myChart.setOption(option);
console.log(data[data.length-1])
}
4. 利用socket通信，实时监听数据的到来
var socket = io('http://192.168.100.121:6002');
socket.on('connection', function (data) {
console.log(data);
});
socket.on('zxz:App\\Events\\Push', function(message){
window.onresize = myChart.resize;
if(message.open==data[data.length-1][0])
{
data[data.length-1][1]=message.close;
data[data.length-1][2]=message.max;
data[data.length-1][3]=message.min;
refreshData();
}else{
data.push([message.open,message.close,message.max,message.min]);
dates.push(message.time);
console.log(data.length+"----"+dates.length);
if(data.length==limit)
{
data.shift();
dates.shift();
refreshData();
}else{
refreshData();
}
}
});
2. 折线图(需要的数据有：闭盘价，时间)
1. 获取dom节点初始化
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '2015 年上证指数';
var limit = 50;
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j];
}
result.push(sum / dayCount);
}
return result;
}
var data = ['4654'];
var dates = ['122/12/4'];
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
2. 设置折线图的画布配置参数+画布响应式//详情见代码注释
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var option = {
baseOption:{
backgroundColor: '#21202D',
legend: {
data: ['折线', 'MA5', 'MA10', 'MA20', 'MA30'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: dates,
axisLine: {lineStyle: {color: '#8392A5'}}
},
yAxis: {
position:'right',
scale: true,
axisLine: {lineStyle: {color: '#8392A5'}},
splitLine: {show: false}
},
dataZoom: [{
textStyle: {
color: '#8392A5'
},
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside',
show: false
}],
animation: false,
series: [
{
type: 'line',
name: '日K',
data: data,
showSymbol: false,
hoverAnimation: false,
data: data,
markLine: {
symbol: ['none', 'none'],
symbolOffset:[0, '50%'],
data : [
[
{name: '标线2起点', value: data[data.length-1], x: 100, yAxis: data[data.length-1]},
{name: '标线2终点', x: '90%', yAxis: data[data.length-1]}
]
]
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
}
]
},
media:[{
query:{
maxWidth:500
},
option:{
legend: {
data: ['日K'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
toolbox: {
show: false
},
series: [
{
name: 'MA5',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name: 'MA10',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name: 'MA20',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name: 'MA30',
showSymbol: false,
hoverAnimation: false,
data: data
}
],
dataZoom: [{show:false}]
}
}
]
};
// 为echarts对象加载数据
window.onresize = myChart.resize;
myChart.setOption(option);
}
);
3. 写实时刷新需要改变的参数，封装为刷新函数//详情见代码注释
function refreshData() {
if (!myChart) {
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
option.xAxis[0].dates = dates;
option.series[1].data = calculateMA(5, data);
option.series[2].data = calculateMA(10, data);
option.series[3].data = calculateMA(20, data);
option.series[4].data = calculateMA(30, data);
option.series[0].markLine.data[0][0].value=data[data.length-1];
option.series[0].markLine.data[0][0].yAxis=data[data.length-1];
option.series[0].markLine.data[0][1].value=data[data.length-1];
option.series[0].markLine.data[0][1].yAxis=data[data.length-1];
myChart.setOption(option);
}
4. 利用socket通信，实时监听数据的到来
var socket = io('http://192.168.100.121:6002');
socket.on('connection', function (data) {
console.log(data);
});
socket.on('zxz:App\\Events\\Push', function (message) {
window.onresize = myChart.resize;
if (message.open == open) {
} else {
data.push(message.open);
dates.push(message.time);
open = message.open;
console.log(data.length);
if (data.length == limit) {
data.shift();
dates.shift();
refreshData();
} else {
refreshData();
}
}
});
php k线图 echarts,股票K线图，折线图总结（echarts）相关推荐
- layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图 经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
- python 折线图_Python 编程一次画三种图：柱状图、散点图、折线图
Python 编程一次画三种图:柱状图.散点图.折线图 柱状图.散点图.折线图是三种常用数据图,用 Python 能轻易的画出来. #导入必须的库 import matplotlib.pyplot a ...
- Python之matplotlib：利用matplotlib绘制八象空间三维图案例(知识点包括散点图、折线图、标注文字、图例、三维坐标)之详细攻略
Python之matplotlib:利用matplotlib绘制八象空间三维图案例(知识点包括散点图.折线图.标注文字.图例.三维坐标)之详细攻略 目录
- 用echarts做双y轴折线图柱状图混合实时更新图
先上效果图: 具体细节不在一一道说了请看代码: 主要引了一个echart,.js 插件,剩下的就是前端代码了: 全程就只是纯前端的代码,没有后台服务,有需要的可自行研究: <!DOCTYPE h ...
- Echarts 入门实例--金山打字折线图
简介: Echarts 的文档实在有点难读,咋们还是在心情平静或者有需要的时候去读一读,当然编程是一门实践的技术,所以还是写个简单的demo来得实在一些.因为我最近再用金山打字练习打字所以就拿来其中一 ...
- echarts仪表盘，柱状图，折线图，趋势图
系列文章目录 文章目录 系列文章目录 前言 一.仪表盘 二.柱状图 三.折线图 四.趋势图 前言 //解决页面刷新canvas画布变大async loadEcharts(id) {var myChar ...
- echarts 饼图、柱状图、折线图 切换
本期项目基本完成,现在做一些总结,在这个项目中用到了一些echarts的一些功能,现在做一些总结. <div class="perstatimg" ><div i ...
- echarts看板效果图：流光折线图、3d柱状图、3d饼图、3d地图
前言 现在展厅的大看板是越花里胡哨越好,不过真的挺难做的.好在可以百度找到一些大神的作品进行参考. 下面的内容都是基于echarts 5.3.3 和 vue3 .另外demo都是参考别人的案例. 流光 ...
- visualmap折线图_使用Echarts几分钟制作出折线图、饼图、柱状图等
ECharts,缩写来自Enterprise Charts. ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer Data Visual ...
最新文章
- 好礼相送｜CSDN云原生 Meetup 成都站报名热烈启动，12.18见！
- 卫星电视巨头DISH网络接受比特币现金支付
- 使用XML模板在excel进行配置
- 从零单排Java 8（2） —— Timestamp、String互转
- loam_livox
- 全局处理ajax请求时session超时
- 二级c语言函数调用题,2013年计算机二级C语言函数调用考点归纳
- 【转】4.SharePoint服务器端对象模型 之 使用CAML进行数据查询
- RocksDB 写入流程详解
- 现在比较流行的一种新的清除浮动的方法
- 02-windows下elasticsearch安装elasticsearch-head
- CFile和CStdioFile的文件读写使用方法
- CVE-2020-0601漏洞详细分析
- regionserver.HRegionServer: Failed construction RegionServer
- bzoj 1296: [SCOI2009]粉刷匠（DP+DP）
- Java 接口和类一些总结
- java微信支付，企业微信号转账给个人
- 软件观念革命:交互设计精髓_电子沙盘设计主要分为哪几种？
- 单片机c语言轻松入门 完整版,单片机C语言轻松入门
- VS2019官方下载地址