使用border-images注意点
一定要设置border属性 （有边框，才能设置边框背景图）
/ 边框背景图资源 /
border-image-source: url(./images/border.jpg);
/ 边框背景图剪裁 是边框的 上 右 下 左宽度 注意点：这个属性不能写单位 要写数字/
border-image-slice: 167 167 167 167;

/ 背景图平铺、均匀平铺/
border-image-repeat: repeat; //// round;

/ 注意点1：不规则边框背景图，需要根据每一个边单独设置border宽度 /
border: 48px solid transparent;
border-width: 51px 38px 21px 132px; //width 与 slice 背景图剪裁尺寸对应
image.png

  1. 简写:    不简写 内容会被border挤到里面
  2. border:1px solid transparent;
  3. border-image: url(../image/border.png ) 50 40 25 130/50px 40px 25px 130px;
  4. // 面板默认内边距
  5.  padding: 20px 30px; 
  9.  .box {
  10.       width: 350px;
  11.       height: 160px;
  12.       background-color: #222;
  13.       margin: 30px;
  14.     }
  15.     .box {
  16.       /* *** 一定要在border-image之前就设置盒子的边框属性。 要有边框才可以使用边框背景图 */
  17.       border: 20pxsolid#222;
  18.       /* 边框背景图border-image复合属性 */
  19.       border-image: url(./images/border.png) 554025130stretch;
  20.       /* 注意点1： 如果不规则图形， 盒子的边框宽度也要设置成不规则宽度 */
  21.       border-width: 55px40px25px130px;
  22.       /* 注意点2： 如果给元素设置了border，则会把盒子宽高撑开
  23.           默认 box-sizing: content-box 外扩盒子 = content + padding + border
  24.           解决方案，设置内减盒子  box-sizing: border-box  总宽度不变，有了padding和border之后，盒子content会自动内减
  25.           */
  26.       box-sizing: border-box;
  27.       /* 注意点3：设置内减盒子之后，由于content自动内减。影响盒子内容布局
  28.           解决方案： 给盒子添加一个子元素，采用子绝父相定位来把内容撑开
  29.           */
  30.       position: relative;
  31.     }
  32.     .inner {
  33.       /* 子绝父相 */
  34.       position: absolute;
  35.       left: -130px;
  36.       top: -55px;
  37.       right: -40px;
  38.       bottom: -25px;
  39.       padding: 20px30px
  40.     }
  41.     .box2 {
  42.       width: 400px;
  43.       height: 300px;
  44.     }
  45.     .box3 {
  46.       width: 500px;
  47.       height: 200px;
  48.     }
  49.   </style>
  50. </head>
  51. <body>
  52.   <divclass="box box1">
  53.     <divclass="inner">
  54.       111
  55.     </div>
  56.   </div>
  57.   <divclass="box box2"></div>
  58.   <divclass="box box3"></div>
  59. </body>

https://echarts.apache.org/handbook/zh/get-started
image.png
image.png

使用步骤：

  1. 引入echarts 插件文件到html页面中



