Echarts简单使用

一、引入

1、利用标签，引入在网上下载好的 echarts.min.js。

2、 在普通 javascript，可以直接编写 echarts 的图表对应的方法；

在 vue 中，需要先在 vue 的 created 方法（vue 最初始化时加载的方法）中，对要引入的 echarts 图表的方法进行加载，然后，在 methods:中，对该对应方法进行 echarts 编写。

二、组件说明

1、饼状图方法范例：

initAbc() {
	var chartDom = echarts.init(document.getElementById('abc')); //把id为abc的标签，先获取element，然后加载到echarts的chartDom中
	var option = {
		title: [ //标题组
			{
				text: '经济占比', //标题名称-主标题
				x: 'center', //标题水平位置，x(也可写作left、right)：left/center/right
				y: 'top', //标题垂直位置，y(也可写作top、bottom)：top/center/bottom
				textStyle: { //文字类型
					color: 'black', //文字颜色
					fontSize: '20px', //文字尺寸
					fontFamily: 'fangsong', //文字字体
					fontWeight: 1000 //文字粗细
				}
			}, {
				subtext: '重点信息', //标题名称-副标题
				subtextStyle: {
					color: 'green', //标题名称-副标题颜色
				}

			}
		],
		grid: { //图表整体
			top: '15%', //图表顶端距离，可以为百分比和数字
			bottom: '15%', //图表底端距离，可以为百分比和数字
			left: '15%', //图表左端距离，可以为百分比和数字
			right: '65%' //图表右端距离，可以为百分比和数字
		},
		tooltip: { //提示框
			show: true, // 是否显示提示框组件
			trigger: 'item', // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
			axisPointer: {
				type: 'cross', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
				snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
				label: {
					margin: 10, // label 距离轴的距离
					color: '#FFF', // 文字的颜色
					fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
					fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
					fontSize: '20', // 文字字体大小
					lineHeight: '50', // 行高
					padding: [5, 7, 5, 7], // 内边距，单位px
					backgroundColor: 'pink', // 文本标签的背景颜色
				},
				animation: true, // 是否开启动画
				animationDuration: 1000, // 初始动画时长
				animationDurationUpdate: 200, // 数据更新动画的时长
			},
			showContent: true, // 是否显示提示框浮层，默认显示
			alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
			triggerOn: 'mousemove|click', // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
			confine: true, // 是否将 tooltip 框限制在图表的区域内
			backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
			padding: 5, // 提示框浮层内边距，单位px
			textStyle: {
				color: '#FFF', // 文字的颜色
				fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
				fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
				fontSize: '20', // 文字字体大小
				lineHeight: '50', // 行高
			}
		},
		legend: { //图例说明
			data: ['中国', '美国'], //图例条目名称，对应series中data的数组下的具体条目的name，对应不上则不生效
			right: 'center', //x(也可写作left、right)：left/center/right
			bottom: 'top', //y(也可写作top、bottom)：top/center/bottom
			orient: 'horizontal', //垂直摆放-vertical;水平摆放-horizontal
			backgroundColor: '#66ff66', //图例说明组件的背景颜色
			borderColor: '#6666ff', //边框颜色
			borderWidth: 1, //边框宽度
			padding: 1, //内边距大小
			itemGap: 1, //条目间距
			itemWidth: 25, // 图例宽度
			itemHeight: 5, //图例说明组件条目的高度
			textStyle: { //文字类型
				color: 'red', //文字颜色
				fontSize: '20px', //文字尺寸
				fontFamily: 'fangsong', //字体
				fontWeight: 1000 //文字粗细
			},
			icon: 'circle', //名称前的样式类型：circle, rect, roundRect, triangle, diamond, pin, arrow, none
			selected: { //默认是否被选中展示
				'中国': false, //false：默认不展示
				'美国': true //true：默认展示
			}
		},
		series: [{
			type: 'pie', //组件类型
			label: { //修改饼状图标签的属性
				show: true, //控制标签是否显示
				position: 'inside', //控制标签位置:inside-在图块内部；outside-在图块外部
				formatter: '{d}%', //控制标签显示百分值
				color: 'black' //标签的颜色
			},
			labelLine: { //标签线，当标签处于图块外部时起作用
				lineStyle: {
					color: 'rgba(0, 255, 255, 0.3)' //标签线颜色
				},
				smooth: 0.2,
				length: 10,
				length2: 20
			},

			radius: ['40%', '70%'], //修改饼状图的内环和外环位置
			data: [{
					name: '中国', //组件分部名称
					value: 111, //组件分部对应值
					itemStyle: { //组件分部样式设置
						color: "#ff0000", //组件分部颜色
					}
				},
				{
					name: '美国',
					value: 156,
					itemStyle: {
						color: "#00d693"
					}
				}
			],
			emphasis: { //选中时特效
				itemStyle: {
					shadowBlur: 100, //选中后阴影范围
					shadowOffsetX: 11,
					shadowColor: 'rgba(55, 223, 0, 0.5)' //选中后阴影颜色
				}
			}
		}]
	}
	chartDom.setOption(option); //对已经包含id为abc的标签，对应的element，设置option，option内容就是上面设定的内容
}
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

