在vue项目中使用echarts（echarts不显示，echarts使用详细）-Toy模板网

这篇具有很好参考价值的文章主要介绍了在vue项目中使用echarts（echarts不显示，echarts使用详细）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简述：我们在写大屏项目和vue项目时经常会用到echarts，用于数据统计和可视化，它是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，下面分享下它在项目中的使用方式；

1、安装，下载相关依赖（可用镜像cnpm）；

npm install echarts --save

下载较慢时，可以使用镜像cnpm
cnpm install echarts --save

2、在项目中引入（全局引入）；

全局引入Echarts
import * as echarts from "echarts";

然后挂载在vue原型上
Vue.prototype.$echarts = echarts;

可按需引入 >>

Echarts按需引入详细https://echarts.apache.org/handbook/zh/basics/import/https://echarts.apache.org/handbook/zh/basics/import/

3、在vue页面中使用；

3.1、首先定义一个容器，设置宽高，也就是echarts的大小（这一步很重要，一定要设置容器大小，不然显然不出来）

定义一个容器
<template>
  <div id="echarts_demo"></div>
</template>

并设置大小
<style lang="scss" scoped>
#echarts_demo {
  width: 80%;
  height: 80vh;
  margin: auto;
  border: 1px solid #8080ff;
}
</style>

3.2、定义一个方法，在方法中获取容器实例，初始化echarts，并配置相关属性，然后在mounted函数中调用（注意这里调用时候使用的是this.$echarts.init，全局方法）；

methods: {
    定义一个echarts方法，把代码粘贴进去（官网实例有提供代码）
    defineEcharts() {
      获取容器实例
      var chartDom = document.getElementById("echarts_demo");
      赋值并初始化ecahrts
      var myChart = this.$echarts.init(chartDom);
      配置相关属性
      var option;
      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: [
              ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
              ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: {
                focus: "self",
              },
              label: {
                formatter: "{b}: {@2012} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2012",
                tooltip: "2012",
              },
            },
          ],
        };
        myChart.on("updateAxisPointer", function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });
        myChart.setOption(option);
      });
      option && myChart.setOption(option);

      // 给window添加resize监听事件，当平怒尺寸发生变化时重置
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    },
  },

 mounted() {
    this.defineEcharts();
  },

4、实现的效果；

echarts按需引入镜像cnpm,前端,echarts,vue.js

5、这里给echarts加上页面重置效果，就是当页面尺寸发生变化的时候，跟随页面大小变化而变化（也就是加一个监听事件resize，上面代码有提到）；

option && myChart.setOption(option);

// 给window添加resize监听事件，当屏幕尺寸发生变化时重置
window.addEventListener("resize", () => {
    myChart.resize();
});

加监听事件之前：

echarts按需引入镜像cnpm,前端,echarts,vue.js

加监听事件之后：

echarts按需引入镜像cnpm,前端,echarts,vue.js

更多，Echarts大小重置，缩小等问题 >>

echarts重置、缩小等问题，解决方案https://blog.csdn.net/weixin_65793170/article/details/127608700?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167984448316800180676689%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167984448316800180676689&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127608700-null-null.blog_rank_default&utm_term=echarts&spm=1018.2226.3001.4450https://blog.csdn.net/weixin_65793170/article/details/127608700?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167984448316800180676689%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167984448316800180676689&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127608700-null-null.blog_rank_default&utm_term=echarts&spm=1018.2226.3001.4450

更多操作 >>

Echarts官网https://echarts.apache.org/zh/index.htmlhttps://echarts.apache.org/zh/index.html

相关镜像（Echarts访问加速） >>

PPCharthttp://ppchart.com/#/文章来源地址https://www.toymoban.com/news/detail-783756.html

到了这里，关于在vue项目中使用echarts（echarts不显示，echarts使用详细）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！