echarts-middleware

在vue中优雅，高效的使用echarts

2018年7月6日更新 可以自动检测图表数据变化

快速上手

安装

npm install -save echarts
npm install -save echarts-middleware

引入并注册

<script>
  import 'echarts'
  import Chart from 'echarts-middleware'
  export default {
    components: {
      Chart
    }
  }
</script>

使用

<template>
  <div class="my-chart">
    <Chart v-model="mock" :size="{w: 400, h: 400}"></Chart>
  <div>
</template>

<script>
  import Chart from 'echarts-middleware'
  export default {
    components: {
      Chart
    },
    data () {
      return {
        mock: {
          'series': [{
            'name': 'gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}'},
            'data': [{'value': 34}]
          }]
        }
      }
    }
  }
</script>

结果

参数

| 参数名     | 含义         | 类型  | 是否必须 | | ----------- |:-------------:| -----:| -----:| |value| 图表的配置 | Object | true | |size| 图表的宽高| Object | false | |theme| 主题| String, Object | false | |renderer| 渲染器| String | false |

事件

| 事件名       | 触发情况         | 返回值类型  | | ----------- |:-------------:| -----:| |init| 图表注册完成 | echartsInstance(Echart实例) |

使用实例：

<Chart v-model="data" :size="{w: 400, h: 400}"></Chart>

注:如果 w h 参数没有设置，组件会以父组件宽高作为组件宽高， 如果父组件没有宽高则会以400px作为宽高。

组件特点

• 高效: 直接将echarts实例暴露给vue,可以直接操作
• 优雅: 自动处理echarts的 注册、重新赋值 及 销毁 操作
• 简洁: 主要代码少于50行 没有性能损失
• 接口丰富: 由于直接暴露 echarts实例 所以理论上能用 100% echarts方法

简单对比

传统vue中使用echarts

<template>
  <div class="box">
    <div class="charts" v-for="item in 6" :id="'chart' + item" :key="item"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  let myChart = []
  export default {
    data () {
      return {
        mock: {
          'series': [{
            'name': 'gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}'},
            'data': [{'value': 34}]
          }]
        }
      }
    },
    created () {
      for (let i = 0; i < 6; i++) {
        myChart[i] = echarts.init(document.getElementById('chart' + i))
        myChart[i].setOption(this.mock)
      }
    },
    beforeDestroy () {
      for (let i = 0; i < 6; i++) {
        myChart[i].dispose()
      }
    }
  }
</script>

使用echarts-middleware达到同样的效果

<template>
  <div class="box">
    <Chart v-for="item in 6" v-model="mock" :key="item"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import Chart from 'echarts-middleware'
  export default {
    components: {
      Chart
    },
    data () {
      return {
        mock: {
          'series': [{
            'name': 'gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}'},
            'data': [{'value': 34}]
          }]
        }
      }
    }
  }
</script>

获取Echarts对象的方法

1.使用init事件取得Echarts实例

<template>
  <div>
    <Chart v-model="mock" :size="{w: 400, h: 400}", @init="chartInit"></Chart>
    <button @click="click">销毁图表</button>
  </div>
</template>
<script>
  import Chart from 'echarts-middleware'
  export default {
    components: {
      Chart
    },
    data () {
      return {
        chart: null,
        mock: {
          'series': [{
            'name': 'gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}'},
            'data': [{'value': 34}]
          }]
        }
      }
    },
    methods: {
      // 图表初始化完毕后的回调
      chartInit (chart) {
        this.chart = chart
      },
      click () {
        console.log('输出echarts对象', this.chart)
        console.log('销毁echarts图表')
        this.chart.dispose()
      }
    }
  }
</script>

支持的方法，理论支持echarts所有方法，具体方法列表请查阅 API文档