Document entry: echarts.apache.org/zh/tutorial…

A, js introduction

1. Access the bootCDN and search for Echarts.

Use 4.7.0 version

Imported directly as script tags

You can then use window.echarts

2. In the case of webpack and parcel

Create a

Check to see if a parcel already exists

yarn add echarts
Copy the code

Then I’ll introduce echarts into my JS file,

The console has a print indicating that the installation is successful

Next, install an Echarts type, which is useful

yarn add --dev @types/echarts
Copy the code

Second, use Echart

Copy the contents of the document directly

1. Prepare a DOM container to install Chart, and set the width and height of the container.

<body>
    <! -- Prepare a DOM with size (width and height) for ECharts
    <div id="main" style="width: 600px; height:400px;"></div>
</body>
Copy the code

Second, you can then initialize an echarts instance using the echarts.init method and generate a simple bar graph using the setOption method.

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <! Echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <! -- Prepare a Dom with size (width and height) for ECharts
    <div id="main" style="width: 600px; height:400px;"></div>
    <script type="text/javascript">
        // Initializes the echarts instance based on the prepared DOM
        var myChart = echarts.init(document.getElementById('main'));

        // Specify the chart configuration items and data
        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]]}};// Display the chart using the configuration items and data you just specified.
        myChart.setOption(option);
    </script>
</body>
</html>
Copy the code

Effect:

2. Echart updates data

Re-setoption can be.

So how to use ICONS in VUE is to encapsulate a component.

In addition to Echarts, data visualization JS libraries also include D3, three.js.