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

【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图

vue+Element UI项目中数据分析功能需要用到圆环图 折线图 饼图 柱状图等,可视化图形分析

安装流程及示例

1.安装依赖

npm install echarts --save

2.在main.js中引入并挂载echarts

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

3.在需要使用echarts的页面引入echarts

import * as echarts from 'echarts'

4.在需要显示echarts地方引用以上定义的chart

  <div id="myChartjw" :style="{ width: '366px', height: '30px' }"></div>

5.在 mounted中加载echarts定义的方法

  mounted(){this.progressBar()},

6.在methods方法中定义一个方法,并在此方法中写echarts代码

  progressBar() {var chartDom4 = document.getElementById("myChartjw");var myChart4 = echarts.init(chartDom4);var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};option && myChart4.setOption(option);},

实现效果

在这里插入图片描述

http://www.lryc.cn/news/302260.html

相关文章:

  • Unity之XR Interaction Toolkit如何在VR中实现一个可以拖拽的UI
  • 开源项目热度榜单
  • Ubuntu系统搭建HadSky论坛并结合内网穿透实现无公网ip远程访问
  • gowin GW1N4 LED
  • Linux ipvlan详解(l2、l3、l3s和bridge、private和vepa模式)
  • 理解并实现OpenCV中的图像平滑技术
  • ChatGPT高效提问—prompt实践(白领助手)
  • Code Composer Studio (CCS) - Comment (注释)
  • springboot/ssm校园菜鸟驿站管理系统Java校园快递取件管理系统
  • 【Mybatis】TypeHandler使用
  • [计算机网络]---网络编程套接字
  • 分布式文件系统 SpringBoot+FastDFS+Vue.js【二】
  • 开源软件:推动软件行业繁荣的力量
  • [杂记]mmdetection3.x中的数据流与基本流程详解(数据集读取, 数据增强, 训练)
  • 阿里云香港轻量应用服务器怎么样,建站速度快吗?
  • 事务及在SpringBoot项目中使用的两种方式
  • stm32--笔记
  • 2024前端面试准备之CSS篇(二)
  • 轨道交通信号增强与覆盖解决方案——经济高效,灵活应用于各类轨道交通场景!
  • 学习数据接构和算法的第10天
  • 初识KMP算法
  • Javaweb之SpringBootWeb案例之AOP概述及入门的详细解析
  • 【Java代码洁癖】NO.2 单元测试mock显式赋值,不能忍
  • 2024.2.19
  • B端系统升级方案模板:针对美观性和体验性升级(总体方案)
  • 第九篇:node静态文件服务(中间件)
  • 软件测试-功能测试-测试流程-如何进行需求评审?对于测试人员来讲,如何从测试的角度评审需求文档?
  • 无刷电机驱动详解
  • Linux+Win双系统远程重启到Win
  • 【XR806开发板试用】+移植rosserial到XR806