Apache ECharts图表类型以及示例代码（附：Apache ECharts 可视化函数库）丨本际云推荐

ApacheECharts图表类型以及示例代码（附：ApacheECharts可视化函数库）

ApacheECharts是一款基于JavaScript的可视化库，它在图表类型、交互设计以及可扩展性方面具备较高的性能。下面将介绍ApacheECharts提供的图表类型以及对应的示例代码，同时附有ApacheECharts可视化函数库，让你轻松实现各种可视化需求。

1.折线图（Line Chart）

折线图是一种常见的图表类型，通常用于展示时间序列或连续变量的趋势。下面是一个简单的折线图示例：

var myChart = echarts.init(document.getElementById('chart'));


  var 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'
    }]
  };

myChart.setOption(option);

2.柱状图（Bar Chart）

柱状图通常用于展示不同类别之间的比较，比如不同时间点、不同地区、不同产品等。下面是一个简单的柱状图示例：

var myChart = echarts.init(document.getElementById('chart'));


  var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
  };

myChart.setOption(option);

3.饼图（Pie Chart）

饼图通常用于展示数据占比，如市场份额、人口构成等。下面是一个简单的饼图示例：

var myChart = echarts.init(document.getElementById('chart'));


  var option = {
    series: [{
        type: 'pie',
        data: [
            {value: 335, name: 'Chrome'},
            {value: 310, name: 'Firefox'},
            {value: 234, name: 'Safari'},
            {value: 135, name: 'IE'},
            {value: 1548, name: 'Other'}
        ]
    }]
  };

myChart.setOption(option);

4.散点图（Scatter Chart）

散点图通常用于展示两个连续变量之间的关系，如身高和体重之间的关系、温度和销售量之间的关系等。下面是一个简单的散点图示例：

var myChart = echarts.init(document.getElementById('chart'));


  var option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
  };

myChart.setOption(option);

5.雷达图（Radar Chart）

雷达图通常用于展示多个指标之间的关系，如某个地区的人均收入、教育水平、生活质量等。下面是一个简单的雷达图示例：

var myChart = echarts.init(document.getElementById('chart'));


  var option = {
    radar: {
        indicator: [
            {name: '销售', max: 6500},
            {name: '管理', max: 16000},
            {name: '信息化', max: 30000},
            {name: '客服', max: 38000},
            {name: '研发', max: 52000},
            {name: '市场', max: 25000}
        ]
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
  };

myChart.setOption(option);

ApacheECharts可视化函数库

除了上述图表类型，ApacheECharts还提供了一系列可视化函数库，用于实现各种可视化需求。以下是一部分例子：

// 获取数据的最大值 var data = [20, 30, 50, 10, 60]; var max = echarts.util.max(data); // 60


  // 获取数据的最小值
  var data = [20, 30, 50, 10, 60];
  var min = echarts.util.min(data); // 10
  // 数组去重
  var data = [2, 3, 2, 1, 4, 3];
  var uniqueData = echarts.util.unique(data); // [2, 3, 1, 4]
  // 数字格式化
  var number = 1234567.89;
  var formattedNumber = echarts.format.number(number, '0,0.00'); // 1,234,567.89

// 日期格式化 var date = new Date(); var formattedDate = echarts.format.formatTime('yyyy-MM-dd', date); // 2022-01-01

以上是ApacheECharts提供的部分图表类型和可视化函数库，希望能对你的可视化开发工作有所启发。

ApacheECharts是一个基于JavaScript的可视化图表库，它提供了各种图表类型和丰富的交互功能，可以用于构建数据驱动的可视化web应用程序。下面我们来介绍一些主要的图表类型和示例代码。

1.折线图(Line Chart)

折线图是一种基本的图表类型，对于呈现数据的变化趋势非常有用。下面是一个简单的折线图示例：

let chart = echarts.init(document.getElementById('myChart'));
let option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }]
};
chart.setOption(option);

2.柱状图(Bar Chart)

柱状图是一种常见的图表类型，用于对比不同类别的数据大小。下面是一个简单的柱状图示例：

let chart = echarts.init(document.getElementById('myChart'));
let option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
};
chart.setOption(option);

3.饼图(Pie Chart)

饼图用于展示数据在总量中的比例，是一种非常直观的图表类型。下面是一个简单的饼图示例：

let chart = echarts.init(document.getElementById('myChart'));
let option = {
  series: [{
    name: '访问来源',
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};
chart.setOption(option);

4.散点图(Scatter Plot)

散点图用于显示两个数值变量之间的关系，通常用于检测数据的相关性。下面是一个简单的散点图示例：

let chart = echarts.init(document.getElementById('myChart'));
let option = {
  xAxis: {},
  yAxis: {},
  series: [{
    symbolSize: 20,
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ],
    type: 'scatter'
  }]
};
chart.setOption(option);

5.雷达图(Radar Chart)

雷达图用于显示多个变量之间的关系，每个变量在图表中表示为一个轴线。下面是一个简单的雷达图示例：

let chart = echarts.init(document.getElementById('myChart'));
let option = {
  radar: {
    indicator: [
     { name: '销售', max: 6500},
     { name: '管理', max: 16000},
     { name: '技术', max: 30000},
     { name: '客服', max: 38000},
     { name: '研发', max: 52000},
     { name: '市场', max: 25000}
    ]
  },
  series: [{
    type: 'radar',
    data : [
      {
        value : [4300, 10000, 28000, 35000, 50000, 19000],
        name : '预算'
      },
      {
        value : [5000, 14000, 28000, 31000, 42000, 21000],
        name : '实际开销'
      }
    ]
  }]
};
chart.setOption(option);