Echarts可视化图形
文章平均质量分 50
以Echarts为主,其他插件为辅
Kingsaj
这个作者很懒,什么都没留下…
展开
-
若依vue --雷达图封装使用
1:封装<template> <div ref="chart" :class="className" :style="{ width: width, height: height }"></div></template><script>export default { props: { className: { type: String, default: 'chart', }, w原创 2021-11-28 16:49:33 · 351 阅读 · 0 评论 -
解决echarts点击事件调用n次的问题
问题描述:最近项目中有关于echarts的一些需求,为了完善需求我也是被坑了不少。在给echarts点击事件调接口的时候。我发现接口请求次数会依次增加,比如第一次点击会调用一次,第二次点击会调用两次,第三次会调用四次,依次增加。这完全是个大bug啊。于是我开始查询各种资料寻求解决办法。但是都没有一个准确的解决方法,最终我结合了几个人的解决办法进行了一次整合。终于,让我开心了一回。bug也不会重复出现。为了我以后不再跳进这个坑,进行一次总结。// 解决点击事件调用n次的问题原创 2021-11-17 13:36:21 · 740 阅读 · 0 评论 -
vue -- echarts 饼图/柱状图添加点击事件
echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,即在echarts最后面添加上以下这段代码就可以了。绑定点击事件myChart.on("click", clickFunc);事件处理函数param : echarts的事件处理函数自带的参数,包含了本次触发对象的所有相关参数function clickFunc(param) { alert(param.data.name); // 当前点击对象的name}在vue中使用<temp原创 2021-11-15 15:05:50 · 9224 阅读 · 2 评论 -
zdog 伪3D引擎
官网zdog 是一个圆形、扁平、设计师友好的伪3D引擎。Zdog 灵感来自 Dogz ,Zdog 使用相同的原理。 它使用 canvas 或 svg 中的2D绘图API渲染所有形状。 球体实际上是点。 Toruses实际上是圆圈。 胶囊实际上是粗线。 这是一个简单而有效的技巧。Zdog在美国用语中被称为“Zee-dog”,在英国被称为“Zed-dog”。...原创 2021-09-29 17:52:22 · 1113 阅读 · 0 评论 -
Vue3 -- echarts 柱状图 使用
效果:<template> <div style="height: 400px; margin-top: 20px" ref="liveChart"></div></template><script>// 引入echartsimport * as echarts from "echarts/core";// 引入提示框,标题,直角坐标系等组件,组件后缀都为 Componentimport { TitleCompon原创 2021-09-29 15:48:18 · 2617 阅读 · 0 评论 -
echarts -- 折柱混合图(封装处理)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>******</title> <link rel="stylesheet" href="./../lib/layui/css/layui.c.原创 2021-05-26 10:33:06 · 364 阅读 · 0 评论 -
echarts -- 地图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图</title> <style> body { bac.原创 2021-05-26 10:09:40 · 171 阅读 · 0 评论 -
echarts --折柱混合图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折柱混合</title> <style> .item_t_l { .原创 2021-05-12 11:03:49 · 2560 阅读 · 0 评论 -
实现百分比饼图
引入 easy-pie-chart.js 地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百分比饼图</title> <style>..原创 2021-05-12 00:13:16 · 162 阅读 · 0 评论 -
echarts -- 折线图
效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折线</title></head><body> <div id="原创 2021-05-11 11:28:46 · 70 阅读 · 0 评论 -
echarts -- 雷达图
效果:在这里插入代码片原创 2021-05-10 21:42:59 · 392 阅读 · 0 评论