Echarts的基本使用

Echarts基本使用

公司项目使用的是angular6进行开发的，使用了百度Echarts插件，针对数据可视化，效果还是非常不错的，而且使用起来也是非常的方便也是第一次使用angualr进行项目开发，就将平时使用的一些心得进行记录一下。

①使用引入的方式
首先使用npm来安装echarts（在项目文件夹中打开cmd，输入以下命令）

1
npm install --save-dev echarts

进行引入

1
<div echarts [(options)]="option_CPU" theme="blue" class="default-chart" style="height:400px"></div>

[(options)]=”option_CPU”进行双向数据绑定,这样通过ts文件中进行声明option_CPU，引入Echarts中的数据源即可
例如：(这是Echarts中引入的数据源实例)

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
        text: '大数据量面积图',
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(255, 158, 68)'
                }, {
                    offset: 1,
                    color: 'rgb(255, 70, 131)'
                }])
            },
            data: data
        }
    ]
};

通过以上方式就可简单的进行导入一个折线图

颜色样式修改

通过textStyle可以进行颜色样式的修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title : {
	textStyle: {       
	        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	        fontWeight: ‘bolder‘,
	        fontSize: 20,
	        color:"#7FFFD4"
	    }
	},
	detail : {
		    textStyle: {       
		    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		    fontWeight: ‘bolder‘ 
    	}
	},
	data: {
		value: 109.2,
  		name: ‘\n\n  东部地区\n 用水量‘}]
	},

动态时间数据echarts

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
52
53
54
55
56
57
58
59
60
61
62
63
function randomData() {
    now = new Date(+now + 1000);
    //数据
    value = value + Math.random() * 21 - 10;    
    return {
        name: now.toString(),
        value: [
            now,            
            value//这里需要传递实时数据
        ]
    }
}
var data = [];
var now = new Date();
var value = Math.random() * 1000;
option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];            
            var date = new Date(params.name);            
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
setInterval(function () {
    data.push(randomData());
    //data.shift();
    if(data.length>60){//设置60秒以内的时间，当超过60秒以后x轴进行移动控制60秒以内的
        data.shift();
    }
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);