function SetOption (data) {
Let Datavolume=volumechartdata;
var option = {
Title: {
Text: ' Volume ',
Subtext: ' Purely fictional '
},
ToolTip: {
Trigger: ' axis '
},
Legend: {
data:[' latest deal price ']
},
Toolbox: {
Show:true,
Feature: {
DataView: {Readonly:false},
Restore: {},
Saveasimage: {}
// }
// },
Toolbox: {
Show:false,
},
Grid: {
Left: ' 5px ',
Right: ' 5px ',
Top: ' 10px ',
Bottom: ' 10px ',
Containlabel:true
},
Datazoom: [{
TextStyle: {
Color: ' #8392A5 '
},
By adding this code, you can update the data like a candlestick.
Handleicon: ' m10.7,11.9v-1.3h9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3, 8.8-4.4,8.8-9.4c19.5,16.3,15.6,12.2,10.7,11.9z m13.3,24.4h6.7v23h6.6v24.4z m13.3,19.6h6.7v-1.4h6.6v19.6z ',
Handlesize: ' 80% ',
Databackground: {
Areastyle: {
Color: ' #8392A5 '
},
LineStyle: {
opacity:0.8,
Color: ' #8392A5 '
}
},
Handlestyle: {
Color: ' #fff ',
Shadowblur:3,
Shadowcolor: ' rgba (0, 0, 0, 0.6) ',
Shadowoffsetx:2,
Shadowoffsety:2
}
}, {
Type: ' Inside '
}],
Datazoom: [
//// {
Show:true,
start:94,
end:100
//// },
//// {
Type: ' Inside ',
start:94,
end:100
//// },
//// {
Show:true,
yaxisindex:0,
FilterMode: ' Empty ',
Width:30,
Height: ' 80% ',
Showdatashadow:false,
Left: ' 93% '
//// }
// ],
Xaxis: [
{
Type: ' Category ',
Boundarygap:true,
Data:dataVolume.time
}
],
YAxis: [
{
Type: ' Value ',
Scale:false,
Name: ' Volume ',
}
],
Series: [
{
Name: ' Volume ',
Type: ' Bar ',
Data:dataVolume.prices
}
]
};
return option
}
Dynamically update Echart volume histogram, and do not redraw, similar to the Update method of the Candlestick