3.js初始化图表 *
// 3.1 创建echarts实例
let myChart = echarts.init(document.querySelector(‘#main’));

4.指定配置项和数据(option)

  1.   let option = {
  2.             xAxis: {
  3.                 type: 'category',
  4.                 //坐标轴旁边文字提示
  5.                 name: '城市',
  6.                 //0.水平分割线 (把水平方向隔开，线是垂直的)
  7.                 splitLine: {
  8.                     show: false,
  9.                     lineStyle: {
  10.                         color: ['#f00']
  11.                     }
  12.                 },
  13.                 //1.轴线样式
  14.                 axisLine: {
  15.                     //线条样式
  16.                     lineStyle: {
  17.                         color: '#3771bd'
  18.                     }
  19.                 },
  20.                 //2.刻度样式
  21.                 axisTick: {
  22.                     show: true,
  23.                     //刻度样式
  24.                     lineStyle: {
  25.                         color: '#f00'
  26.                     }
  27.                 },
  28.                 //3.刻度文字
  29.                 axisLabel: {
  30.                     color: '#0092dc'
  31.                 },
  32.                 data: ['上海', '', '北京', '', '合肥', '', '......', '', '杭州', '', '济南', '', '重庆']
  33.             },
  34.             //y轴如果是对象 ： 只有左边的线
  35.             //y轴如何是数组 ： 第一个对象左边线，第二个对象右边的线
  36.             yAxis: [
  37.                 {
  38.                     type: 'value',
  39.                     //0.垂直分割线 (把垂直方向隔开，线是水平的)
  40.                     splitLine: {
  41.                         show: true,
  42.                         lineStyle: {
  43.                             color: ['#f00', '#ff0']
  44.                         }
  45.                     },
  46.                     //1.轴线样式
  47.                     axisLine: {
  48.                         show: true,
  49.                         //线条样式
  50.                         lineStyle: {
  51.                             color: '#3771bd'
  52.                         }
  53.                     },
  54.                     //2.刻度样式
  55.                     axisTick: {
  56.                         show: true,
  57.                         //刻度样式
  58.                         lineStyle: {
  59.                             color: '#f00'
  60.                         }
  61.                     },
  62.                     //3.刻度文字
  63.                     axisLabel: {
  64.                         color: '#0092dc'
  65.                     },
  66.                 }, {
  67.                     type: 'value',
  68.                     //1.轴线样式
  69.                     axisLine: {
  70.                         show: true,
  71.                         //线条样式
  72.                         lineStyle: {
  73.                             color: '#3771bd'
  74.                         }
  75.                     },
  76.                     //2.刻度样式
  77.                     axisTick: {
  78.                         show: true,
  79.                         //刻度样式
  80.                         lineStyle: {
  81.                             color: '#f00'
  82.                         }
  83.                     },
  84.                     //3.刻度文字
  85.                     axisLabel: {
  86.                         color: '#0092dc'
  87.                     },
  88.                 }
  89.             ],
  90.             series: [
  91.                 {
  92.                     //设置所有柱子的样式
  93.                     itemStyle: {
  94.                         //渐变颜色
  95.                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  96.                             { offset: 0, color: '#00faf9' },
  97.                             { offset: 1, color: '#0065cf' }
  98.                         ])
  99.                     },
  100.                     data: [
  101.                         1200,
  102.                         2000,
  103.                         1500,
  104.                         800,
  105.                         700,
  106.                         item,
  107.                         item,
  108.                         item,
  109.                         900,
  110.                         1000,
  111.                         1101,
  112.                         1200,
  113.                         1608
  114.                     ],
  115.                     type: 'bar'
  116.                 }
  117.             ]
  118.         };