2、柱状图方法范例：

initAbc() {
	var chartDom = echarts.init(document.getElementById('abc'));
	var option = {
		title: {
			text: '国家经济对比',
			left: 'center',
			top: 'top'
		},
		grid: {
			top: '20%',
			bottom: '20%',
			left: '5%',
			right: '5%'
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			}
		},
		legend: {
			itemGap: 100,
			textStyle: {
				color: "#000"
			},
			bottom: 'bottom',
			left: 'center',
			data: ['中国', '美国', '俄国', '法国', '四国GDP总和增长率']
		},
		xAxis: [ //x坐标轴的内容，这里为时间，x轴和y轴互换，图表可以由纵向变为横向
			{
				type: "category",
				name: "time",
				axisLabel: {
					fontWeight: "bold",
					show: true,
					textStyle: {
						fontSize: "14px"
					}
				},
				data: [2015, 2016, 2017, 2015, 2019]
			}
		],
		yAxis: [ //y坐标轴的内容，注意无内容则使用大括号{}而不是中括号[]，中括号只用于数组
			{
				type: 'value',
				name: '人均收入'
			},
			{
				type: 'value',
				name: 'GDP增长率'
			}
		],
		series: [ //统计的数据内容，为中国、美国、俄国、英国在相应的x轴（时间）下的对应值
			{
				name: "中国",
				type: "bar",
				yAxisIndex: 0, //对标y轴数组的第几个值，这里为第0个
				stack: 'ss', //设置了stack以后，相同stack的柱会进行合并堆叠
				barMaxWidth: 10, //设置柱状图最大宽度
				data: [11, 2, 3, 4, 5],
				itemStyle: {
					color: "rgb(242, 143, 133)"
				}
			},
			{
				name: "美国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [1, 2, 3, 4, 5],
				itemStyle: {
					color: "rgb(183, 222, 232)"
				}
			},
			{
				name: "俄国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [17, 2, 31, 4, 5],
				itemStyle: {
					color: "rgb(13, 222, 232)"
				}
			},
			{
				name: "法国",
				type: "bar",
				yAxisIndex: 0,
				stack: 'ss',
				data: [51, 2, 3, 4, 15],
				itemStyle: {
					color: "rgb(183, 22, 232)"
				}
			},
			{
				name: "四国GDP总和增长率",
				type: "line",
				yAxisIndex: 1,
				data: [0.2, 0.3, 0.1, 0.6, 0.5],
				itemStyle: {
					color: "rgb(0, 22, 232)"
				}
			}
		]
	};
	chartDom.setOption(option);
}
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111