1. Introduction

ECharts is an open source visualization library implemented in JavaScript that covers industry charts for a variety of needs.

Example 2.

2.1 The example is the statistics of “Domestic Novel Coronavirus data”,

Interfaces are from network interfaces: interfaces 1 and 2

2.2 Example Screenshot:

Graph one:

Figure 2:

2.3 Project source code:

Click to view

3. How to use Echarts in Vue

3.1 installation

/ / amend the NPM download source to taobao mirror: NPM config set registry at https://registry.npm.taobao.orgNPM install echarts --save or CNPM install echarts --saveCopy the code

3.2 the use of

Introduce:

<template>
    <div id="main" style="height:600px; width:500px;"></div>
</template>
<script>
import * as echarts from "echarts"

export default {
  name: 'Home'.data(){
    return{
      provinceData:provinceData,
      province:""}},mounted(){
      this.initChart();
  },
  methods: {initChart() {
      let myChart = echarts.init(document.getElementById('main'));
       let options = {
          // Echarts configuration items
       }
       // Mount to the DOM element
       myChart.setOption(options)
    }
  }
}
</script>
Copy the code

Description: in the introductionechartsWhen, if usedimport echarts from "echarts"An error is reported at this time

Import * as echarts from “echarts”.

So that’s all about using Echarts in Vue.

Remember to click add follow!!