Vue use Echarts

Echarts is an open source visual chart library based on JavaScript, which has a variety of ICONS, to meet our daily development needs, for the first contact with VUE white, Echarts is more commonly used, documentation is clear

1. Download Echarts in the VUE project

npm i echarts -S 
Copy the code

2. The introduction of echarts

var echarts = require("echarts"); 
Copy the code

3. In the HTML

 <div id="box"  style="width: 800px; height: 400px"></div>
Copy the code

4. Initialize echarts

var myChart = echarts.init(document.getElementById("box"));
Copy the code

5. Specify the configuration items for the diagram

var option = {
  title: {
    text: "Getting started with ECharts",},tooltip: {},
  legend: {
    data: ["Sales"],},xAxis: {
    data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"],},yAxis: {},
  series: [{name: "Sales".type: "bar".data: [5.20.36.10.10.20],},]};Copy the code

6. Display the chart using the configuration items and data you just specified

 myChart.setOption(option);
Copy the code

The general steps are: download – import – initialize – specify configuration items – display chart, in addition,It makes sense to familiarize yourself with a component library’s API documentation