1、安装
npm install echarts --save
2、在main.js中导入
import * as echarts from 'echarts'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(ElementPlus).mount('#app')
3、在vue页面使用
<div id="myCharts" class="myCharts" ref="myChart"></div>
<script>
let myChart = this.$echarts.init(
this.$refs.myChart
);
myChart.setOption({
title: { text: "总用户量" },
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
},
yAxis: {},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
});
</script>
mounted () {
setTimeout(this.barEchart,500)
}
注意:
引入echarts5的方式与之前的版本方式不一样
// echarts5.0以前的版本
import echarts from 'echarts'
// echarts5.0
import * as echarts from 'echarts'
版权声明:本文为sunshine08_07原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。