JSECharts：高效、易用的图表库

发布时间：2023-05-19

一、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}<br>{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 具有易上手、易定制、高效的特点，是一个非常适合数据可视化展示的图表库。

推荐文章