总结
基本上看手册都能看懂，值得一提的是自适应布局的做法：
首先响应式布局要把之前的设置放进baseOption: {}里面，并在下面加上media[]，这些都可以看手册。但是这样做好之后需要先调整页面大小，并且刷新页面才能实现改变,解决方法如下：
window.onresize = myChart.resize;
myChart.setOption(option);
每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
参考链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="Tools/echarts.js"></script>
<style>*{padding: 0px;margin: 0px;}</style>
</head>
<body style="width:100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 80%;height:400px;margin:0 auto;border: 1px red solid"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//定义数据
var p_real,p_bottom,p_open,p_close,p_top;
p_bottom = 5430;
p_top = 5480;
p_close = 5470;
p_open = 5450;
var dates = [];
var data2 = [];
var data = [];
var data_new = [];
var counter = 0;
setInterval(function(){
//开盘，收购盘，最低，最高,实时价
p_real = Math.ceil(Math.random()*5550+5440);
if(p_real>p_top)p_top=p_real;
if(p_real<p_bottom)p_bottom=p_real;
p_close = p_real;
data_cart = [p_open,p_close,p_bottom,p_top];
if(counter%3==0)
{
data.push(data_cart);
dates.push('time');
p_open = Math.ceil(Math.random()*5500+5400);
}else{
data[data.length-1] = data_cart;
}
var option = {
baseOption: {
backgroundColor: '#21202D',
legend: {
data: ['日K', 'close'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
lineStyle: {
color: '#376df4',
width: 2,
opacity: 0
}
}
},
xAxis: {
type: 'category',
data: dates,
axisLine: {lineStyle: {color: '#8392A5'}}
},
yAxis: {
min: 0,
max: 12000,
scale: true,
axisLine: {lineStyle: {color: '#8392A5'}},
splitLine: {show: false}
},
animation: false,
series: [
{
type: 'candlestick',
name: '日K',
data: data,
markLine: {
symbol: ['none', 'none'],
data: [
[
{name: '标线2起点', value: data[data.length - 1][1], x: 150, y: data[data.length - 1][1]},
{name: '标线2终点', x: 1300, y: data[data.length - 1][1]}
]
]
},
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: 'close',
type: 'line',
data: ['100'],
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
}
],
dataZoom: [
{
type: 'slider',
// show:false,
// zoomlock:true,
filterMode: 'filter',
start: 50,
end: 100,
labelPrecision: 10,
showDetail: false,
realtime: true
// orient:'vertical'
}
]
},
media:[{
query: {
maxWidth:500
},
option: {
legend: { // legend 放在底部中间。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 横向布局。
},
series: [
{
itemStyle: {
normal: {
color: 'red',
color0: '#0CF49B',
borderColor: 'red',
borderColor0: 'red',
width:'100%'
}
}
}
]
}
}
]
};
window.onresize = myChart.resize;
myChart.setOption(option);
counter++;
},500);
</script>
</body>
</html>
网友评论