vus3+Ts Apache ECharts 的使用（可视化图表库）

是什么：一个基于 JavaScript 的开源可视化图表库

ECharts官网：快速上手 - Handbook - Apache ECharts

1.下载
npm install echarts --save

2.基本使用(实现代码)

<script setup lang='ts'>// 导入echartsimport * as echarts from 'echarts';import 'echarts/theme/macarons.js'import { ref, onMounted } from 'vue';//  定义dom变量用于获取dom节点const dom: any = ref<HTMLElement | null>(null);// 定义变量用于接收初始化echarts实例let myChart: any = ''// 绘制图表onMounted(() => {//基于准备好的dom，初始化echarts实例myChart = echarts.init(dom.value, 'macarons');optionsHandler()})//专门用于做配置项的方法const optionsHandler = () => {//开始配置myChart.setOption({//标题title: {text: 'ECharts 入门示例'},//提示tooltip: {},//图例legend: {data: ['销量']},//X轴xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},//Y轴yAxis: {},//数据series: [{name: '销量',type: 'bar',    //图形形状data: [5, 20, 36, 10, 10, 20]}]})}</script><template><div class="data"><div ref="dom" style="height: 100%"></div></div></template><style scoped lang='scss'>.data {height: 520px;width: 1200px;margin: 0;}</style>

效果图

注意

macarons 是ECharts提供的自定义主题颜色的Api

这里使用的是全部导入会有损性能，按需引入请翻看官网在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

以上就是最基础的一个可视化统计图了，如果对你有帮助，请赏赐作者一个赞吧

欢迎评论交流

vus3+Ts Apache ECharts 的使用（可视化图表库）相关推荐

Echarts 开源的可视化图表库快速制图工具
说明: 制图工具,开源的,国内最流行的可视化图表库安装在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
java——插件echarts数据可视化图表库
插件echarts数据可视化图表库一.使用idea创建javaWeb工程二.下载echarts导入js文件三.使用echarts. 特别鸣谢:感谢林老师传授嘿嘿嘿 -------- 创作不易, ...
D3 vs G2 vs Echarts以及其他可视化图表
初次接触 web 图表开发的工程师,面对众多的可视化工具库难免会有疑惑,比如说: 这库的产品定位? 哪个更好学? 哪个更强大? 让我们带着问题,从这三个库的命名出发,比较一下: Echarts 简述: ...
可视化图表库--goJS详细学习线路
1.GoJS简介 GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS 用于在HTML上创建 ...
可视化图表库--goJS
GoJS是Northwoods Software的产品. Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯jav ...
前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子
eCharts是一个基于 JavaScript 的开源可视化图表库. 实现集成了前端可视化的多种手段. 官网链接:ECharts官网初学者建议去官网看看起步的内容,另外博主也是今天刚学的噢,写得不好 ...
layui导入模板数据_数据可视化图表教程echarts，第一讲
1 我们写web项目,展示数据的地方,可能会使用到图表.今天就讲这个玩意. 本教程暂时定为三讲:(随后情况,如果有新的研究,会有所更新!) 第一讲饼图的使用第二讲柱状图的使用第三讲拆 ...
Java数据可视化 (JavaFX, Apache ECharts)
需求定义~, &, ? 三种新运算. ~ a b c = a + b – c & a b c d e = a + b + c – d – e ? a b c d = a + b – ...

vus3+Ts Apache ECharts 的使用（可视化图表库）

vus3+Ts Apache ECharts 的使用（可视化图表库）

vus3+Ts Apache ECharts 的使用（可视化图表库）相关推荐

最新文章

热门文章