Eecharts_v2 NPM

eecharts_v2

eecharts_v2是基于echarts和vue2.0封装的一些常用图表和简易的动画效果，关于它的使用方法和支持属性请参考下文，唯一值得注意的是，在使用它之前您需要先行下载echarts

Install

下载安装
在下载安装之前您需要先行下载echarts并确保它是在5.0.0之上否则您将无法使用

npm install echarts --save

npm install eecharts_v2 --save

图形支持

饼图
- 基础图
- 基础圆角图
- 环形图
- 圆角环形图
- 南丁格尔图
柱状图
- 基础柱状图
- 基础条形图
- 电池效果柱状图
- 电池效果条形图
折线图
- 基础折线图
雷达图
- 基础雷达图

公共参数说明

参数	类型	说明
datas	Array	数据源，需要展示的数据
config	Object	配置项，自定义配置和快速配置
gradient	Boolean	渐变色，区域填充色，默认为false不启用渐变色

datas

说明：数据源
类型：Array 一维数组或二维数组

<组件名 :datas="dataSet" :config="config"></组件名>

<script>
export default{
    data() {
        return {
           // 数据源 一维数组格式
           dataSet: [
               // 每项必定包含title, name, value字段
               {title: 'xxx', name: 'xxx1', value: 100},
               {title: 'xxx', name: 'xxx2', value: 85},
               {title: 'xxx', name: 'xxx3', value: 95}
           ],
           // 数据源 二维数组格式
           datas: [
               [{title: 'xx', name: 'xxxx', value: 25}, ...]
               [{title: 'xx1', name: 'xxxx', value: 25}, ...]
           ]
        }
    }
}
</script>

config

config结构展示

export default {
    config: {
        fast: {
            // 快速配置项
        },
        // 自定义配置项
    }
}

config.fast快速配置项参数

opacity
- 作用：不透明度调整
- 类型：Number | String
- 说明：区域填充色不透明度由 0 - 1
areaColor
- 作用：自定义区域填充色
- 类型：Array | Null
- 说明：为null时相当于不透明度为0，填充色为透明，数组长度小于数据长度，多出的将随机生成色彩补充
animation
- 作用：启用动画效果
- 类型：Array | Boolean
- 说明：为true时开启全部动画，数组则启用数组内的动画
- 参数：highlight 高亮，select 切换选中数据，legend 图列选中切换，tooltip 悬浮提示框
animationTime
- 作用：控制动画切换间隔时间
- 类型：Number
- 说明：用于控制animation定时切换的间隔时长，默认1500 即1.5秒

饼图

图形支持(type)
- 基础图 Basic graphics
- 基础圆角图 Basic graphics of Rounded
- 环形图 Doughnut Chart
- 圆角环形图 Doughnut Chart with Rounded Corner
- 南丁格尔图 Nightingale Chart

参数支持

参数	类型	说明
datas	Array	数据源，需要展示的数据，必传
config	Object	配置项，自定义配置和快速配置，必传
gradient	Boolean	渐变色，区域填充色，默认为false不启用渐变色，非必传
type	String	图形，切换支持的图形样式，非必传

datas

<pie-graph :datas="dataSet"></pie-graph>

<script>
export default{
    data() {
        return {
            dataSet: [
                {title: '汽车类型统计', name: '新能源', value: 150},
                {title: '汽车类型统计', name: '混合动力', value: 116},
                {title: '汽车类型统计', name: '燃油', value: 326}
            ]
        }
    }
}
</script>

标题：数据源
类型：Array
点此前往查看说明

config

<pie-graph :config="config"></pie-graph>

<script>
export default{
    data() {
        return {
            config: {
                fast: {
                    // 快速配置
                    isTitle: true,
                    opacity: 0.5
                },
                // 自定义
            }
        }
    }
}
</script>

config.fast快速配置项
- isTitle
  - 作用：标题控制
  - 类型：Boolean
  - 说明：标题显示与隐藏
- opacity 填充色不透明度调整
- areaColor 自定义区域填充色
- animation 动画效果
- animationTime 动画效果间隔时间
config.xx自定义配置项
- 除fast参数之外其余配置项参考官方配置说明列：title,grid,legend,xAxis等
- 点我前往配置项手册

gradient

<pie-graph :gradient="true"></pie-graph>

标题：随机色渐变控制
类型：Boolean
作用：控制随机生成的填充色，是否为渐变色，默认未false
说明：非必传

type

<pie-graph type="ring"></pie-graph>

标题：图形切换
类型：String
默认值：ring
可选值：
- basis 基础图
- basisRing 基础圆角图
- ring 环形图
- gapRing 圆角环形图
- rose 南丁格尔图

柱状图

参数支持

参数	类型	说明
datas	Array	数据源，需要展示的数据，必传
config	Object	配置项，自定义配置和快速配置，必传
gradient	Boolean	渐变色，区域填充色，默认为false不启用渐变色，非必传
type	String	图形，切换支持的图形样式，非必传
scroll	Boolean	视图可拖动放大缩小，解决数据过多显示拥挤，默认不开启，非必传

datas

<columnar-graph :datas="dataSet" type="cell"></columnar-graph>

<script>
export default{
    data() {
        return {
            // type = cell, xcell datas为一维数组
            dataSet: [
                {title: '标题', name: '电池图1', value: 11},
                ...
            ],
            // type != cell, xcell 应该传递二维
             datas: [
                [
                	{title: '标题1', name: '非电池图', value: 11},
            		{title: '标题1', name: '非电池图2', value: 15},
            	],
                [
                	{title: '标题2', name: '非电池图', value: 13},
            		{title: '标题2', name: '非电池图2', value: 14},
            	], 
            ]
        }
    }
}
</script>

