vue中Echarts的使用

Echarts概述

什么是Echarts

Apache ECharts：一个基于 JavaScript 的开源可视化图表库。
其官网如下：https://echarts.apache.org/zh/index.html

Echarts的好处

1. 丰富的图表类型：提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
2. 专业的数据分析：通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
3. 健康的开源社区：活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
4. 强劲的渲染引擎：Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
5. 优雅的可视化设计：默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
6. 友好的无障碍访问：智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。

Vue中Echarts的使用

Echarts的安装

# 使用npm安装
npm install echarts

# 使用yarn 安装
yarn add echarts

Echarts的引入

<template>
  <!-- 这里的区域就是图标要展示的区域
  和echarts.init(this.$refs.mychart);联合使用
  这里的ref="mychart"和this.$refs.mychart保持一致。
  记得给.chart加宽高，否则不生效。
  -->
  <div ref="mychart" class="chart"></div>
</template>

<script>
// 引入echarts主模块
import * as echarts from "echarts";

export default {
  // 使用 mounted 钩子函数。 在组件挂载后执行
  // 也不一定在 mounted 中使用，也可以在 created 中使用，具体看需求
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    //const myChart = echarts.init(document.querySelector(".chart"));
    const myChart = echarts.init(this.$refs.mychart);
    // 注意这里使用ref和$refs,只在此组件中的叫做.chart的元素生效。
    // 如果不使用 ref和$refs 可能出现别的组件中.chart的元素也会被渲染。

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "衣服销量",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>

<style>
.chart {
  width: 600px;
  height: 400px;
}
</style>

结果如下