JSECharts：高效、易用的圖表庫

一、JSECharts 簡述

JSECharts 是基於 JavaScript 和 HTML5 Canvas 實現的一個圖表庫，該庫提供了各類常用的圖表類型，包括折線圖、柱狀圖、餅圖等。JSECharts 具有以下特點：

1、支持大數據量的圖表渲染。

2、易於定製和擴展。

3、操作簡單，易於上手。

二、JSECharts 應用場景

JSECharts 可以廣泛應用於數據可視化界面的設計，常見的應用場景包括：

1、企業管理報告中的數據可視化展示。

2、互聯網金融產品中的數據展示。

3、大數據分析平台中的可視化分析展示。

4、在線考試系統等。

三、JSECharts 圖表類型

JSECharts 支持多種類型的圖表展示，包括折線圖、柱狀圖、餅圖、雷達圖、散點圖等。

以柱狀圖為例，以下代碼實現了一個簡單的柱狀圖：

const option = {
  title: {
    text: '柱狀圖示例'
  },
  tooltip: {},
  xAxis: {
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

上述代碼實現了一個簡單的柱狀圖，其中 option 是圖表的配置項。配置項中可包含圖表的標題、x 軸、y 軸、圖例、數據項等信息。使用 echarts.init 初始化一個 echarts 實例。

四、JSECharts 動態更新數據

JSECharts 提供了動態更新數據的方法，可以使得圖表更加靈活。以下是一個動態更新折線圖的實現：

// 初始數據
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
// 更新數據
setInterval(function () {
  option.series[0].data = [Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000];
  myChart.setOption(option, true);
}, 2000);

該代碼實現了一個動態更新折線圖的例子。setInterval 函數每兩秒鐘更新一次數據。使用 setOption 方法更新圖表配置項並將新的配置項設置給 echarts 實例。

五、JSECharts 事件綁定

JSECharts 提供了多個事件供使用者使用，如點擊事件、滑鼠移入事件、滑鼠移出事件等。以下是一個點擊柱狀圖彈窗的實現：

// 點擊事件
myChart.on('click', function (params) {
  if (params.componentType === 'series') {
    alert('你點擊了' + params.name + '，銷量為' + params.value);
  }
});

該代碼為柱狀圖添加了一個點擊事件，當用戶點擊某個柱子時，彈出一個提示框，顯示該柱子對應的銷量。

六、JSECharts 地圖組件

JSECharts 提供了地圖組件，可以實現全國各省市的地圖可視化展示功能。以下是一個簡單的地圖組件實現代碼：

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}
{c}'
  },
  visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],           
    calculable: true
  },
  series: [
    {
      type: 'map',
      mapType: 'china',
      label: {
        show: true
      },
      data: [
        {name: '北京', value: Math.round(Math.random() * 1000)},
        {name: '天津', value: Math.round(Math.random() * 1000)},
        {name: '上海', value: Math.round(Math.random() * 1000)},
        {name: '重慶', value: Math.round(Math.random() * 1000)},
        {name: '河北', value: Math.round(Math.random() * 1000)},
        {name: '河南', value: Math.round(Math.random() * 1000)},
        {name: '雲南', value: Math.round(Math.random() * 1000)},
        {name: '遼寧', value: Math.round(Math.random() * 1000)},
        {name: '黑龍江', value: Math.round(Math.random() * 1000)},
        {name: '湖南', value: Math.round(Math.random() * 1000)},
        {name: '安徽', value: Math.round(Math.random() * 1000)},
        {name: '山東', value: Math.round(Math.random() * 1000)},
        {name: '新疆', value: Math.round(Math.random() * 1000)},
        {name: '江蘇', value: Math.round(Math.random() * 1000)},
        {name: '浙江', value: Math.round(Math.random() * 1000)},
        {name: '江西', value: Math.round(Math.random() * 1000)},
        {name: '湖北', value: Math.round(Math.random() * 1000)},
        {name: '廣西', value: Math.round(Math.random() * 1000)},
        {name: '甘肅', value: Math.round(Math.random() * 1000)},
        {name: '山西', value: Math.round(Math.random() * 1000)},
        {name: '內蒙古', value: Math.round(Math.random() * 1000)},
        {name: '陝西', value: Math.round(Math.random() * 1000)},
        {name: '吉林', value: Math.round(Math.random() * 1000)},
        {name: '福建', value: Math.round(Math.random() * 1000)},
        {name: '貴州', value: Math.round(Math.random() * 1000)},
        {name: '廣東', value: Math.round(Math.random() * 1000)},
        {name: '青海', value: Math.round(Math.random() * 1000)},
        {name: '西藏', value: Math.round(Math.random() * 1000)},
        {name: '四川', value: Math.round(Math.random() * 1000)},
        {name: '寧夏', value: Math.round(Math.random() * 1000)},
        {name: '海南', value: Math.round(Math.random() * 1000)},
        {name: '台灣', value: Math.round(Math.random() * 1000)},
        {name: '香港', value: Math.round(Math.random() * 1000)},
        {name: '澳門', value: Math.round(Math.random() * 1000)}
      ],
      roam: false,
      itemStyle: {
        normal: {
          borderWidth: .5,          
          borderColor: '#009fe8',   
          areaColor: '#fff'   
        },
        emphasis: {                 
          borderWidth: .5,
          borderColor: '#4b0082',
          areaColor: '#fff',
        }
      }
    }
  ]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

上述代碼實現了全國各省市的地圖可視化展示功能。使用 mapType 指定地圖類型為 china，使用 data 載入數據，設置漫遊 roam 為 false。

七、JSECharts 主題

JSECharts 提供了多種主題供使用者選擇。以下是一個黑色主題實現代碼：

// 引入黑色主題
import dark from 'echarts/theme/dark';

// 配置項
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};
let myChart = echarts.init(document.getElementById('main'), 'dark');  // 使用黑色主題
myChart.setOption(option);

以上代碼實現了一個黑色主題的折線圖。使用 echarts.init 方法時添加參數 ‘dark’ 即可使用黑色主題。

八、小結

本文對 JSECharts 進行了全面的介紹，從簡單的柱狀圖代碼到複雜的地圖組件，再到主題的使用，都有所涉及。JSECharts 具有易上手、易定製、高效的特點，是一個非常適合數據可視化展示的圖表庫。

原創文章，作者：EHHR，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/149025.html