uniapp/pages/index/components/chart3/chart3.vue

<template>
	<view class="content">

		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts3" class="echarts"></view>

	</view>
</template>

<script>
	//start

	//end


	export default {
		data() {
			return {
				option: {
					// legend: {
					//         data: ['bar', 'bar2', 'bar3', 'bar4'],
					// 		color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
							
					//     },
					grid: {  //aa位置
						top: '2%',
						right: '-5%',
						bottom: '1%',
						left: '17%',
						
					},

					color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
					xAxis: [{
						show: false
					}],
					yAxis: [{  //aay轴
							axisTick: 'none',
							axisLine: 'none',
							axisLabel: {
								verticalAlign: 'bottom',
								align: 'bottom',
								padding: [0, 0, 8, 5],
								textStyle: {
									color: '#333',
									fontSize:'16'

								}
							},
							data: ['正常 1569','其他 569','预警 156','故障 0','离线 12'   ],

						},
						{
							//左侧柱状图的Y轴
							axisTick: 'none',
							axisLine: 'none',
							data: [70,20,8,0,12],
							axisLabel: {
								show: true,
								verticalAlign: 'bottom',
								align: 'right',
								padding: [0, 45, 8, 0],
								textStyle: {
									color: '#333',
									fontSize:'15'

								},
								formatter: function(value) {
									return value + '%'
								}

							}
						},

					],
					series: [{
							type: 'bar',
							data: [1357, , , , ],
							barWidth: 6,
							itemStyle: {
								normal: {
									barBorderRadius: 6,
								}
							},
							z: 2
						}, {
							type: 'bar',
							data: [ ,1260, , , ],
							barWidth: 6,
							itemStyle: {
								normal: {
									barBorderRadius: 6,
								}
							},
							z: 2
						}, {
							type: 'bar',
							data: [ , ,36, , ],
							barWidth: 6,
							itemStyle: {
								normal: {
									barBorderRadius: 6,
								}
							},
							z: 2
						},
						{
							type: 'bar',
							data: [ , , ,36, ],
							barWidth: 6,
							itemStyle: {
								normal: {
									barBorderRadius: 6,
								}
							},
							z: 2
						},
						{
							type: 'bar',
							data: [ , , , ,100],
							barWidth: 6,
							itemStyle: {
								normal: {
									barBorderRadius: 6,
								}
							},
							z: 2
						},

						{
							type: 'bar',
							barGap: '-100%',
							data: [1554, 1554, 1554, 1554, 1554],
							barWidth: 6,
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0, 0.15)',
									barBorderRadius: 6,
								}
							},
							z: 0
						},
					]
				}
			}
			
			
		},
		onLoad() {
			
			// this.option.series.reverse()

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts3'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 500rpx;
		margin-top: 70rpx;
		/* 	background:pink */
	}
</style>