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>

结果如下