首页 > 其他分享 >vue使用echarts图表,有一个组件:v-charts

vue使用echarts图表,有一个组件:v-charts

时间:2023-07-21 19:22:25浏览次数:47  
标签:vue ve charts 图表 可视化 echarts

介绍

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

是vue的charts的封装。
在线地址:https://v-charts.js.org/#/

ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。

安装

npm安装

npm i v-charts echarts -S

单网页vue的数据可视化,插件名称介绍

饼图:ve-pie
折线图:ve-line
柱状图:ve-histogram
水滴图:ve-liquidfill
散点图:ve-scatter
=以上是5大基本图=

环形图:ve-ring
树图:ve-tree
漏斗图:ve-funnel
雷达图:ve-radar
词云图:ve-wordcloud
瀑布图:ve-waterfall

具体使用看官网

标签:vue,ve,charts,图表,可视化,echarts
From: https://www.cnblogs.com/andy0816/p/17572244.html

相关文章

  • vuex中的state更新了,但是页面不更新
    问题:我有两个页面,都是用了同一个变量,我在A页面更改了变量,然后我切到B页面,B页面上的变量没有刷新 原因:是因为我这两个页面的路由在配置的时候都是用了keep-alive,所以导致在两个keep-alive之间的页面切换时,页面不会主动刷新,只会展示第一次加载的内容router.config.js 解......
  • vue3如何正确设置 Tailwind CSS
    1.创建vue3项目npminitvue@latest需要配置的选择YES 2.切换到项目newProject目录下 npminstall下载依赖包 3.安装tailwind及其依赖项(PostCSS和自动前缀)npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest4.创建tailwind.config.js文件......
  • vue3+ts利用draggable组件实现拖拽
    界面展示实现步骤安装组件(vue3引入的包为vuedraggable@next,vue2为vuedraggable)npmi-Svuedraggable@next引入并使用组件<template><!--此页面template中没有可刷新页面的数据变化,拖拽会不起作用,所以加个activeInfo来使界面刷新-->{{activeInf......
  • 关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗
    vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题。问题描述:项目中A页面有table列表,在列表上方有“导入文件”按钮,点击按钮后需在浏览器新窗口中打开B页面,在B页面进行选择文件上传xlsx数据经过一系列校验后,将最终确定的数据返回回显......
  • vue3组合式 API_为 computed() 标注类型
    computed() 会自动从其计算函数的返回值上推导出类型<template><h3>{{doubleCount}}</h3></template><scriptsetuplang="ts">import{ref,computed}from"vue"constcount=ref<number>(100)//推导得到的类型:ComputedRef&l......
  • vue contenteditable编辑模式下,样式不生效
    换行后生成div,设置的样式没有生效 ***原因style标签上设置了scoped解决办法1、去掉style的scoped属性2、额外写一个style,不加scoped(vue支持多个style)<divclass="mainText-body"contenteditable="true"></div><stylelang="less"scoped>//删除......
  • vue3中组合式 API_为 reactive() 标注类型
    reactive() 也会隐式地从它的参数中推导类型<template><h3>{{book.title}}</h3><h3>{{book.author}}</h3></template><scriptsetuplang="ts">import{reactive}from"vue"constbook=reactive({title......
  • Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......
  • python3 爬取 vue-ssr数据
    使用Python3爬取Vue-SSR数据介绍在Web开发中,Vue-SSR(VueServerSideRendering)是一种将Vue.js应用程序在服务器端进行渲染的技术。它允许搜索引擎爬取到完整的HTML页面,这对于SEO(搜索引擎优化)非常重要。本文将介绍如何使用Python3爬取Vue-SSR数据的方法,并提供相应的代码示例。准......