最近在对工作中的数据进行分析，本着自己是个业余程序员的身份，想卖弄下自己的小技术，想起之前使用过的图表控件Echarts，果断上网搜索一波。
有段时间没用过Echarts了，更新升级跨度比较大，功能更强了，内容也更丰富了，啥也不说了，直接用起来。
第一步：上官网，下载
我们的目的就是快速的用起来，所以直接选择从GitHub下载编译产物，找到echarts.min.js脚本文件，直接下载到本地
第二步：新建网页文件，引入Echart脚本文件
2024年11月24日
最近在对工作中的数据进行分析，本着自己是个业余程序员的身份，想卖弄下自己的小技术，想起之前使用过的图表控件Echarts，果断上网搜索一波。
有段时间没用过Echarts了，更新升级跨度比较大，功能更强了，内容也更丰富了，啥也不说了，直接用起来。
第一步：上官网，下载
我们的目的就是快速的用起来，所以直接选择从GitHub下载编译产物，找到echarts.min.js脚本文件，直接下载到本地
第二步：新建网页文件，引入Echart脚本文件
2024年11月24日
坐标轴数据太多，只能滚动显示，滚动的时候，不想缩放，单纯平移就好。
option = {
title: {
// text: 'World Population',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
axisLine: {
show: false,
},
xAxis: {
type: 'value',
min:0,
max:25, //指定一个x轴的最大值，才会再滚动到第二屏的时候柱形长度不变长
},
dataZoom: [
{
type: 'inside', // 支持内部鼠标滚动平移
start: 25,
end: 100,
yAxisIndex: 0,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
},
],
yAxis: {
type: 'category',
axisTick: {
show: false,
},
minInterval: 1,
axisLine: {
show: false,
},
// min: 1, // 设置 y 轴显示的最小值
// max: 50, // 设置 y 轴显示的最大值
data: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K","L", "M", "N", "O", "P"],
},
series: [
{
// name: '2011',
type: 'bar',
data: [2, 1,1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 25],
boundaryGap: false, // 关闭坐标轴两端的空白
// min: , // 设置 y 轴显示的最小值
// max: 11, // 设置 y 轴显示的最大值
barWidth: 10, // 柱条的宽度,不设时自适应
itemStyle: {
color: 'rgba(147,98,246,1)',
},
label: {
show: true,
position: 'right',
color: 'rgba(147,98,246,1)',
fontSize: 14,
},
},
],
}2024年11月24日
与静态图相比，动态图更能够吸引他人注意，更好地呈现所需要表达的内容。本文介绍了动态图表在数据可视化中的作用，并以柱状图为例，分享了通过输入框控制调用外部的js图表的制作教程，希望对你有所帮助。
与静态图表相比，动态图表更能吸引观众的眼球并提供更好的视觉效果。动态元素可以吸引观众的注意力，使数据更生动、更具交互性。
2024年11月24日
数据可视化就是为了能将枯燥的数据更直观、简便的展现出来，今天我们实现在基础的Echarts柱状图中标注出最大、最小及平均值，不废话，直接进入主题；
第一步：初始化数据，展现基础图形
按官网教程操作步骤，我们下载好JS文件后，创建html网页文件，编辑文件写入内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '图表直观看出最大/最小值'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>2024年11月24日
在现在这个看重颜值的时代，很多东西都要注重美观，你做的excel简陋不美观，领导肯定不喜欢，让你回去重做，所以excel柱状图怎么做的好看美观，这就体现了你的水平。
简单的柱状图制作步骤一般是这样的：
2024年11月24日
鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度 H5 的一个可视化搭建系统。
本次更新支持了 Echarts 柱状图、折线图、饼图、漏斗图、雷达图等
2024年11月23日
当您的电脑一开机就出现一个名为 "A JavaScript error in the main process" 的弹窗时，这可能是由于多种原因引起的。解决此问题的步骤可能包括清除浏览器插件历史记录、更新软件和系统、重置 Skype、检查硬件和驱动程序问题、创建新的用户帐户、查看 JavaScript 代码以及考虑重新安装操作系统等。在执行这些步骤之前，请注意备份您的数据以防数据丢失，并确保您具有足够的技术知识和经验。如果您不确定如何执行这些步骤，请寻求专业帮助或联系技术支持人员。
2024年11月23日
今天给大家分享一个功能强健高水准的web弹窗组件VueLayer。
vue-layer 一款备受web开发者青睐的layer.js弹窗组件的vue.js版本。拥有丰富友好的操作体验及文档，兼容主流浏览器。
安装
$ npm i vue-layer -S引用
2024年11月23日
SweetAlert2是一款JavaScript用于弹出框提示的零依赖组件。它的最大特点是漂亮到让人眼前一亮的感觉，github上也有一万两千多颗星，足见其受欢迎的程度。它的设置上给予前端工程师很高的灵活性，可以设置不同的图标、动画、按钮、图片等等。目前已支持与主流的React、Vue、Angular框架的集成。目前最新版本：v10.10.4。