5.渲染图表到页面
myChart.setOption(option);

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series:图表内容

  • 系列列表。每个系列通过 type 决定自己的图表类型

  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

    //图表内容
    series: [
    {

    //设置所有柱子的样式( 柱形图可用)

    1.   // 单个柱子设定宽度<br />                    barWidth:'30%',<br />                    itemStyle: {<br />                        //渐变颜色<br />                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [<br />                            { offset: 0, color: '#00faf9' },<br />                            { offset: 1, color: '#0065cf' }<br />                        ])<br />                    },

    // 折线图

    //平滑线
    smooth: true,
    //线条样式
    itemStyle: {
    color: ‘#00b7bf’
    },
    //小圈圈大小
    symbolSize: 4,
    //小圈圈形状
    symbol: ‘emptyCircle’,
    //最大值最小值大头针标记
    // markPoint: {
    // data: [
    // { type: ‘max’, name: ‘Max’ },
    // { type: ‘min’, name: ‘Min’ }
    // ]
    // },
    //平均值标记虚线
    // markLine: {
    // data: [{ type: ‘average’, name: ‘Avg’ }]
    // }

//饼图
  1.             {<br />                    name: '点位分布',<br />                    type: 'pie',<br />                    //两个圆大小<br />                    radius: [20, '80%'],<br />                    //圆心位置<br />                    center: ['50%', '50%'],<br />                    //南丁格尔图：通过半径区分数据大小（半径越大数据越大）<br />                    // radius : 数据越大，角度越大<br />                    // area : 圆心角相同<br />                    roseType: 'radius',<br />                    //设置所有文字颜色<br />                    // label:{<br />                    //   color:'#f00'<br />                    // },<br />                    itemStyle: {<br />                        //数据圆角<br />                        borderRadius: 0<br />                    },<br />                    data: [<br />                        { value: 38, name: '云南', label: { color: '#f00' }, },<br />                        { value: 32, name: '北京' },

//圆环

data: [
{ value: 100, itemStyle: { color: ‘#12274d’ } },
{ value: 100, itemStyle: { color: ‘transparent’ } },
{ value: 100, itemStyle: { color: ‘transparent’ } },
{
value: 100, itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: ‘#00c1dd’
},
{
offset: 1,
color: ‘#006ac4’
}
])
}
},
]

  1.                 ]
  • xAxis：直角坐标系 grid 中的 x 轴
    • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

    • yAxis：直角坐标系 grid 中的 y 轴

      //y轴如果是对象 ： 只有左边的线 yAxis:{ },
      //y轴如何是数组 ： 第一个对象左边线，第二个对象右边的线 yAxis: [{ },{ }],
      yAxis: {
      type: ‘value’,
      //0.垂直分割线 (把垂直方向隔开，线是水平的)
      splitLine: {
      show: true,
      lineStyle: {
      color: [‘#f00’, ‘#ff0’]
      }
      },
      //1.轴线样式
      axisLine: {
      show: true,
      //线条样式
      lineStyle: {
      color: ‘#3771bd’
      }
      },
      //2.刻度样式
      axisTick: {
      show: true,
      //刻度样式
      lineStyle: {
      color: ‘#f00’
      }
      },
      //3.刻度文字
      axisLabel: {
      color: ‘#0092dc’
      },
      },

grid：直角坐标系内绘图网格。 //调整图表的位置 内边距

// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},

title：标题组件

  1.         title: {<br />                text: '单位:万',<br />                left: '40',<br />                textStyle: {<br />                    color: '#204b84'<br />                }<br />            },

tooltip：提示框组件

//鼠标移入提示框
tooltip: {
trigger: ‘axis’
},

legend：图例组件

//上方小提示图标： 文字必须与name保持一致
legend: {
top: ‘top’,
left: ‘center’,
//文字样式
textStyle: {
color: ‘#1d4175’
}
},

color：调色盘颜色列表数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

// color设置我们线条的颜色 注意后面是个数组
color: [‘pink’, ‘red’, ‘green’, ‘skyblue’],

image.png

image.png

image.png
image.png

// 页面滚动表格自适应

  1. window.onresize = function () {<br />        myChart.resize();<br />        myChart1.resize();<br />    }

image.png
image.png

参考1月6号 数据可视化实战 案例

  1. // 格式： 当前时间：2020年3月17-0时54分14秒
  2. <script>
  3.            let t = null;
  4.             t = setTimeout(time, 1000);//開始运行
  5.             function time() {
  6.                 clearTimeout(t);//清除定时器
  7.                 dt = new Date();
  8.                 var y = dt.getFullYear();
  9.                 var mt = dt.getMonth() + 1;
  10.                 var day = dt.getDate();
  11.                 var h = dt.getHours();//获取时
  12.                 var m = dt.getMinutes();//获取分
  13.                 var s = dt.getSeconds();//获取秒
  14.                 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
  15.                 t = setTimeout(time, 1000); //设定定时器，循环运行     
  16.             }
  17.  </script>