echart + vue堆叠柱状图和计算总数以及改变echart的下载图标

echart + vue堆叠柱状图和计算总数以及改变echart的下载图标

根据自己在项目中的爬坑，记录一些我认为的难点，不断的总结这些问题，来提高对echart的掌握程度

如下图所示

代码展示

// 引入ECharts
<ECharts :options="optionsData"></ECharts>
// echart 数据的渲染
this.optionsData = {
	color: ['#f2725e', '#5baeeb', '#f7b966', '#31c49a', '#448bcb', '#e76581', '#5ad5e7', '#818cf3'],
	tooltip: {
		show: true
	},
	legend: {
		bottom: 0,
		data:  ['常模', '整体', '已选']
	},
	grid: {
		top: 40,
		left: '3%',
		right: '4%',
    	bottom: '50',
    	containLabel: true
	},
	xAxis: {
		type: 'category',
			axisLabel: {
			interval: 0
		},
		boundaryGap: true,
		data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
	},
	yAxis: [
	{
		type: 'value',
		axisLabel: {
			formatter: '{value}'
		},
		max: 50
		}
	],
	toolbox: {
		show: true,
		feature: {
			// 自定义保存icon
			saveAsImage: {
				icon:'image://http://s.yishengya.cn/public/dist/pc/v2/img/down-ta.png',
	        	show: true,
	        	excludeComponents: ['toolbox'],
	        	pixelRatio: 2
			},
			iconStyle: {
				borderColor: '#ccc',
				borderWidth: 1
			}
		},
		showTitle: false,
	    itemSize:100,
	    top: '-40'
	},
	series: [
	{
		data: [12, 15, 11.23, 16.01, 10, 11, 16],
		label: {
			normal: {
				borderWidth: 2,
				formatter: '男',
				show: true
			}
		},
		name: '常模',
		stack: '常模',
		type: 'bar'
    },
    {
		data: [12, 15, 11.23, 16.01, 10, 15, 12],
		itemStyle: {
			opacity: '0.7'
		},
		label: {
			normal: {
				borderWidth: 2,
				formatter: '女',
				show: true
			}
		},
		name: '常模',
		stack: '常模',
		type: 'bar'
	},
    // 计算常模柱状图的总和显示在图表上方
	{
		data: [24, 30, 22.46, 32.02, 20, 26, 18],
		itemStyle: {
			normal: {
				color: 'rgba(128, 128, 128, 0)'
			}
		},
		label: {
			normal: {
				formatter: '{c}',
				// offset: [50, 80],
				position: 'insideBottom',
				show: true,
				textStyle: {
					color: '#4c4c4c'
				}
			}
		},
		name: '常模',
		stack: '常模',
		type: 'bar'
	},
	{
		data: [11, 15, 16, 8, 17, 6, 9],
		label: {
			normal: {
				borderWidth: 2,
				formatter: '男',
				show: true
			}
		},
		name: '整体',
		stack: '整体',
		type: 'bar'
	},
    {
      data: [20, 9, 11, 8, 9, 18, 4],
      itemStyle: {
        opacity: '0.7'
      },
      label: {
        normal: {
          borderWidth: 2,
          formatter: '女',
          show: true
        }
      },
      name: '整体',
      stack: '整体',
      type: 'bar'
    },
    // 计算整体柱状图的总和显示在图表上方
	{
		data: [31, 34, 27, 16, 26, 24, 13],
		itemStyle: {
			normal: {
				color: 'rgba(128, 128, 128, 0)'
			}
		},
		label: {
			normal: {
				formatter: '{c}',
				// offset: [50, 80],
				position: 'insideBottom',
				show: true,
				textStyle: {
					color: '#4c4c4c'
				}
			}
		},
		name: '整体',
		stack: '整体',
		type: 'bar'
	},
	{
		data: [12, 15, 14, 18, 9, 12, 19],
		label: {
			normal: {
				borderWidth: 2,
				formatter: '男',
				show: true
			}
		},
		name: '已选',
		stack: '已选',
		type: 'bar'
	},
	{
		data: [12, 11, 9, 9, 18, 11, 5],
		itemStyle: {
			opacity: '0.7'
		},
		label: {
			normal: {
				borderWidth: 2,
				formatter: '女',
				show: true
			}
		},
		name: '已选',
		stack: '已选',
		type: 'bar'
	},
	// 计算已选柱状图的总和显示在图表上方
	{
		data: [24, 26, 23, 27, 27, 23, 24],
		itemStyle: {
			normal: {
				color: 'rgba(128, 128, 128, 0)'
			}
		},
		label: {
			normal: {
				formatter: '{c}',
				// offset: [50, 80],
				position: 'insideBottom',
				show: true,
				textStyle: {
					color: '#4c4c4c'
				}
			}
		},
		name: '已选',
		stack: '已选',
		type: 'bar'
	}
  ]
}

第一次写，欢迎指正