使用ECharts制作柱形图

1.下载ECharts

npm install echarts --save

2.在main.ts引入 ECharts

import 'element-ui/lib/theme-chalk/index.css'

import * as echarts from 'echarts'  //引入echarts

Vue.prototype.$echarts = echarts //注册组件

3.在主页面先放一个div大盒子，设置宽高

<div id="columnar" :style="{ width: '1500px', height: '500px' }"></div>

4.在主页面引入

import * as echarts from 'echarts' //引入echarts文件

export default {
	mounted() {
		this.columnar(); //挂载后调用方法
	},
	methods: {
		columnar() {
			//获取id对象
			let columnar = echarts.init(document.getElementById('columnar'));
			//开始绘制
			columnar.setOption({
				// 调整图表容器距离底部的距离，给表格腾空间
				grid: {
					bottom: 200
				},
				// 图例调整位置，对应表格的相应行
				legend: [
					//侧边图例
					{
						data: ['Block A', 'Block B', 'Block C', 'Block D', 'SR', 'Total Average'],
						bottom: 30,
						left: 20,
						orient: 'vertical',
						itemGap: 10
					},
					//底部图例
					{
						data: ['Block A', 'Block B', 'Block C', 'Block D', 'SR', 'Total Average'],
						bottom: 0,
						itemGap: 5
					}],
				//柱形图显示的数据
				dataset: