vue 中 EChart 的使用，柱状图实例

最新推荐文章于 2024-08-24 09:46:19 发布

yiyiyiyi_

最新推荐文章于 2024-08-24 09:46:19 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/qiqiyiyi_/article/details/106439350

版权

本文介绍了在Vue项目中如何使用ECharts，从npm安装ECharts库，到在main.js中引入，然后创建图表容器，初始化ECharts实例，设置配置项和数据，最后展示完整代码实现柱状图的绘制。

摘要由CSDN通过智能技术生成

vue 中 EChart 的使用，简单实例

1、npm 安装 ECharts

命令： npm install echarts --save

2、引入 ECharts

在 main.js 中通过

	import echarts from "echarts";
	Vue.prototype.$echarts = echarts;

3、定义盒子存放图表

	<template>
  		<div class="home">
  			<!-- 定义的容器 -->
    		<div id="myChart" style="width: 600px;height:400px;"></div>
  		</div>
	</template>

4、初始化 EChart 图表

	let myChart = this.$echarts.init(document.getElementById("myChart"));

5、指定图表的配置项和数据

	var option = {
   
        // 标题
        title: {
   
          // 主标题
          text: "某地区蒸发量和降水量",
          // 副标题
          subtext: "纯属虚构"
        },
        // 气泡提示
        tooltip: {
   
          // axis 指的是在轴上显示   item 指的是鼠标在内容上显示（默认）
          trigger: "axis"
        },
        // 图例
        legend: {
   
          data: ["蒸发量", "降水量"]
        },
        // 右上角的工具
        toolbox: {
   
          // 是否显示工具箱 true显示 false不显示
          show: true,
          // 提供哪些工具
          feature: {
   
            // 数据视图
            dataView: {
   
              // 是否显示
              show: true,
              // 是否只读 false可修改  true只读
              readOnly: false
            },
            // 切换样式
            magicType: {
   
              // 显示柱状图 图标和折线图 图标
              show: true,
              // 定义切换类型 line折线图 bar柱状图
              type: ["line", "bar"]
            },
            // 相当于刷新 还原
            restore: {
    show: true },
            // 下载图标 点击下载成图片
            saveAsImage: {
    show: true }
          }
        }