preface

  • ECharts is a JavaScript based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. ECharts

  • Compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and compatible with a variety of devices, can be displayed anytime, anywhere.

  • The bottom layer relies on the lightweight Canvas class library ZRender, based on BSD original protocol, which is a very excellent visual front-end framework.

ECharts download

1. Select the appropriate download version from the official website: Apache ECharts

Two, the use of steps

1. Introduce the echarts.js class library

<script src='echarts.min.js'></script>
Copy the code

2. Create a simple bar chart

Var div = document.querySelector('div'); Var myCharts = echarts.init(div); Var xDataArr = [' zhang ', 'bill', 'Cathy', 'RunTu', 'xiao Ming', 'moutai']. var yDataArr = [88, 72, 32, 58, 94, 53]; Var option = {title: {text: 'language score ', textStyle: {color: 'green'}, borderWidth: 5, borderColor: 'blue', borderRadius: 5 }, xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [{ name: 'text ', type: 'bar', color: 'pink', data: yDataArr}]} // Set the configuration item to the Echars instance mychart.setoption (option); </script>Copy the code

3. Running result