echarts-middleware

在vue中轻巧优雅的使用echarts

Usage no npm install needed!

<script type="module">
  import echartsMiddleware from 'https://cdn.skypack.dev/echarts-middleware';
</script>

README

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文档