webpack中使用echarts

最新推荐文章于 2023-05-16 17:59:46 发布

slowly_slowly_up

最新推荐文章于 2023-05-16 17:59:46 发布

阅读量306

点赞数

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/slowly_slowly_up/article/details/112214676

版权

本文介绍了如何在webpack配置的项目中安装并引入ECharts，包括全局引入和按需引入两种方式，旨在减少体积，提升应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装echarts

npm install echarts --save

2.引入echarts
（1）全局引入，挂到Vue的原型链上
在main.js中加入以下代码

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用

（2）按需引入（体积较小，推荐使用）

//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

3.按需引入示例

<template>
  <div id="container" style="width:300px;height:300px;"></div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");

export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById("container"));
      let option = {