Vue 中使用 Echarts 简单入门——小白必看
程序员文章站
2022-07-07 20:47:58
之前写过 ECharts下载最简单方法——小白必看,简单介绍了 echarts.min.js 的下载方式,在 ECharts小白入门——柱状图练习 中,将 echarts.min.js 引入 HTML 文件绘制了柱状图,今天介绍一下 Echarts 在 Vue 中的安装和使用1、首先创建好 Vue 的项目,创建好之后在控制台输入 npm install echarts --save ,安装 echarts2、接下来在 main.js 中进行引入// 引入Echartsimport echarts...
之前写过 ECharts下载最简单方法——小白必看,简单介绍了 echarts.min.js 的下载方式,在 ECharts小白入门——柱状图练习 中,将 echarts.min.js 引入 HTML 文件绘制了柱状图,今天介绍一下 Echarts 在 Vue 中的安装和使用
1、首先创建好 Vue 的项目,创建好之后在控制台输入 npm install echarts --save
,安装 echarts
2、接下来在 main.js 中进行引入
// 引入Echarts
import echarts from "echarts"
Vue.prototype.$echarts = echarts
3、创建一个 Vue 页面对 Echarts 柱状图进行一个简单的展示
<template>
<div class="EchartPractice">
<div id="main"></div>
</div>
</template>
<script>
export default {
name: "EchartPractice",
methods:{
drawChart() {
let myEchart = this.$echarts.init(document.getElementById("main"));
let option = {
title:{
text:"Vue中使用Echarts小练习"
},
tooltip:{},
legend:{
data:["销量"]
},
xAxis:{
data: ["苹果","香蕉","橘子","葡萄",]
},
yAxis:{},
series:[{
name:'销量',
type:"bar",
data:[50,60,45,30,]
}]
};
myEchart.setOption(option);
}
},
mounted() {
this.drawChart();
}
}
</script>
<style scoped>
#main {
width: 600px;
height:400px;
margin: auto;
margin-top: 100px
}
</style>
界面效果如下图所示:
本文地址:https://blog.csdn.net/qwe122343/article/details/107378525
上一篇: Vue列表中,如何实现多选?
下一篇: 荐 js简单整理