ECharts 配置语法
ECharts 是一个基于 JavaScript 的开源图表库，它能够轻松地创建各种类型的交互式图表和数据可视化。
一、基本配置
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(options);
其中，myChart 是 echarts.init 初始化出来的 ECharts 实例，options 是配置项。
二、常用配置项
1.标题
title: {
text: 'xxx', // 标题文本
left: 'center' // 居中显示
}
2.图例
legend: {
data: ['Apples', 'Oranges'],
show: true
}
- xAxis 和 yAxis
xAxis: {
type: 'category', // 类目轴
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value' // 数值轴
}
- Series
series: [{
name: 'Apples',
type: 'bar', // 柱状图
data: [5, 20, 36, 10, 10, 20]
}, {
name: 'Oranges',
type: 'bar',
data: [15, 26, 10, 25, 15, 20]
}]
- Tooltip
tooltip: {
trigger: 'axis' // 坐标轴触发
}
三、实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'Fruits Sales'
},
tooltip: {},
legend: {
data: ['Apples', 'Oranges']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Apples',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}, {
name: 'Oranges',
type: 'bar',
data: [15, 26, 10, 25, 15, 20]
}]
};
myChart.setOption(option);
以上代码可以生成一张简单的柱状图，其中数据和样式可以根据需求自行修改。除了以上常用配置项外，ECharts 还提供了更多的配置项，可以在官方文档中查看详细介绍。