在main.js中导入文件
import * as echarts from 'echarts';
创建一个名为 $echarts 的全局变量
Vue.prototype.$echarts = echarts模板
<template>
<div ref="demo1" id="barChart" style="width: 100%; height: 400px;"></div>
</template>
<script>
export default {
name: 'demo',
mounted() {
this.renderBarChart();
},
methods: {
renderBarChart() {
// 获取柱状图容器
const chartContainer = document.getElementById('barChart');
// 初始化 echarts 实例
console.log(this.$echarts);
const chart = this.$echarts.init(chartContainer);
// 柱状图配置项
const options = {
xAxis: {
type: 'category',
data: ['Mon1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
// 渲染图表
chart.setOption(options);
}
}
}
</script>
<style></style>官网：ghttps://echarts.apache.org/zh/index.html文章来源地址https://www.toymoban.com/news/detail-804332.html
文章来源：https://www.toymoban.com/news/detail-804332.html
到了这里，关于vue2中echarts的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
