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: {