Vue项目中使用echarts并封装成组件

简单介绍

echarts是非常强大的数据可视化插件，经常用来进行图表展示，本文介绍将echarts进行vue组件化封装并使用

基础配置

• 标题 title

  text（String）: 标题名

  left（Number）: 水平位置

  top（Number）: 垂直位置

  textStyle（Object）: 标题样式

• 提示工具 tooltip

  trigger（String） : ‘item’ 数据项触发，’axis’ 坐标轴触发

  formatter : 提示的格式

• 系列列表 series

  type（String）: 图标类型

  name（String）: 名称

  center（Array）: 图标渲染位置坐标

  data（Array）: 数据数组

  itemStyle（Object）: 每项的样式

使用步骤

1. Install echarts (安装)

npm install echarts -S

2. 组件封装 （饼图为例）

<template>
  <div ref="dom" class="charts-pie"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ChartsPie',
  data () {
    return {
      dom: null
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.drawing()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    drawing () {
      let legendData = this.data.map(item => item.name)
      let options = {
        // 标题
        title: {
          text: this.title,
          left: 'center',
          top: 15,
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        // 工具提示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 图例说明
        legend: {
          show: true,
          orient: 'vertical',
          left: 10,
          top: 20,
          itemWidth: 25,
          itemHeight: 15,
          itemGap: 5,
          data: legendData,
          textStyle: {
            color: '#aaa',
            fontSize: 12
          }
        },
        // 颜色配置
        color: ['#2d8cf0', '#19be6b', '#ff9900', '#e46cbb', '#9a66e4'],
        // 类型配置
        series: [
          {
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontSize: 14,
                  formatter: '{c} ({d}%)'
                },
                labelLine: {
                  show: true
                }
              }
            },
            name: '访问来源',
            // 类型配置
            type: 'pie',
            radius: '70%',
            center: ['52%', '55%'],
            // 数据配置
            data: this.data
          }
        ]
      }
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(options)
      window.addEventListener('resize', this.resize)
    }
  }
}
</script>

3. 组件使用

<template>
  <ChartsPie :title=text :data="chartsPieData"/>
</template>
<script>
import ChartsPie from '../components/Charts/ChartsPie'
export default {
  data () {
    return {
      text: '用户访问来源',
      chartsPieData: [
        { value: 1920, name: '直接访问' },
        { value: 1169, name: '邮件营销' },
        { value: 986, name: '联盟广告' },
        { value: 621, name: '视频广告' },
        { value: 3256, name: '搜索引擎' }
      ]
    }
  }
}
</script>

4. 效果展示