echarts柱状图

<template>
	<div id="mainCH" style="width: 100%; height: 400px;"></div>
</template>

<script>
	let echarts = require('echarts/lib/echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	export default {
		props: {
			PaiKedu: { // 样式 - 1
				default () {
					return {}
				}
			},

			PaiNumber: { //标题文本 - 1
				default: ''
			},
		},
		data() {
			return {
				title: 'Hello',
				huodong: [],
				zong: [],
			}
		},
		watch: {
			PaiKedu: {
				immediate: true,
				handler: function(value) {
					this.huodong = value;
				}
			},
			PaiNumber: {
				immediate: true,
				handler: function(value) {
					this.zong = value;
				}
			},
			huodong: function() {
				if (this.huodong.length > 0) {
					this.drawBar()
				}
			}
		},
		mounted() {
			if (this.huodong.length > 0) {
				this.drawBar()
			}
		},
		methods: {
			drawBar() {
				let myChart = echarts.init(document.getElementById("mainCH"));
				var option = {
					grid: {
						x: 50,
						y: 20,
						x2: 30,
						y2: 130,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: "{b}: {c}" // 这里是鼠标移上去的显示数据
					},
					xAxis: {
						splitLine: {
							show: false
						},
						//这里填写刻度值 [前端，软件，测试，后端，UI，安全]
						data: this.huodong,

						axisTick: {
							show: false
						},
						axisLine: {
							"show": true,
							lineStyle: {
								color: '#BFC8DE' //更改坐标轴颜色
							}
						},

						axisLabel: {
							show: true,
							textStyle: {
								color: '#333333', //更改坐标轴文字颜色
								fontSize: 12 //更改坐标轴文字大小
							},
							// 文字斜着
							rotate:45,
						},
					},
					yAxis: {
						splitLine: { //分割线
							show: true,
							lineStyle: {
								color: '#6076AD',
								width: 1,
								opacity: .5,
							}
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#333333', //更改坐标轴文字颜色
								fontSize: 12 //更改坐标轴文字大小
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#5e97b5' //更改坐标轴颜色
							}
						}
					},
					series: [{
						
						type: 'bar',
						barWidth: 18,
						top: 0,
						bottom: 50,
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
										['#0181DE', '#67E0E3'],
										['#D789FF', '#E9BFFF'],
									];
									var index = params.dataIndex;
									if (params.dataIndex >= colorList.length) {
										index = params.dataIndex - colorList.length;
									}
									return new echarts.graphic.LinearGradient(0, 1, 0, 0,
										[{
												offset: 0,
												color: colorList[index][0]
											},
											{
												offset: 1,
												color: colorList[index][1]
											}
										]);
								}
							}
						},
						//这里填写[1,2,5,4,8,6,2,1,4,5]
						data: this.zong
					}]
				};

				myChart.setOption(option);
			}
		}
	}
</script>

<style>
</style>