vue中Echarts的使用
文章目录
- Echarts概述
- 什么是Echarts
- Echarts的好处
- Vue中Echarts的使用
- Echarts的安装
- Echarts的引入
Echarts概述
什么是Echarts
Apache ECharts:一个基于 JavaScript 的开源可视化图表库。
其官网如下:https://echarts.apache.org/zh/index.html
Echarts的好处
- 丰富的图表类型:提供开箱即用的 20 多种图表和十几种组件,并且支持各种图表以及组件的任意组合。
- 专业的数据分析:通过数据集管理数据,支持数据过滤、聚类、回归,帮助实现同一份数据的多维度分析。
- 健康的开源社区:活跃的社区用户保证了项目的健康发展,也贡献了丰富的第三方插件满足不同场景的需求。
- 强劲的渲染引擎:Canvas、SVG 双引擎一键切换,增量渲染、流加载等技术实现千万级数据的流畅交互。
- 优雅的可视化设计:默认设计遵从可视化原则,支持响应式设计,并且提供了灵活的配置项方便开发者定制。
- 友好的无障碍访问:智能生成的图表描述和贴花图案,帮助视力障碍人士了解图表内容,读懂图表背后的故事。
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>
结果如下