contabs.min.js的簡單介紹

本文目錄一覽：

• 1、vs code有沒有壓縮混淆js代碼的擴展？
• 2、引js的時候是引echarts.js還是echarts.min
• 3、chartist-js怎麼配置

vs code有沒有壓縮混淆js代碼的擴展？

有的。安裝好以後，在js裡面按F1，就能壓縮代碼，壓縮好的代碼就當前目錄下面生成一個 xxx.min.js

網頁鏈接

引js的時候是引echarts.js還是echarts.min

這得看你下載的是哪個，你要是下載的是完整版就引用echarts.min.js，要是源代碼版就用

echarts.js。看看你下載的js名字叫什麼就引用什麼。

chartist-js怎麼配置

1、Chartist.js 是簡單的響應式圖表，可以作為前端圖表生成器。

主要特性：

使用基於配置的轉換簡單處理

使用明確的分離，具有巨大的靈活性(使用 CSS 樣式和 JS 控制)

使用 SVG

完全響應式，具有獨立 DPI

多媒體查詢的響應式配置

完全使用 SASS 構建，並且支持自定義

2、Chartist.js的使用方法

1）在其官方網站中下載JS包和CSS包，並且在頁面中引用它們：

link rel=”stylesheet” href=”bower_components/chartist/dist/chartist.min.css”

script src=”bower_components/chartist/dist/chartist.min.js”

2）繪圖，直接調用包內的函數即可，以線形圖為例來說明：

new Chartist.Line(‘.ct-chart’, {

 labels: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’],

 series: [

   {

     name: ‘Fibonacci sequence’,

     data: [1, 2, 3, 5, 8, 13]

   },

   {

     name: ‘Golden section’,

     data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]

   }

 ]

});

var easeOutQuad = function (x, t, b, c, d) {

 return -c * (t /= d) * (t – 2) + b;

};

var $chart = $(‘.ct-chart’);

var $toolTip = $chart

 .append(‘div class=”tooltip”/div’)

 .find(‘.tooltip’)

 .hide();

$chart.on(‘mouseenter’, ‘.ct-point’, function() {

 var $point = $(this),

   value = $point.attr(‘ct:value’),

   seriesName = $point.parent().attr(‘ct:series-name’);

 $point.animate({‘stroke-width’: ’50px’}, 300, easeOutQuad);

 $toolTip.html(seriesName + ‘br’ + value).show();

});

$chart.on(‘mouseleave’, ‘.ct-point’, function() {

 var $point = $(this);

 $point.animate({‘stroke-width’: ’20px’}, 300, easeOutQuad);

 $toolTip.hide();

});

$chart.on(‘mousemove’, function(event) {

 $toolTip.css({

   left: (event.offsetX || event.originalEvent.layerX) – $toolTip.width() / 2 – 10,

   top: (event.offsetY || event.originalEvent.layerY) – $toolTip.height() – 40

 });

});

3）實現的效果：