vue中通过自定义组件使用echarts

vue中通过自定义组件使用echarts

一 概述

echarts是一款非常优秀的可视化框架，涵盖各行业各类型图表，满足大部分的需求。在vue中也有了成熟的echarts框架，vue-echarts，但由于技术积累等原因，远没有echarts官方类库中的功能强大，在使用echarts的过程中，很多时候，我们都需要定制化的集成echarts图表。

二 步骤

1 安装echarts依赖

npm install echarts -S

2 全局引入echarts

在main.js中引入echarts

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

3 定制echarts组件（以bar图为例）

<template>
  <div :id="id" class="main" :style="{width: '100%', height: height}"></div>
</template>

<script>
  export default {
    name: 'BaseBarChart',
    props: {
      id: {
        type: String,
        default: 'main',
      },
      height: