【基础知识】Vue中echars使用

一、echarts是什么

Apache ECharts 一个基于 JavaScript 的开源可视化图表库

 

 

二、使用

1、下载包

npm install echarts@5.2.0 --save

2、在main.js中全局引入

// 引入echarts

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

 

3、在echarts.vue中

<template>

  <div>

    <div id="myChart"

         :style="{width: '300px', height: '300px'}"></div>

  </div>

</template>

<script>

export default {

  name: 'hello',

  data () {

    return {

      msg: 'data msg'

    }

  },

  mounted () {

    this.drawLine();

  },

  methods: {

    drawLine () {

      // 基于准备好的dom，初始化echarts实例

      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表

      myChart.setOption({

        title: { text: '在Vue中使用echarts' },

        tooltip: {},

        xAxis: {

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "鞋", "袜子"]

        },

        yAxis: {},

        series: [{

          name: '销量',

          type: 'bar',

          data: [5, 20, 36, 10, 10, 20]

        }]

      });

    }

  }

}

</script>

<style>

</style>

4、疑问：mian.js全局引入和vue页面中requre('echarts')的区别？后边再细看

参考：https://echarts.apache.org/handbook/zh/basics/import

https://blog.csdn.net/qq_34595425/article/details/116308774