直接贴代码。 欢迎评论区互相讨论。
附上 官网配置项地址 https://www.echartsjs.com/option.html
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var coinName = 'CLVMCC'; // 币种名字
var upColor = '#c15465'; // 上涨颜色
var downColor = '#4daa90'; // 下跌颜色
var gridHeight2 = 20,gridBottom2 = 10;
var grid2 = { left: 0, right: '15%', bottom: gridBottom2+'%', height: gridHeight2+'%' };
var grid1 = { left: 0, right: '15%', height: '50%', bottom: (gridHeight2 + gridBottom2) + '%' };
function splitData(rawData) {
var categoryData = [];
var values = [];
var volumes = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
}
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data.values[i - j][1];
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
}
var data = splitData(k_data);
myChart.setOption(option = {
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#09131d' // 0% 处的颜色
}, {
offset: 1, color: '#1b273f' // 100% 处的颜色
}],
global: false // 缺省为 false
},
animation: true, // 动画开关
legend: { // k线的展示的开关样式
show: true, // 是否展示
top: '20%', // 上边距
left: 'left', // 左边距
padding: 10, // 内边距
itemWidth: 0, // 图例图片宽度
itemHeight: 0, // 图例图片高度
textStyle : { backgroundColor : 'rgba(0,0,0,0)' },
selected: {}, // 设置某项是否展示 //'MA30': false,
selectedMode: true, // 图例选择的模式 true false 'single' 'multiple'
borderColor : 'rgba(0,0,0,0)', // 图例描边的颜色
inactiveColor: '#fff', // 图例关闭时的颜色
backgroundColor : 'transparent', // 图例背景的颜色
data: [ {name: coinName, textStyle: { color: '#3d80cd' } },{name: 'MA05', textStyle: { color: '#ecd899' } },{name: 'MA10', textStyle: { color: '#7fcec0' } }, {name: 'MA30', textStyle: { color: '#c294f7' } }],// 'MA20',
},
tooltip: { // 全局提示窗样式设置
confine: true,
trigger: 'axis', // 触发类型。 item: 无类目轴的图表 axis: 坐标轴触发,类目轴的图表 none: 无
padding: 10,
hideDelay : 0, // 隐藏延迟，当点击在展示区域外，提示框消失时，是否进行延时关闭， 毫秒级别
textStyle: { color: '#fff' }, // 提示框文本样式，
axisPointer: { // 刻度线与展示文本
type: 'cross',
label: {
color: '#fff',
shadowBlur: 0,
borderWidth: 1,
borderColor: '#7286a5',
backgroundColor: '#0c1723',
},
},
borderWidth: 1,
borderColor: '#7286a5',
backgroundColor: 'rgba(12, 23, 35, 1)',
formatter: function(params, ticket, callback) {
var result = '时间： ' +params[0].name + "<br/>";
params.forEach(function(item) {
if(item.seriesName==coinName) {
result += item.marker + " " + '开盘价： ' + item.data[0] + '<br/>' +
item.marker + " " + '最高价： ' + item.data[3] + '<br/>'+
item.marker + " " + '最底价： ' + item.data[2] + '<br/>'+
item.marker + " " + '收盘价： ' + item.data[1] + '<br/>';
} else {
result += item.marker + " " + item.seriesName + " ： " + item.value.toString().substring(0, 7) + "</br>";//item.marker + " " +
}
});
return result;
},
},
axisPointer: {
link: {xAxisIndex: 'all'},
label: {
backgroundColor: '#777'
}
},
toolbox: {
show: false,
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
brush: {
xAxisIndex: 'all',
brushLink: 'all',
outOfBrush: {
colorAlpha: 0.1
}
},
visualMap: {
show: false,
seriesIndex: 5,
dimension: 2,
pieces: [{
value: 1,
color: downColor
}, {
value: -1,
color: upColor
}]
},
grid: [ grid1, grid2 ],
xAxis: [ // 直角坐标系中横轴数组 数组中每一项代表一条横轴坐标轴，仅有一条时可省略数组，最多同时存在两条数组
{
type: 'category', // k线为 category：类目轴，time： 时间轴，value：数值轴，log：对数轴
data: data.categoryData, // 类目数据，在类目轴（type: 'category'）中有效。具体展示数据
min: 'dataMin', // 坐标轴刻度最小值。取数据在该轴上的最小值作为最小刻度。
max: 'dataMax', // 坐标轴刻度最大值。取数据在该轴上的最大值作为最大刻度。
boundaryGap : false, // true: 刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
axisLine: { onZero: false, lineStyle: { color : '#263247', } }, // 坐标轴轴线相关设置。
axisTick: { show: false, alignWithLabel: true }, // 坐标轴刻度相关设置。 因我将两个图表放在一起，所以将k线的x轴刻度线隐藏掉。
axisLabel: { show: false }, // 坐标轴刻度标签的相关设置。 因我将两个图表放在一起，所以将k线的x轴刻度标签隐藏掉。
splitLine: { show: true, lineStyle: { color: '#263247', }, }, // x轴在图表区域展示分割线，x轴为竖线
axisPointer: { z: 100, label: { show: false, }, }, // 因为我将两个图表是连在一起的，所以k线的x轴文本展示关闭掉，否则会重复提示。
},
{
type: 'category', // 同上
min: 'dataMin', // 同上
max: 'dataMax', // 同上
data: data.categoryData, // 同上
gridIndex: 1, // 默认为0时，位列x轴所在索引第一位，此时为第二个表所以索引为1.
boundaryGap : false, // 同上
axisLine: { onZero: false, lineStyle: { color : '#263247', } }, // 同上
axisTick: { show: true, }, // 同上
axisLabel: { color : '#7286a5', }, // 同上
splitLine: { show: true, lineStyle: { color: '#263247' } }, // 同上
axisPointer: { z: 100 } // 同上
}
],
yAxis: [
{
scale: true, // 默认 type 为 value类型， scale只在 type：‘value’中才有效。 是否是脱离 0 值比例 true：坐标刻度不会强制包含零刻度。
position: 'right', // 轴线位置，靠紧某一侧 left or right
boundaryGap : false, // true: 刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
axisLine: { onZero: false, lineStyle: { color : '#263247', } }, // 同上
axisTick: { show: false, }, // 同上 刻度不显示
axisLabel: { color : '#7286a5', }, // 刻度线标签文本设置
splitLine: { show: true, lineStyle: { color: '#263247' } }, // y轴在图表区域展示分割线，y轴为横线
axisPointer: { z: 100 } // y轴深度，最上层
},
{
scale: true,
position: 'right',
gridIndex: 1, // 默认为0时，位列y轴所在索引第一位，此时为第二个表所以索引为1.
splitNumber: 1, // 区域展示分割数，默认 5 分割五块
boundaryGap : false, // true: 刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
axisLine: { onZero: false, lineStyle: { color : '#263247', } }, // 坐标轴轴线相关设置。
axisTick: { show: false }, // 同上 刻度不显示
axisLabel: { show: false, color : '#7286a5', }, // 刻度线标签文本设置
splitLine: { show: true, lineStyle: { color: '#263247' } }, // y轴在图表区域展示分割线，y轴为横线
axisPointer: { z: 100 } // y轴深度，最上层
}
],
dataZoom: [ // 图表的可拉缩控件
{
show: false,
type: 'inside',
xAxisIndex: [0, 1],
start: 98,
end: 100
},
{
show: false,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 98,
end: 100
}
],
series: [
{
name: coinName,
type: 'candlestick',
data: data.values,
large: true,
barMaxWidth: 20,
itemStyle: {
normal: {
color: upColor,
color0: downColor,
borderColor: null,
borderColor0: null
}
},
},
{
name: 'MA05',
type: 'line',
data: calculateMA(5, data),
smooth: true,
symbol: 'none',
showSymbol: false, // 展示线性图表中的链接点
itemStyle: {
normal: {
color: '#f1dc9c',opacity: 1}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
symbol: 'none', // 线性图表中的链接点样式 'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
showSymbol: false, // 展示线性图表中的链接点
itemStyle: {
normal: { color: '#7fcec0', opacity: 1}
}
},
// {
// name: 'MA20',
// type: 'line',
// data: calculateMA(20, data),
// symbol: 'none', // 线性图表中的链接点样式 'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
// showSymbol: false, // 展示线性图表中的链接点
// smooth: true,
// itemStyle: {
// normal: { color: '#3d80cd', opacity: 1}
// }
// },
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
symbol: 'none', // 线性图表中的链接点样式 'emptyCircle' 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
showSymbol: false, // 展示线性图表中的链接点
smooth: true,
itemStyle: {
normal: { color: '#c294f7', opacity: 1}
}
},
{
name: '交易量',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.volumes,
barMaxWidth: 20,
itemStyle: {
normal: {
color: function(params) {
var colorList;
if (data.volumes[params.dataIndex][2] < 0) {
colorList = '#c15465';
} else {
colorList = '#4daa90';
}
return colorList;
},
}
}
}
],
}, true);
myChart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 0
}
]
});
// });;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>