Vue(vue-cli)组件中使用echarts图表框架

官方文档（配置项）

官方文档（教程）

官方文档（API）

1.在项目中安装依赖

• npm安装

npm install echarts --save

npm install echarts -S

• cnpm 淘宝镜像安装（速度更快）

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

2.全局引入echarts，在mian.js中：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

• 如图：

3.写代码，在xxx.vue中

1.在template标签中放两个有宽高的div来装图标

<template>
  <div>
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    <div id="container" :style="{width: '870px', height: '290px'}"></div>
  </div>
</template>

2.script标签中methods中写画图表的方法

<script>
export default {
   
  name: 'HelloWorld',
  mounted () {