blear.ui.chart

1Introduction

• description：JS 图表，基于百度的 ECharts v3.8.5 + Zrender v3.7.4
• author：ydr.me
• create：2017年04月26日11:33:15
• update：2018年04月25日18:38:13
• github：https://github.com/blearjs/blear.ui.chart
• 

2Example

var Chart = require('blear.ui.chart');

var chart = new Chart('#demo');
chart.render(options);

2.1折线图

var Chart = require('blear.ui.chart');

require('blear.ui.chart/src/echarts/chart/line');

require('blear.ui.chart/src/echarts/component/title');
require('blear.ui.chart/src/echarts/component/tooltip');
require('blear.ui.chart/src/echarts/component/legend');

var chart = new Chart('#main');

chart.render({
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
});

2.2柱状图

var Chart = require('blear.ui.chart');

require('blear.ui.chart/src/echarts/chart/bar');

require('blear.ui.chart/src/echarts/component/title');
require('blear.ui.chart/src/echarts/component/tooltip');
require('blear.ui.chart/src/echarts/component/legend');

var chart = new Chart('#main');

chart.render({
    title: {
        text: '一周网站访问情况'
    },
    color: [
        '#3398DB',
        '#db625a'
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '间接访问'],
        right: 0
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '30%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }, {
            name: '间接访问',
            type: 'bar',
            barWidth: '30%',
            data: [210, 152, 20, 134, 130, 230, 420]
        }
    ]
});

2.3饼状图

var Chart = require('blear.ui.chart');

require('blear.ui.chart/src/echarts/chart/pie');

require('blear.ui.chart/src/echarts/component/title');
require('blear.ui.chart/src/echarts/component/tooltip');
require('blear.ui.chart/src/echarts/component/legend');

var chart = new Chart('#main');

chart.render({
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

2.4地图

var Chart = require('blear.ui.chart');

require('blear.ui.chart/src/echarts/chart/map');

require('blear.ui.chart/src/echarts/component/title');
require('blear.ui.chart/src/echarts/component/tooltip');
require('blear.ui.chart/src/echarts/component/legend');
require('blear.ui.chart/src/echarts/component/visualMap');

var chart = new Chart('#main');

Chart.map('china', require('blear.ui.chart/src/maps/china'));

chart.render({
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['iphone3', 'iphone4', 'iphone5']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true
    },
    series: [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: randomData()},
                {name: '天津', value: randomData()},
                {name: '上海', value: randomData()},
                {name: '重庆', value: randomData()},
                {name: '河北', value: randomData()},
                {name: '河南', value: randomData()},
                {name: '云南', value: randomData()},
                {name: '辽宁', value: randomData()},
                {name: '黑龙江', value: randomData()},
                {name: '湖南', value: randomData()},
                {name: '安徽', value: randomData()},
                {name: '山东', value: randomData()},
                {name: '新疆', value: randomData()},
                {name: '江苏', value: randomData()},
                {name: '浙江', value: randomData()},
                {name: '江西', value: randomData()},
                {name: '湖北', value: randomData()},
                {name: '广西', value: randomData()},
                {name: '甘肃', value: randomData()},
                {name: '山西', value: randomData()},
                {name: '内蒙古', value: randomData()},
                {name: '陕西', value: randomData()},
                {name: '吉林', value: randomData()},
                {name: '福建', value: randomData()},
                {name: '贵州', value: randomData()},
                {name: '广东', value: randomData()},
                {name: '青海', value: randomData()},
                {name: '西藏', value: randomData()},
                {name: '四川', value: randomData()},
                {name: '宁夏', value: randomData()},
                {name: '海南', value: randomData()},
                {name: '台湾', value: randomData()},
                {name: '香港', value: randomData()},
                {name: '澳门', value: randomData()}
            ]
        },
        {
            name: 'iphone4',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: randomData()},
                {name: '天津', value: randomData()},
                {name: '上海', value: randomData()},
                {name: '重庆', value: randomData()},
                {name: '河北', value: randomData()},
                {name: '安徽', value: randomData()},
                {name: '新疆', value: randomData()},
                {name: '浙江', value: randomData()},
                {name: '江西', value: randomData()},
                {name: '山西', value: randomData()},
                {name: '内蒙古', value: randomData()},
                {name: '吉林', value: randomData()},
                {name: '福建', value: randomData()},
                {name: '广东', value: randomData()},
                {name: '西藏', value: randomData()},
                {name: '四川', value: randomData()},
                {name: '宁夏', value: randomData()},
                {name: '香港', value: randomData()},
                {name: '澳门', value: randomData()}
            ]
        },
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: randomData()},
                {name: '天津', value: randomData()},
                {name: '上海', value: randomData()},
                {name: '广东', value: randomData()},
                {name: '台湾', value: randomData()},
                {name: '香港', value: randomData()},
                {name: '澳门', value: randomData()}
            ]
        }
    ]
});


function randomData() {
    return Math.round(Math.random() * 1000);
}

3图表

默认不直接支持任何图表和组件，在实际开发中需要按需引入。

