echarts渲染数据

最新推荐文章于 2025-10-01 04:42:03 发布

原创最新推荐文章于 2025-10-01 04:42:03 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

一、数据组成要素

数据集（dataset）：统一管理数据的组件

维度（dimension）：数据的属性/字段

度量（measure）：数据的数值部分

系列（series）：一组数值及其映射的视觉通道

二、echarts的基础使用操作

步骤一、准备一个HTML容器

步骤二、引入ECharts库

步骤三、初始化图表

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

步骤四、准备数据

var xData = ['苹果', '香蕉', '橙子', '西瓜']; // X轴数据

var yData = [50, 30, 40, 60]; // Y轴数据

步骤五、配置图标选项

var option = {
  title: { text: '水果销量' },    // 标题
  xAxis: { data: xData },        // X轴配置
  yAxis: {},                     // Y轴配置
  series: [{                     // 数据系列
    name: '销量',
    type: 'bar',                 // 柱状图
    data: yData                  // 系列数据
  }]
};

步骤六、渲染图标

myChart.setOption(option);

三、三种常见图标的数据格式

1、柱状图/折线图

// 数据格式：两个数组分别对应X轴和Y轴
var option = {
  xAxis: { data: ['周一', '周二', '周三'] },
  series: [{ data: [10, 20, 30] }]  // 数值数组
};

2、饼图

// 数据格式：对象数组，包含name和value
var option = {
  series: [{
    type: 'pie',
    data: [
      {name: '苹果', value: 50},
      {name: '香蕉', value: 30}
    ]
  }]
};

注：

series: [{
  type: 'bar',
  data: [
    {value: 50, itemStyle: {color: 'red'}},
    {value: 30, itemStyle: {color: 'blue'}}
  ]
}]

上述代码可以用来修改饼状图的各部分的颜色，value的值表示所占的整个圆饼的分量

3.散点图

// 数据格式：二维数组，每个点包含[x,y]坐标
var option = {
  series: [{
    type: 'scatter',
    data: [[10,20], [15,30], [20,25]]
  }]
};

四、实用技巧

1、动态更新数据

// 修改数据后重新渲染
yData = [30, 40, 50, 20];  // 更新数据
myChart.setOption({
  series: [{ data: yData }]
});

2、显示数据标签

series: [{
  type: 'bar',
  data: yData,
  label: {          // 添加这组配置
    show: true,      // 显示标签
    position: 'top'  // 标签位置
  }
}]

3、处理空数据

// 用null或'-'表示空数据
data: [10, null, '-', 30]