标题：数据源
类型：Array
备注：用于数据表示的每一项值都应包含title, name, value三个字段
点此前往查看说明

config

<columnar-graph :config="config"></columnar-graph>

<script>
export default{
    data() {
        return {
            config: {
                fast: {
                    // 快速配置
                },
                // 自定义
            }
        }
    }
}
</script>

config.fast快速配置项
- opacity 填充色不透明度调整
- areaColor 自定义区域填充色
- animation 动画效果
- animationTime 动画效果间隔时间
- wrap
  - 说明：文字换行
  - 类型：Number
  - 备注：解决X轴文字过多显示不全问题，默认不开启，非必传，若传入的是4，则第四个字后面的字会发生换行
config.xx自定义配置项
- 除fast参数之外其余配置项参考官方配置说明列：title,grid,legend,xAxis等
- 点我前往配置项手册

gradient

<columnar-graph :gradient="true"></columnar-graph>

标题：随机色渐变控制
类型：Boolean
作用：控制随机生成的填充色，是否为渐变色，默认未false
说明：非必传

type

<columnar-graph type="x"></columnar-graph>

标题：图形切换
类型：String
默认值：null
说明：非必传
可选值：
- 不传递type 基础柱状图
- x 条形图
- cell 电池图
- xcell 条形电池图

scroll

<columnar-graph :scroll="true"></columnar-graph>

说明：可拖动的柱状图
类型：Boolean
默认值：false
备注：非必传项

折线图

参数支持

参数	类型	说明
datas	Array	数据源，需要展示的数据，必传
config	Object	配置项，自定义配置和快速配置，必传
gradient	Boolean	渐变色，区域填充色，默认为false不启用渐变色，非必传

datas

<line-graph :datas="datas"></line-graph>

<script>
export default{
    data() {
        return {
            // 数据源格式为二维数组
            datas: [
                [{title: 'xx', name: 'xxx-', value: 100}, ...]
                [{title: 'xxx', name: 'xxx-', value: 90}, ...]
            ],
        }
    }
}
</script>

标题：数据源
类型：Array
备注：用于数据表示的每一项值都应包含title, name, value三个字段
点此前往查看说明

config

<line-graph :config="config"></line-graph>

<script>
export default{
    data() {
        return {
            config: {
                fast: {
                    // 快速配置
                },
                // 自定义
            }
        }
    }
}
</script>

config.fast快速配置
- opacity 填充色不透明度调整
- areaColor 自定义区域填充色
- lineColor 自定义折线线条颜色
- animation 动画效果
- animationTime 动画效果间
- wrap
  - 说明：文字换行
  - 类型：Number
  - 备注：解决X轴文本过多显示不全，wrap值相当于换行的长度

gradient

<line-graph :gradient="true"></line-graph>

标题：随机色渐变控制
类型：Boolean
作用：控制随机生成的填充色，是否为渐变色，默认未false
说明：非必传

雷达图

参数支持

参数	类型	说明
datas	Array	数据源，需要展示的数据，必传
config	Object	配置项，自定义配置和快速配置，必传
gradient	Boolean	渐变色，区域填充色，默认为false不启用渐变色，非必传

datas

<randar-graph :datas="datas"></randar-graph>

<script>
export default{
    data() {
        return {
            datas: [
                {title: 'xx', name: 'xxx-', value: 100},
                {title: 'xx', name: 'xxx-', value: 250},
            ],
        }
    }
}
</script>

标题：数据源
类型：Array
备注：用于数据表示的每一项值都应包含title, name, value三个字段
点此前往查看说明

config

<randar-graph :config="config"></randar-graph>

<script>
export default{
    data() {
        return {
            config: {
                fast: {
                    // 快速配置
                },
                // 自定义
            }
        }
    }
}
</script>

config.fast快速配置
- opacity 填充色不透明度调整
- areaColor 自定义区域填充色
- lineColor 自定义外边框颜色
- animation 动画效果
- animationTime 动画效果间
- symbol
  - 说明：指示点形状
  - 类型：String
  - 默认值：circle
  - 可选值： circle, rect, roundRect, triangle, diamond, pin, arrow, none 详情
- shape
  - 说明：雷达图绘制类型
  - 类型：String
  - 默认值：polygon
  - 可选值： polygon 多边形， circle 圆形
- fontColor
  - 说明：自定义文字颜色
  - 类型：String
  - 备注：支持rgba, rgb, 十六进制，英文单词
- lineType
  - 说明：外边框类型
  - 类型：String
  - 默认值：solid
  - 可选值：solid, dashed, dotted
- wrap
  - 说明：文字换行
  - 类型：Number
  - 备注：解决X轴文本过多显示不全，wrap值相当于换行的长度

gradient

<randar-graph :gradient="true"></randar-graph>

标题：随机色渐变控制
类型：Boolean
作用：控制随机生成的填充色，是否为渐变色，默认未false
说明：非必传

Vue vue2 echarts

@infinitebrahmanuniverse/nolb-ee

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

eecharts_v2 v1.1.0

eecharts_v2

目录

Install

图形支持

公共参数说明

datas

config

饼图

参数支持

datas

config

gradient

type

柱状图

参数支持

datas

config

gradient

type

scroll

折线图

参数支持

datas

config

gradient

雷达图

参数支持

datas

config

gradient