当前位置: 首页 > news >正文

vue中Echarts的使用

文章目录

  • Echarts概述
    • 什么是Echarts
    • Echarts的好处
  • Vue中Echarts的使用
    • Echarts的安装
    • 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>

结果如下
在这里插入图片描述

相关文章:

  • VSCode主题设计大赛
  • LeetCode 1723: 完成所有工作的最短时间
  • OpenEuler 系统中 WordPress 部署深度指南
  • Fork/Join框架:CountedCompleter与RecursiveTask深度对比
  • C语言 — 通讯录模拟实现
  • 135. 分发糖果
  • 2.1.1 通信基础的基本概念
  • F(x,y)= 0 隐函数 微分法
  • sizeof 与strlen的区别
  • 基于规则的自然语言处理
  • 进程与线程的区别
  • 5-C#的DateTime使用
  • 2025.6.8
  • java 时区时间转为UTC
  • 一种停车场自动停车导航器的设计(论文+源码)
  • 31.2linux中Regmap的API驱动icm20608实验(编程)_csdn
  • 【存储基础】对象存储基础知识
  • 动态生成 PV 的机制:使用 NFS-Client Provisione
  • Python训练打卡Day43
  • Angular中Webpack与ngx-build-plus 浅学
  • 如何做关于橱柜网站/cdq百度指数
  • 手表网站模板/sem什么意思
  • 自己给自己网站做seo/下百度安装
  • 免费的做网站/seo推广优化服务
  • 妇科医院网站建设怎么做/seo推广官网
  • 筑巢做网站怎么样/一级造价工程师