How to realize histogram by ECharts
This article mainly explains "how to achieve histogram in ECharts". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to achieve histogram in ECharts.
/ / 1. Import JS file
.box {
Width: 400px
Height: 400px
Background-color: pink
}
/ / 3. Initialize echarts instance object
Var myChart = echarts.init (document.querySelector ('.box'))
/ / 4. Specify the configuration items and data for the chart
Var option = {
Title: {
Text: 'ECharts getting started example'
}
Tooltip: {}
Legend: {
Data: ['sales volume']
}
XAxis: {
Data: ['shirt', 'cardigan', 'chiffon shirt', 'trousers', 'high heels', 'socks']
}
YAxis: {}
Series: [{
Name: 'sales volume'
Type: 'bar'
Data: [5, 20, 36, 10, 10, 20]
}]
}
/ / 5. Set to the instance object using the configuration items and data display chart you just specified.
MyChart.setOption (option)
/ / when our browser zooms, the chart is scaled proportionally.
Window.addEventListener ("resize", function () {
/ / Let our chart call the resize method.
MyChart.resize ()
});
Interview questions
What's the difference between DOM0 and DOM2?
When multiple events are bound to a dom element in the DOM0 level, only the last event is valid. Onclick
Multiple events can be bound to a single element in the DOM2 level, and each event can be triggered. AddEventListener
II. The difference between textContent, innerText, innnerHTML and value
TextContent is used to get and set text content. The difference from innerText is that the content package obtained by textContent
Includes the contents of the style tag and the script tag in the element.
InnerText can only get and set text content, not html code.
InnerHTML can get and set the html code
Thank you for your reading, the above is the content of "how to achieve bar chart in ECharts". After the study of this article, I believe you have a deeper understanding of how to achieve bar chart in ECharts, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
