JT-CIM-ZHNY/src/views/test/components/cqzrqs.vue

<template>
	<div>
		<jt-echarts style="width: 320rem;height: 260rem;margin:10rem 10rem 10rem 20rem;"
			:chartData="option"></jt-echarts>
	</div>
</template>

<script>
	// import * as echarts from "echarts";

	export default {
		data() {
			return {
				// category: "", //横坐标
				// yData: [1000, 1500, 1300, 1700, 1600, 1200],
				// y2Data: [1200, 1800, 1400, 1350, 1100, 1500],
				option: {}
			}
		},
		created() {},
		mounted() {
			this.typeCharts0()
			// let _this = this
			// var t1=setTimeout(function() {
			// 	_this.option.series = [{
			// 			data: _this.category
			// 		},
			// 		{
			// 			data: _this.dottedBase
			// 		}
			// 	]

			// }, 1000);
		},
		methods: {
			typeCharts0() {
				var getName =['小花','小明','小红','吓不不','刃甲','加加','鸿基','新能源','家喻户晓','老师'];
				var getValue =[219,241,174,44,435,617,114,82,77,50];
				var max = Math.max.apply(null, getValue);
				var getMax=[];
				for(var i=0;i<getName.length;i++){
				    getMax.push(max)
				}
				console.log(getMax) ;
				// typeCharts0() {
				// 	this.option = this.getOption();
				// 	// var chartDom = document.getElementById('echarts');
				// 	// var myChart = echarts.init(chartDom);
				// 	// myChart.setOption(option, true);
				// },
				this.option = {
					// backgroundColor: "#003366",
					grid: {
						left: '4%',
						right: '2%',
						bottom: '2%',
						top: '2%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'none'
						},
						formatter: function(params) {
							return params[0].name + ' : ' + params[0].value
						}
					},
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: [{
						type: 'category',
						inverse: true,
						offset: 100,

						axisLabel: {
							show: true,
							align: 'left',
							textStyle: {
								color: '#66cc00',

							},
							formatter: function(value, index) {
								var num = ''
								var str = ''
								var no = 'NO.';
								num = (index + 1);
								if (index === 0) {
									str = '{no1|' + no + '} {num1|' + num + '} {title1|' + value + '}'
								} else if (index === 1) {
									str = '{no2|' + no + '} {num2|' + num + '} {title2|' + value + '}'
								} else if (index === 2) {
									str = '{no3|' + no + '} {num3|' + num + '} {title3|' + value + '}'
								} else {
									str = '{no|' + no + '} {num|' + num + '} {title|' + value + '}'
								}
								return str;

							},
							rich: {
								no: {
									color: '#ffcccc',
									fontSize: 14,

								},
								no1: {
									color: '#ff4d4d',
									fontSize: 14,

								},
								no2: {
									color: '#4dd2ff',
									fontSize: 14,

								},
								no3: {
									color: '#ffff00',
									fontSize: 14,

								},
								num: {
									color: '#fff',
									backgroundColor: '#ffcccc',
									width: 20,
									height: 20,
									fontSize: 14,
									align: 'center',
									borderRadius: 100
								},
								num1: {
									color: '#fff',
									backgroundColor: '#ff4d4d',
									width: 20,
									height: 20,
									fontSize: 14,
									align: 'center',
									borderRadius: 100
								},
								num2: {
									color: '#fff',
									backgroundColor: '#4dd2ff',
									width: 20,
									height: 20,
									fontSize: 14,
									align: 'center',
									borderRadius: 100
								},
								num3: {
									color: '#fff',
									backgroundColor: '#ffff00',
									width: 20,
									height: 20,
									fontSize: 14,
									align: 'center',
									borderRadius: 100
								},
								title: {

									color: '#ffcccc',
								},
								title1: {

									color: '#ff4d4d',
								},
								title2: {

									color: '#4dd2ff',
								},
								title3: {

									color: '#ffff00',
								},
							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						data: getName
					}, {
						type: 'category',
						inverse: true,
						offset: -50,
						axisTick: 'none',
						axisLine: 'none',
						show: true,
						axisLabel: {
							textStyle: {
								color: '#ffffff',
								fontSize: '12'
							},

						},
						data: getValue
					}],
					series: [{
							name: '值',
							type: 'bar',
							zlevel: 1,
							itemStyle: {
								normal: {
									barBorderRadius: 30,
									// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									// 	offset: 0,
									// 	color: 'rgb(128,204,255,1)'
									// }, {
									// 	offset: 1,
									// 	color: 'rgb(46,200,207,1)'
									// }]),
								},
							},
							barWidth: 20,
							data: getValue
						},
						{
							name: '背景',
							type: 'bar',
							barWidth: 20,
							barGap: '-100%',
							data: getMax,
							itemStyle: {
								normal: {
									color: 'rgba(24,31,68,1)',
									barBorderRadius: 30,
								}
							},
						},
					]
				};

			},
		}

	}
</script>

<style>
</style>