先准备一个容器,Echarts 会在指定的 DOM 容器中渲染图表。
<template>
<div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
引入echarts
创建一个 echarts 实例,并将其绑定到指定的 DOM 容器上
let mychart = echarts.init(this.$refs.chartContainer);
设置图表配置项和数据
let options = {
// 图表的配置项和数据
};
mychart.setOption(options);
完整代码
<template>
<div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.drawChart();
},
methods: {
drawChart() {
let myChart = echarts.init(this.$refs.chartContainer);
// 模拟一些数据
const data = [120, 200, 150, 80, 70, 110];
let option = {
title: {
text: '柱状图示例',
left: 'center',
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F'],
},
yAxis: {
type: 'value',
},
series: [
{
name: '销量',
type: 'bar',
data: data,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style>
</style>