vue使用echarts的使用

程序潇潇

已于 2022-04-17 21:39:45 修改

阅读量1.1k

点赞数 6

分类专栏： echarts 文章标签： echarts

于 2022-04-17 21:39:09 首次发布

本文链接：https://blog.csdn.net/fxxx_/article/details/124237212

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了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

一、基础使用

安装使用安装4.8.0版本

npm install echarts@版本号

引入main.js

import echarts from 'echarts';
Vue.prototype.echarts = echarts;

新建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>