echarts中文官网新版本：Documentation - Apache ECharts

echarts中文官网旧版本（具有详细的echarts属性介绍）：Documentation - Apache ECharts

一、安装echarts

• 必须安装的插件： 

npm i echarts -S

• 若想按照正常的组件引用方式 来引入echarts，需再安装vue-echarts

npm i vue-echarts -S

vue-echarts是基于echarts封装实现的一个组件库，直接按照正常的组件引用方式，安装引用即可 

二、引入

2.1 全局引入

（1）在main.js中配置

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

（2）在echarts.vue文件中使用

<div id="myChart" :style="{width: ‘300px‘, height: ‘300px‘}"></div>

<script>
export default {
    name: ‘eCharts‘,
    data () {
        return {
        msg: ‘Welcome to Your Vue.js App‘
        }
    },
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            var 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>

2.2 按需引入：方式一

如果是在许多页面中都有用到，就写在main.js中：

//引入基本模板
 let echarts = require(‘echarts/lib/echarts‘)
 
// 引入饼状图组件
require(‘echarts/lib/chart/pie‘)
// 引入提示框和title组件，图例
require(‘echarts/lib/component/tooltip‘)
require(‘echarts/lib/component/title‘)
require('echarts/lib/component/legend')
Vue.prototype.$echarts = echarts //引入组件

或者 写在vue文件中 ：

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>

// 引入基本模板
let Echarts = require("echarts/lib/echarts");
// 按需引入需要的组件模块
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");

export default {
  name: "MyChart",
  props: {...},
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = Echarts.init(document.getElementById(this.chartId));
      // 指定图表的配置项和数据
      var option = {...};
      chart.setOption(option);
    }
  }
}
</script>

在组件中使用同2.1，如果只在一个地方使用就直接写在.vue文件中就好啦

注：这里用 require 不用 import 引入是因为 import 需要详细的路径

2.3 按需引入：方式三（用到了vue-echarts插件）

在入口文件main.js中引入：

// 引入vue-echarts组件库
import ECharts from 'vue-echarts'
// 按需引入需要的组件模块
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
// 注册组件后即可使用
Vue.component('chart', ECharts)

然后在MyChart.vue组件中使用，内容如下：

<template>
  <div>
    <chart ref="chart" :options="chartOptions" :auto-resize="true"></chart>
  </div>
</template>

<script>
export default {
  name: "MyChart",
  data() {
    return {
      chartOptions: {}
    };
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    getOptions() {
      this.chartOptions = {
        title: {
          text: "一周价格走势"
        },
        tooltip: {},
        legend: {
          data: ["价格"]
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "价格",
            data: [220, 202, 231, 243, 225, 220, 213],
            type: "line",
            smooth: true
          }
        ]
      }
    }
  }
}
</script>

 详细参考：

(20条消息) Vue中引入Echarts封装组件的两种方式（全局引入和按需引入）_hufi的博客-CSDN博客

三、vue中使用echarts自定义主题

一、引入 echarts 主题的 js

在main.js里引入 echarts 主题的 js（一般在  node_modules---echarts---theme---macarons.js）

theme里边有各种各样的主题，任意选一种，例如：主题macarons，然后引入：

import 'echarts/theme/macarons.js'
// 或者
require('echarts/theme/macarons')

二、在echarts初始化时，使用主题macarons

let myChart = echarts.init(document.getElementById('myChart'), 'macarons');