vue引入使用echarts

最新推荐文章于 2025-10-18 07:02:17 发布

原创最新推荐文章于 2025-10-18 07:02:17 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

本文介绍了如何使用npm安装并全局引入ECharts库，然后通过Vue实例化并在模板中实现了一个简单的柱状图示例。适合初学者快速掌握前端图表开发。

一.使用npm下载echarts包

npm install echarts --save

二.在main.js中全局引入

// 引入 echarts
import * as echarts from ‘echarts’
Vue.prototype.$echarts = echarts

三.在文件中测试示例

<template>
  <div>
    <div id="myechart" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.setChart()
    },
    methods: {
      setChart() {
        var myChart = this.$echarts.init(this.$refs.myechart)
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
    },
  }
</script>

<style lang="" scoped>
</style>