当前位置: 首页 > article >正文

Vue项目中使用ECharts

1. 安装 ECharts

通过 npm 或 yarn 安装 ECharts:

npm install echarts --save
# 或者
yarn add echarts

2. 在 Vue 项目中使用 ECharts

直接使用

在 Vue 组件中,你可以直接导入 ECharts 并使用它。这里是一个简单的示例,展示如何在 Vue 2 组件中创建一个柱状图:

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

<script>
import echarts from 'echarts';

export default {
  name: 'BarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById('main'));
      let 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>
使用 ECharts 插件

你还可以使用 vue-echarts 插件,这将使在 Vue  中使用 ECharts 更加便捷。首先,安装 vue-echarts

npm install vue-echarts --save
# 或者
yarn add vue-echarts

然后,在你的 Vue 组件中使用它。以下是一个使用 vue-echarts 的示例:

<template>
  <div>
    <v-chart :options="options" :autoresize="true"></v-chart>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts.vue';
import 'echarts/lib/chart/bar'; // 引入柱状图
import 'echarts/lib/component/tooltip'; // 引入提示框
import 'echarts/lib/component/title'; // 引入图表标题
import 'echarts/lib/component/legend'; // 引入图例
import 'echarts/lib/component/toolbox'; // 引入工具箱

export default {
  components: {
    v_chart: ECharts
  },
  data() {
    return {
      options: {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
      }
    };
  }
};
</script>

这样,你就可以在 Vue 项目中使用 ECharts 来创建各种图表了。如果需要更复杂的功能或遇到任何问题,随时可以提问!


http://www.kler.cn/a/348864.html

相关文章:

  • Matlab实现海鸥优化算法优化回声状态网络模型 (SOA-ESN)(附源码)
  • 【Windows命令】Windows下启动Nginx后,在任务管理器里面没有发现nginx.exe进程
  • 棉花叶片病害虫害检测数据集
  • 保护 -- 1+1保护与1:1保护
  • IOS APP初体验-第1课:如何在Mac中真机调试
  • 一篇 带你了解 XSS——(下篇)
  • NewStar CTF 2024 re方向 week2 wp
  • Geist「Polter」测试网现已上线——不可错过的关键信息
  • 电脑插上U盘不显示怎么回事?怎么解决?
  • IT基础监控运维:监控易的深度解析与应用
  • Python网络爬虫
  • 大模型烧钱战,百度云亟需突围之路
  • AD9680(adc直采芯片)使用说明
  • Java:数据结构-队列(Queue)
  • SpringBoot教程(三十二) | SpringBoot集成Skywalking链路跟踪
  • 施耐德EcoStruxure Machine SCADA Expert(EMSE)文件管理功能-上(二十)
  • 76.【C语言】perror函数介绍
  • ssh连接慢的问题或zookeeper远程连接服务超时
  • uniapp学习(005-1 详解Part.1)
  • 百度地图怎么上传店铺定位?