项目素材地址： https://gitee.com/xiaoqiang001/eckarts_open_class.git
学习目的：
1、可视化面板布局适配屏幕
2、利用ECharts 实现柱状图展示
核心技术：
-基于 flexible.js + rem 智能大屏适配
- VScode cssrem插件
- Flex 布局
- Less 使用
- 基于ECharts 数据可视化展示
2024年11月24日
项目素材地址： https://gitee.com/xiaoqiang001/eckarts_open_class.git
学习目的：
1、可视化面板布局适配屏幕
2、利用ECharts 实现柱状图展示
核心技术：
-基于 flexible.js + rem 智能大屏适配
- VScode cssrem插件
- Flex 布局
- Less 使用
- 基于ECharts 数据可视化展示
2024年11月24日
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图
官网：
https://echarts.apache.org/zh/index.html
2024年11月24日
ECharts，全称Enterprise Charts，是一款由百度团队开发并开源，后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表，广泛应用于数据分析、商业智能、网页开发等领域。以下是关于ECharts的详细介绍：
2024年11月24日
导读：echarts是一个基于 JavaScript 的开源可视化图表库，里面包含很多常用且美观的统计图表。作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，一起来看一下吧。
echarts是一个基于 JavaScript 的开源可视化图表库，里面包含很多常用且美观的统计图表。但是由于大部分产品经理不太懂代码，导致他们在画原型图的时候，不能直接使用该工具，就算会代码，使用起来也不太方便。所以作者就通过使用中继器，结合echart的图标代码，做出可视化图表的原型模板，用户使用该模板时只需在中继器表格中填入数据，就能够自动生成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>