我这是黑马教学以及自己学习的记录 

一、大屏可视化的布局问题

1、首先根据设计稿的尺寸来进行编写，视频内设计稿是1920，标准屏幕。

2、采用了flexible.js和px-to-rem

(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (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();});})();