官網很多列子有時候少數據就不知道要做出效果只需加那些配置，多余的去除后又容易報錯，下面來看一下怎么做的
先看效果如下：
最主要需要注意的地方就是：
1、grid，xAxis，yAxis，series都要各自設置蠟燭圖的成交量的柱狀圖的，缺一不可，需要寫這2個類型的。
2、要使下面成交量的柱狀圖與上面蠟燭圖的顏色一致需要設置visualMap視覺映射組。
3、要修改划過顯示的為中文或者不是默認的字需要修改formatter，
4、tooltip里設置formatter要與grid和xAxis等在同一級，放在series里設置是不起作用的
html如下
<div id="main" style="width: 1200px;height: 500px;"></div>
script如下
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var upColor = '#ec0000';//紅漲
var downColor = '#00da3c';//綠跌
var dataTime=["2004-01-02", "2004-01-05","2004-01-06", "2004-01-07", "2004-01-08","2004-01-09", "2004-01-12", "2004-01-13", "2004-01-14", "2004-01-15",];//時間
var dataMes=[//蠟燭圖數據
[
10452.74,
10409.85,
10367.41,
10554.96
], [
10411.85,
10544.07,
10411.85,
10575.92
], [
10543.85,
10538.66,
10454.37,
10584.07
], [
10535.46,
10529.03,
10432,
10587.55
], [
10530.07,
10592.44,
10480.59,
10651.99
], [
10589.25,
10458.89,
10420.52,
10603.48
], [
10461.55,
10485.18,
10389.85,
10543.03
], [
10485.18,
10427.18,
10341.19,
10539.25
], [
10428.67,
10538.37,
10426.89,
10573.85
], [
10534.52,
10553.85,
10454.52,
10639.03
],
]
var volumeNum=[ 168890000,221290000,191460000, 225490000,237770000, 223250000,197960000,197310000,186280000,260090000];//交易量
var volumeData=[]//交易量添加顏色判斷
for (var i = 0; i < dataMes.length; i++) {
//console.log("開盤價"+dataMes[i][0])
//console.log("收盤價"+dataMes[i][1])
volumeData.push([dataTime[i], volumeNum[i], dataMes[i][0] > dataMes[i][1] ? 1 : -1]);
//第一個代表時間，第二個代表成交量的值，第三個判斷顏色1為綠色-1為紅色
}
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
link: {xAxisIndex: 'all'},//上下划過分開展示還是一起展示
},
textStyle: {
color: '#000'
},
formatter: function (params) {//修改鼠標划過顯示為中文
if(params[0].componentSubType=="candlestick"){//先划過蠟燭圖
var params1 = params[0];//開盤收盤最低最高數據匯總
var params2 = params[1].data[1];//成交量數據
}else if(params[0].componentSubType=="bar"){//先划過成交量
var params1 = params[1];//開盤收盤最低最高數據匯總
var params2 = params[0].data[1];//成交量數據
}
var currentItemData = params1.data;//k線數據
return params1.name + '<br>' +
'開盤價:' + currentItemData[1] + '<br>' +
'收盤價:' + currentItemData[2] + '<br>' +
'最低價:' + currentItemData[3] + '<br>' +
'最高價:' + currentItemData[4] + '<br>' +
'成交量:' + params2
}
// extraCssText: 'width: 170px'
},
axisPointer: {
link: {xAxisIndex: 'all'},//整體划過還是單個划過
label: {
backgroundColor: '#777'
}
},
visualMap: {//視覺映射組，就是將數據映射到視覺元素
show: false,
seriesIndex: 1,//指定取哪個系列的數據，第幾個圖形的數據，從0開始，1代表的是成交量的柱狀圖
pieces: [{//自定義『分段式視覺映射組件』的每一段的范圍，以及每一段的文字，以及每一段的特別的樣式
value: 1,//value值為1則用downColor顏色的樣式
color: downColor
}, {
value: -1,
color: upColor
}]
},
grid: [
{//蠟燭圖的位置
left: '10%',
right: '8%',
height: '50%'
},
{//成交量柱狀圖的位置
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{//蠟燭圖的設置
type: 'category',
data: dataTime,
scale: true,
//boundaryGap: false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100
},
},
{//成交量柱狀圖的設置
type: 'category',
gridIndex: 1,
data: dataTime,
scale: true,
//boundaryGap: false,
axisLine: {onZero: false},
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {show: false}
}
],
series: [{//蠟燭圖的設置
type: 'candlestick',
data: dataMes,
barWidth : 30,//圖形的寬度
itemStyle: {
color: upColor,
color0: downColor,
borderColor: null,
borderColor0: null
},
},
{//成交量柱狀圖的設置
name: 'Volume',
type: 'bar',
barWidth : 30,//柱狀圖的寬度
xAxisIndex: 1,
yAxisIndex: 1,
data: volumeData
}
]
};
option && myChart.setOption(option);
如有其他需要可以查看官網的例子地址如下：https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush