Vue 中 Echarts实现分段式柱形图

前言

记录在 vue 中实现echarts 分段式柱形图的效果

---

一、效果展示

分段式柱形图实现效果

二、echarts图表配置

1、下载echarts

npm i echarts -D 

2、全局引入echarts

在main.js 中 ，全局挂载echarts

import * as echarts from 'echarts'
Vue.prototype.echarts = echarts;

3、页面中使用

	<template>
		<div id="myBarChart"></div>
	</tremplate>

JS

<script>
export default {
   
	data() {
   
		return {
   
			myChart: null
		};
	},
	mounted(){
   
		this.$nextTick(() => {
   
			let chartDom = document.getElementById("myBarChart");
			this.myChart = this.echarts.init(chartDom);
		})
	}
}
</script>

option 配置如下：

let option = {
   
    grid: {
   
        top: 20,
        left: 15,
        right