1.加载插件，实例化chart.

2.链接websocket

3.接收数据，处理数据，调用chart的实例,不断更新数据

百度的echart有k线图

更新动态数据方法：html>

50

//加载插件

var aa=require.config({

paths:{

'echarts' :'k/echarts',

'echarts/chart/pie' :'k/echarts',

}

});

function loadK(){

// 使用

require(

[

'echarts',

'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

myChart = ec.init(document.getElementById('container'));

echarts=ec;

}

);

};

var marketSocketUrl="";//websocket地址

var marketUserName="";//websocket名字

var marketPassword="";//websocket密码

marketSocket = new WebSocket(marketSocketUrl);

var setIntvalTime = null;

marketSocket.onopen = function(evt){

masendMessage('Login','{"UserName":"'+marketUserName+'","PassWord":"'+marketPassword+'"}');

};

marketSocket.onclose = function(evt){};

marketSocket.onmessage = function(evt){

var data = evt.data;

if(method == "OnRspQryHistoryData"){

var historyParam = jsonData;

if(historyParam.Parameters==null){

return

};

processingData(data);

}

};

marketSocket.onerror = function(evt){

};

var rawData = [];

var CandlestickChartOption=null;

var CandlestickVolumeChartOption=null;

var newData=[];

function processingData(jsonData){

var parameters = jsonData.Parameters.Data;

if(jsonData == null)return;

newData=parameters.data;//处理数据，更新数据

var x=0;

if(dataPricesList.length!=0){

for(var i=0;i

if(dataPricesList[i].id==$("#CommodityNo").text()){

x=dataPricesList[i].prices;//获取标线的价格

}

}

}

CandlestickChartOption = setOption(newData,x);

myChart.setOption(CandlestickChartOption);

myChart.resize();

}

//设置数据参数(为画图做准备)

function setOption(rawData,x){

var dates = rawData.map(function (item) {

return item[0];

});

var data = rawData.map(function (item) {

return [+item[1], +item[2], +item[5], +item[6]];

});

var option = {

backgroundColor: 'rgba(43, 43, 43, 0)',

tooltip: {

trigger: 'axis',

axisPointer : {

type : 'line',

animation: false,

lineStyle: {

color: '#ffffff',

width: 1,

opacity: 1

}

},

formatter: function (params) {

var res = "时间:"+params[0].name;

res += '
  开盘 : ' + params[0].value[0] + '
  最高 : ' + params[0].value[3];

res += '
  收盘 : ' + params[0].value[1] + '
  最低 : ' + params[0].value[2];

return res;

}

},

grid: {

x: 43,

y:20,

x2:46,

y2:5

},

xAxis: {

type: 'category',

data: dates,

show:false,

axisLine: { lineStyle: { color: '#8392A5' } }

},

yAxis: {

scale: true,

axisLine: { lineStyle: { color: '#8392A5' } },

splitLine: { show: false },

axisTick:{

show:false,

},

splitArea: {

show: false

},

axisLabel: {

inside: false,

margin: 4

},

splitLine: {

show: true,

lineStyle: {

color: "#8392A5"

}

}

},

animation: false,

series: [

{

type: 'candlestick',

name: '',

data: data,

markLine: {

symbol: ['none', 'none'],

clickable:false,

data: [

{name: '标线2起点', value: x, xAxis: "1", yAxis: x}, //持仓均线

{name: '标线2终点', xAxis: "2", yAxis: x}

]

},

itemStyle: {

normal: {

color: '#FD1050',

color0: '#0CF49B',

borderColor: '#FD1050',

borderColor0: '#0CF49B'

}

}

}

]

}

return option;

};