Nybble Processing Mainframe

    vue-echarts3

    1.0.3 • Public • Published

    vue-echarts3

    npm npm

    基于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

    npm

    Install

    npm i vue-echarts3

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • bigang.ybg