我这是黑马教学以及自己学习的记录
一、大屏可视化的布局问题
1、首先根据设计稿的尺寸来进行编写，视频内设计稿是1920，标准屏幕。
2、采用了flexible.js和px-to-rem
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
2、echarts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
快速上手 - Handbook - Apache ECharts
引入页面四步走
第一步导入echarts，将相关插件引入页面
<script src="js/echarts.min.js"></script>
第二步 将这个图表放入一个具有大小和唯一标识的DOM容器中
var myChart = echarts.init(document.querySelector(".bar .chart"));
第三步 指定配置项和数据
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};第四步 将配置项设置给echarts实例
myChart.setOption(option);最后一步 适配问题
// 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});opction实例中的属性
1、 grid决定我们的柱状图的大小
2、xAxis是控制x轴的各项设置
// 设置x轴标签文字样式
// x轴的文字颜色和大小
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// x轴样式不显示
axisLine: {
show: false
// 如果想要设置单独的线条样式
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}3、y轴的相关配置 yAxis
yAxis: [
{
type: "value",
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: 12,
},
// y轴的线条改为了 2像素
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2,
},
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],4、series是图表数据的控制属性
// 图标数据
series: [{
name:'新增粉丝',
data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
type: 'line',
smooth: true
},{
name:'新增游客',
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
type: 'line',
smooth: true
}
}]所有的配置项都可以在这找到
Documentation - Apache ECharts
完整代码
(function () {
// 1实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置项和数据
var option = {
// 设置的是线条颜色
color: ["pink"],
// 图标提示框组件
tooltip: {
// 触发方式 axis坐标轴
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
//网格配置 修改折线图 柱状图图表的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
// containLabel 刻度 坐标轴的刻度显示
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业",
],
axisTick: {
alignWithLabel: true,
},
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: "12",
},
// 不显示x坐标轴的样式
axisLine: {
show: false,
},
},
],
yAxis: [
{
type: "value",
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: 12,
},
// y轴的线条改为了 2像素
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2,
},
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "35%",
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5,
},
},
],
};
// 3. 把配置项给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();