Echart的使用和形成指令

Echart的使用与将图标形成指令

完成后如下图所示

image

1. Echart的使用

官网地址

官网教程引入，根据教程可以很简单的完成实例的引入，我主要写关于百分率样式的配置

代码入下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var option = {
                    title: {
                        text: {}
                    },
                    color: ['#62CB31'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    xAxis: [{
                        type: '',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: {
                        type: 'value',
                        min: '',
                        max: '',
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value} %'
                        }
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        data: [],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                   var colorList = CommonService.getChartBarColor();
                                    return colorList[params.dataIndex % colorList.length];
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}%'
                                }
                            }
                        },
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value} %'
                        },
                        barWidth: 70
                    }]
                };

1.1 y轴的百分比显示

1
2
3
4
5
axisLabel: {
               show: true,
               interval: 'auto',
               formatter: '{value} %'
}

1.2 柱形上的显示与多颜色的加入

1
2
3
4
5
6
7
8
9
10
11
12
13
itemStyle: {
                            normal: {
                                color: function(params) {
                                  var colorList = CommonService.getChartBarColor();
                                    return colorList[params.dataIndex % colorList.length];
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}%'
                                }
                            }
                        }

2. 指令的使用

1
<yunzhi-chart-bar data-chart-name = "chartName" data-chart-xdata="chartXData" data-chart-ymax="chartYMax" data-chart-ymin="chartYMin" data-chart-dar="chartDarData"></yunzhi-chart-bar>

外部数据：图表名称，图标x轴，图表y轴，图表bar内容（数据）

在写指令是遇到问题是$watch的多监听

解决如下

1
2
3
4
5
6
7
scope.$watch('[chartXdata, chartDar, chartName, chartYmin, chartYmax]', function(newValue) {
                    if (scope.chartDar) {  // 防止第一次数据为空时加载图表
                        $timeout(function() {
                            self.setChart();
                        }, 1000);
                    }
                }, true);

把要监听的对象放入数组中，进行多对监听

推荐文章