我正在尝试制作一个时间小部件，并查看股市上我最喜欢的股票。
经过一番搜索后，我正在使用 echarts，它似乎是迄今为止最好的。
但是echarts网站上的示例中的图表应该是完整的，因为根据定义，它们应该有实心蜡烛、空心蜡烛以及彩色蜡烛。
来自维基百科（如果您想了解更多，请参阅链接）
实心蜡烛表示当前收盘价低于当前开盘价。
空心蜡烛表示当前收盘价大于当前开盘价。
红色蜡烛表示当前收盘价低于前收盘价。
绿色蜡烛表示当前收盘价大于前收盘价。
那么如何制作这样的图表
https://echarts.apache.org/examples/en/editor.html.....
蜡烛有实心和空心的吗？
而且我还想知道如何让所有体积都具有一种颜色（例如：天蓝色）（蜡烛和体积都在同一个网格上，而不是 2 个网格）。
附注 我还想指出（如果 echarts 的任何创建者读到的话），成交量有时是一种与上涨或下跌不对应的颜色（例如，如果股票上涨，它可能会是红色的）。
solidhollowseries-candlestick.itemStyleitemStyle: {
color: 'transparent', // Hollow candle (upward movement)
color0: '#00da3c', // Solid candle (downward movement)
borderColor: '#00da3c', // Border for hollow candles (upward movement)
borderColor0: '#ec0000' // Border for solid candles (downward movement)
}
series-bar.itemStyle{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: 'azure', // Set all volumes to the same color
},
}
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
var option
const upColor = '#00da3c'
const downColor = '#ec0000'
var rawData = [["2004-01-02",10452.74,10409.85,10367.41,10554.96,168890000],["2004-01-05",10411.85,10544.07,10411.85,10575.92,221290000],["2004-01-06",10543.85,10538.66,10454.37,10584.07,191460000],["2004-01-07",10535.46,10529.03,10432,10587.55,225490000],["2004-01-08",10530.07,10592.44,10480.59,10651.99,237770000],["2004-01-09",10589.25,10458.89,10420.52,10603.48,223250000],["2004-01-12",10461.55,10485.18,10389.85,10543.03,197960000],["2004-01-13",10485.18,10427.18,10341.19,10539.25,197310000],["2004-01-14",10428.67,10538.37,10426.89,10573.85,186280000],["2004-01-15",10534.52,10553.85,10454.52,10639.03,260090000],["2004-01-16",10556.37,10600.51,10503.7,10666.88,254170000],["2004-01-20",10601.4,10528.66,10447.92,10676.96,224300000],["2004-01-21",10522.77,10623.62,10453.11,10665.7,214920000],["2004-01-22",10624.22,10623.18,10545.03,10717.4,219720000],["2004-01-23",10625.25,10568.29,10490.14,10691.77,234260000],["2004-01-26",10568,10702.51,10510.44,10725.18,186170000],["2004-01-27",10701.1,10609.92,10579.33,10748.81,206560000],["2004-01-28",10610.07,10468.37,10412.44,10703.25,247660000],["2004-01-29",10467.41,10510.29,10369.92,10611.56,273970000],["2004-01-30",10510.22,10488.07,10385.56,10551.03,208990000],["2004-02-02",10487.78,10499.18,10395.55,10614.44,224800000],["2004-02-03",10499.48,10505.18,10414.15,10571.48,183810000],["2004-02-04",10503.11,10470.74,10394.81,10567.85,227760000],["2004-02-05",10469.33,10495.55,10399.92,10566.37,187810000]]
myChart.setOption(
(option = {
dataset: {
source: rawData,
},
animation: false,
legend: {
bottom: 10,
left: 'center',
data: ['Dow-Jones index']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
]
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
}
}
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax'
},
{
type: 'category',
gridIndex: 1,
boundaryGap: false,
axisLine: { onZero: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
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 }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 0,
end: 100
},
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 0,
end: 100
}
],
series: [
{
name: 'Dow-Jones index',
type: 'candlestick',
itemStyle: {
color: 'transparent', // Hollow candles (upward movement)
color0: upColor, // Solid candles (downward movement)
borderColor: upColor, // Border color for upward movement
borderColor0: downColor // Border color for downward movement
}
},
{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: 'azure' // Uniform volume color
}
}
]
})
)<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px; height: 400px;"></div>series-candlestick.itemStylecolorcolor0borderColorborderColor0series-bar.itemStylecolor