// 折线图
require('blear.ui.chart/src/echarts/chart/line');
// 柱状图
require('blear.ui.chart/src/echarts/chart/bar');
// 饼状图
require('blear.ui.chart/src/echarts/chart/pie');
// 散点图
require('blear.ui.chart/src/echarts/chart/scatter');
// 动态散点图
require('blear.ui.chart/src/echarts/chart/effectScatter');
// 雷达图
require('blear.ui.chart/src/echarts/chart/radar');
// 地图
require('blear.ui.chart/src/echarts/chart/map');
// 树图
require('blear.ui.chart/src/echarts/chart/treemap');
// 关系图
require('blear.ui.chart/src/echarts/chart/graph');
// 仪表盘图
require('blear.ui.chart/src/echarts/chart/gauge');
// 漏斗图
require('blear.ui.chart/src/echarts/chart/funnel');
// 平行坐标
require('blear.ui.chart/src/echarts/chart/parallel');
// 桑基图
require('blear.ui.chart/src/echarts/chart/sankey');
// 箱线图
require('blear.ui.chart/src/echarts/chart/boxplot');
// K线图
require('blear.ui.chart/src/echarts/chart/candlestick');
// 多折线图
require('blear.ui.chart/src/echarts/chart/lines');
// 热力图
require('blear.ui.chart/src/echarts/chart/heatmap');
// 象形柱图
require('blear.ui.chart/src/echarts/chart/pictorialBar');
// 主题河流图
require('blear.ui.chart/src/echarts/chart/themeRiver');

4组件

// 关系组件
require('blear.ui.chart/src/echarts/component/graphic');
// 格子组件
require('blear.ui.chart/src/echarts/component/grid');
// 说明组件
require('blear.ui.chart/src/echarts/component/legend');
// 提示组件
require('blear.ui.chart/src/echarts/component/tooltip');
// 轴线点组件
require('blear.ui.chart/src/echarts/component/axisPointer');
// 极线组件
require('blear.ui.chart/src/echarts/component/polar');
// 地理组件
require('blear.ui.chart/src/echarts/component/geo');
// 并线组件
require('blear.ui.chart/src/echarts/component/parallel');
// 单轴组件
require('blear.ui.chart/src/echarts/component/singleAxis');
// 画笔组件
require('blear.ui.chart/src/echarts/component/brush');
// 日历组件
require('blear.ui.chart/src/echarts/component/calendar');
// 标题组件
require('blear.ui.chart/src/echarts/component/title');
// 数据区域组件
require('blear.ui.chart/src/echarts/component/dataZoom');
// 可视地图组件
require('blear.ui.chart/src/echarts/component/visualMap');
// 马克点组件
require('blear.ui.chart/src/echarts/component/markPoint');
// 马克线组件
require('blear.ui.chart/src/echarts/component/markLine');
// 马克区域组件
require('blear.ui.chart/src/echarts/component/markArea');
// 时间轴组件
require('blear.ui.chart/src/echarts/component/timeline');
// 工具箱组件
require('blear.ui.chart/src/echarts/component/toolbox');

5Static

5.1.map(area, desc)

注册地图（已内置中国地图）。

Chart.map('china', require('blear.ui.chart/src/maps/china.json'));

5.1.1area

• 类型：String
• 说明：地图区域名称

5.1.2desc

• 类型：Object
• 说明：地图描述对象

6new Chart(options)

实例化一个图表实例。

7Prototype

7.1#render(options): this

对图表进行重新渲染。

7.1.1options

• 类型：Object
• 说明：图表配置

7.2#decorate(options): this

对图表进行重新装饰。

7.2.1options

• 类型：Object
• 说明：图表新配置，会覆盖当前配置

7.3#destroy()

销毁实例。

8Events

8.1click(ev)

鼠标单击图表组件地方会触发。

8.1.1ev.type

• 类型：String
• 说明：事件类型

8.1.2ev.componentType

• 类型：String
• 说明：当前点击的图形元素所属的组件名称，其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。

8.1.3ev.seriesType

• 类型：String
• 说明：系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。

8.1.4ev.seriesIndex

• 类型：number
• 说明：系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。

8.1.5ev.name

• 类型：string
• 说明：数据名，类目名

8.1.6ev.dataIndex

• 类型：string
• 说明：数据在传入的 data 数组中的 index

8.1.7ev.data

• 类型：Object
• 说明：传入的原始数据项

8.1.8ev.dataType

• 类型：string
• 说明：sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data， dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。 其他大部分图表中只有一种 data，dataType 无意义。

8.1.9ev.value

• 类型：number|Array
• 说明：传入的数据值

8.1.10ev.color

• 类型：string
• 说明：数据图形的颜色。当 componentType 为 'series' 时有意义。

8.2dblclick(ev)

鼠标双击图表组件地方会触发。ev参数同上。

8.3mousedown(ev)

鼠标按下图表组件地方会触发。ev参数同上。

8.4mouseup(ev)

鼠标按起图表组件地方会触发。ev参数同上。

8.5mouseover(ev)

鼠标移入图表组件地方会触发。ev参数同上。

8.6mouseout(ev)

鼠标移出图表组件地方会触发。ev参数同上。

8.7globalout(ev)

鼠标移出图表组件地方会触发。ev参数同上。

8.8contextmenu(ev)

鼠标右击图表组件地方会触发。ev参数同上。

8.9legendSelectChanged(ev)

legend 选择后会触发。ev参数同上。

9Dependencies

• blear.core.selector
• blear.ui

10Reference

• ECharts 官网：echarts.baidu.com