vue中引入Echarts

vue中引入Echarts

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

官方网址：https://echarts.apache.org/zh/index.html

引入

1.从npm获取echarts

输入npm指令将依赖下载到项目中的node_modules目录

npm install echarts --save

2.在main.js全局引入echarts

import echarts from 'echarts'	//v4版本
import * as echarts from 'echarts' //v5版本
如果引入echarts的代码但在页面中不显示，主要就是对应版本引入方式不同导致的
Vue.prototype.$echarts = echarts

3.在vue页面中创建div节点并通过id绑定到初始化echarts实例中去

<template>
  <div class="app-container">
    <div class="the-container">
      <!--      对div节点设置样式-->
      <div id="myChart" :style="{width: '500px', height: '500px'}" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
    }
  },
  mounted() {
    // 模版渲染后调用绘制图表的方法
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        // 标题
        title: { text: 'Echarts入门示例' },
        // 提示框组件
        tooltip: {},
        // x轴
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        // y轴
        yAxis: {},
        // 系列，用于管理数据
        series: [{
          // 图例的名字
          name: '销量',
          // 图像类型
          type: 'bar',
          // 数值
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
}

</script>

<style scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    background-color: #FFF;
    padding: 20px;
  }
</style>