Echarts Data Visualization---Getting Started

Echarts data visualization

Chapter 1, Getting Started

1. Installation method

Get it from npm

npm install echarts

2. Introduce Apache Echarts into the project

2. 1 npm install ECharts

npm install echarts --save

2. 2 Introduce ECharts

import * as echarts from 'echarts';

2. 3 Introduce the official echarts example in the project

Copy all to the js part of the vue project mounted

Write a div whose id is main , and set the width and height

 <div id="main" style="width:600px;height:300px"></div>

<script type="text/ecmascript-6">
import Chart from 'echarts'  //引入echarts  后期调用时写Chart....
export default {
    
     
  data() {
    
    
    return {
    
    }
  },  
  mounted() {
    
       //在mounted阶段使用 
    this.getData()
  }, 
  methods: {
    
    
    getData(){
    
    
      var chartDom = document.getElementById('main'); //下面有简化写法
      var myChart = Chart.init(chartDom);
      var option;
        
      option = {
    
    
        xAxis: {
    
    
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
    
    },
        series: [
          {
    
    
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
      // 此系列自己的调色盘。
            color:'#91ca8c',
  
          }
        ]
      };

      option && myChart.setOption(option);
    },
  }
};
</script>

Here is the simplified syntax:

var chartDom = document.getElementById('main'); 
var myChart = Chart.init(chartDom);
var option;

合并写成以下代码：
var myChart = Chart.init(document.getElementById('main'));
var option = {
    
    ........}