Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.