当我们在项目中做一些数据可视化的时候很多人都很被动第一反应就是百度大多给的就是echarts 这时候肯定会很兴奋因为找到了数据可视化的插件了但是当你打开的时候看官方给的api 这时你又是一种无比痛苦的表情因为你看不懂找不到东和西这时候 v-echarts杀出来了

v-echarts 是饿了么团队开源的基于Vue和Echarts的图标工具他就是为了解决echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项的痛点 v-echarts只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

官方AIP v-charts

后期发现还有一个基于echarts开源封装的组件库里面都是写好的案例可以拿过来直接用 https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

地址变更了 https://www.makeapie.com/explore.html

<template><div><ve-ring :data="chartData" :settings="chartSettings" :extend="chartExtendRound" :legend="legend"></ve-ring></div>
</template><script>
export default {name: 'HelloWorld',data () {this.chartSettings = {dimension: '日期',metrics: '访问用户'}return {chartData: {columns: ['日期', '访问用户'],rows: [{ '日期': '0级', '访问用户': 1393 },{ '日期': '1级', '访问用户': 3530 },{ '日期': '2级', '访问用户': 2923 },{ '日期': '3级', '访问用户': 1723 },{ '日期': '4级', '访问用户': 3792 },{ '日期': '5级', '访问用户': 4593 },]},chartExtendRound:{series:{itemStyle: {normal:{color:function(params) {//自定义颜色var colorList = ['#f25944', '#10c0ff', '#dcca36', '#1886ff', 'red','yellow'];return colorList[params.dataIndex]}}},labelLine: {length: 10,length2: 10,lineStyle: {color: 'red'}}}},legend: [{right: 500,top: 100,textStyle: { color: "red" },itemGap: 25,itemWidth: 10,itemHeight: 10,orient: "vertical" // 'vertical'}]}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

虽然说配置项很简单了但是官方aip里面没有具体介绍这些aip 还是要参考echarts的配置项手册具体自己查看吧https://www.echartsjs.com/zh/option.html#title

v-echarts的介绍及使用相关推荐

前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子
eCharts是一个基于 JavaScript 的开源可视化图表库. 实现集成了前端可视化的多种手段. 官网链接:ECharts官网初学者建议去官网看看起步的内容,另外博主也是今天刚学的噢,写得不好 ...
oracle grant view access,oracle中v$access视图介绍
如果想了解如果杀掉一个正在运行的存储过程,请查询这篇文章: oracle杀掉一个正在运行的数据对象: 外链网址已屏蔽可以利用此视图的v$session视图配合使用,来杀掉一个正在运行的数据库对象(比 ...
Echarts简单介绍
开发工具与关键技术:VS 作者:黄金燕班级:18级(4)班撰写时间:2019.4.22 一.Echarts中的事件和行为在 ECharts 的图表中用户的操作都会有相应的事件,开发者可以监听 ...
《web开发：数据可视化（Echarts）介绍》
一.数据可视化介绍 1. 什么是数据可视化数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理 2. 数据可视化的 ...
基于Echarts+百度地图+Three.js的数据可视化系统
上周重构项目数据统计部分写了几篇echarts相关的文章,重构的后台前端框架改用Vue,关于Vue中引用Echarts及可能遇到的问题的文章如下所示: VUE中使用Echarts图表 VUE父组件异步 ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
ECharts可视化库学习笔记
数据可视化 Day01 1.什么是数据可视化 1.1 什么是数据可视化 1.2 可视化的实现方式 2.ECharts的基本使用 2.1 ECharts的介绍丰富的可视化类型多种数据格式支持流数据 ...
九十一、前端可视化ECharts的使用
@Author:Runsen 学python的应该听过Pyecharts.那么就应该有ECharts 这次介绍的就是一个基于Javascript的数据可视化库ECharts. Echarts 由百度的 ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
tx2 fpga pcie无法读写_Cyclone V SOC(ARM+FPGA)开发文档_之开发流程详解
双击可查看大图(手动狗头) 目录 Altera Cyclone V soc开发文档之软硬件开发 1 Cyclone V开发流程介绍 5 专业术语 5 Cyclone V软件开发介绍 6 U-BOOT ...

v-echarts的介绍及使用

官方AIP v-charts

v-echarts的介绍及使用相关推荐

最新文章

热门文章