vue2.0_在vue中使用echarts图表插件

说明：本例子基于vue-cli脚手架搭建

首先，安装echarts依赖

npm install echarts -S

注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。

//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

在main.js中全局引入

//引入echarts
import echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

example.vue中

html部分

<template>
  <div id="container">
    <!--图表容器-->
    <div id="newCharts"></div>
  </div>
</template>

css部分

<style lang="scss" scoped>
  #container {
   
    width: 100%;
    height: 100vh;
    padding-top: 100px;
    #newCharts