欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

界面效果如下图所示:

Vue 中使用 Echarts 简单入门——小白必看

本文地址:https://blog.csdn.net/qwe122343/article/details/107378525

相关标签: Vue echarts