vue echart引入快速上手

最新推荐文章于 2024-07-06 21:09:42 发布

原创最新推荐文章于 2024-07-06 21:09:42 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了ECharts在4.9.0版本和5.0及以上版本之间的区别，特别是地图功能的差异。在5.0版本以后，地图功能被移除。为保持地图功能，建议使用4.9.0版本。同时，提供了ECharts的快速上手步骤，包括如何导入组件、设置配置项以及在Vue项目中创建带有宽度和高度的图表盒子。此外，给出了完整的Vue代码示例，展示如何初始化ECharts实例并设置地图系列。

1、版本问题一直错误大概率版本问题

卸载：

npm uninstall echarts

安装指定版本：

npm install echarts@4.9.0 --save

4.9版本下有地图，5.0版本以上失去这个功能，想要别的版本把@后的版本号改掉就行。

2、快速上手步骤

（1）需要的组件中引入

import echarts from "echarts"; （import "echarts/map/js/china";）

（2）设置配置项例如：

const option = {
  title: {
    text: "category",
    link: "https://www.baidu.com",
  },
  series: [
    {
      name: "确诊人数",
      type: "map",
      map: "china",
    },
  ],
};

3、设置一个有width height的盒子

mounted() {
    /*ECharts图表*/
    // 初始化
    this.myChart = echarts.init(this.$refs.main);
    // 配置项
    this.myChart.setOption(option);
  },

完整代码：

<template>
  <div ref="main" :style="{ width: '900px', height: '500px' }"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
const option = {
  title: {
    text: "category",
    link: "https://www.baidu.com",
  },
  series: [
    {
      name: "确诊人数",
      type: "map",
      map: "china",
    },
  ],
};
export default {
  name: "Home",

  mounted() {
    /*ECharts图表*/
    // 初始化
    this.myChart = echarts.init(this.$refs.main);
    // 配置项
    this.myChart.setOption(option);
  },
};
</script>

<style scoped>
</style>