vue-echarts3

基于Vue2，echart3封装的图表组件

Features

• 暂支持柱状图、折线图、饼图
• 简单易用

Installation

npm install vue-echarts3 --save

Usages

import Echarts from 'vue-echarts3';

Vue.component('echarts', Echarts);

<echarts
	:title="{'text':'标题'}"
	:options="data"
	:legendShow="['页面PV','页面UV']"
	type="bar"
	className="f-echarts">
</echarts>

柱状图options参数(demo)

	data: {
        legend: {
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        xAxis: [
          {
            type: 'category',
            data: [ '20170201', '20170202', '20170203', '20170204', '20170205', '20170206', '20170207' ]
          }
        ],
        series: [
          {
            name: '页面PV',
            type: 'bar',
            label: 'emphasis',
            data: [ 320, 332, 301, 334, 390, 330, 2 ]
          }
        ]
      }

折线图options参数(demo)

	data: {
        legend: {
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        xAxis: [
          {
            type: 'category',
            data: [ '20170201', '20170202', '20170203', '20170204', '20170205', '20170206', '20170207' ]
          }
        ],
        series: [
          {
            name: '页面PV',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [ 320, 332, 301, 334, 390, 330, 2 ]
          }
        ]
      }

饼图options参数(demo)

	data: {
        legend: {
          orient: 'vertical',
          x: 'left',
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: [ '50%', '70%' ],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '页面PV' },
              { value: 310, name: '页面UV' },
              { value: 234, name: '下载PV' },
              { value: 135, name: '下载UV' },
              { value: 1548, name: '激活量' },
              { value: 548, name: '注册量' }
            ]
          }
        ]
      }

API

config

参数名 | 类型 | 默认值 | 备注 ------------ | ------------- | ------------ | --------- title | Object | - | 图表的标题 className | String | - | 图表容器的样式 legendShow | Array | - | 图表tab数据按照传入值显示，不传该参数默认全部显示 type | String | - | 必填，图表类型，目前柱状图bar，折线图line，饼图pie options | Object | - | 必填，控制图表显示的数据(上方已提供demo) theme | String | - | 图表主题 initOptions | Object | - | 图表初始化参数

function

• clear() 重置图表组件数据
• refresh() 数据变化后，可手动刷新图表组件

Issues

Submit the issues if you find any bug or have any suggestion.

Contribution

Fork the repository and submit pull requests.

Release Notes

see CHANGELOG

LICENSE