vue使用echarts的使用

本文介绍了ECharts,一个基于JavaScript的开源数据可视化库,适用于PC和移动设备,广泛兼容各类浏览器。文章详细阐述了ECharts的安装和基本使用方法,包括在Vue项目中引入ECharts,以及绘制基础折线图的步骤。总结提到,ECharts 5.0及以上版本的引入方式略有不同,需注意选择合适的引入方法。
摘要由CSDN通过智能技术生成

echarts数据可视化

1.简介

1.什么是echarts?

​ ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖canvas画布矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

2.echarts的特点?
开源,运行在 PC 和移动设备,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等0

一、基础使用

  1. 安装使用 安装4.8.0版本
npm install echarts@版本号
  1. 引入main.js
import echarts from 'echarts';
Vue.prototype.echarts = echarts;
  1. 新建Echarts.vue文件
<template>
   <div class="echart" ref="echart"></div>
</template>

<script>
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.echart);
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.echart {
  height: 100vh;
  width: 100vh;
  /* background: #f00; */
}
</style>
  1. 简单实现的echarts图
    在这里插入图片描述

总结:如果echarts版本在5.0以下使用三种引入的方式都行,
如果echarts的版本在5.0以上,使用require的方式引入或者import * as echarts from 'echarts’

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值