4款echarts.js扁平图形统计图表代码
在中,我将分享四款基于echarts.js的扁平化图形统计图表代码。这些图表提供直观的数据展示方式,帮助用户快速理解数据趋势和分布。
1. 条形图:条形图是最常见的统计图表之一,用于比较不同类别之间的数值差异。以下是一个简单的例子,展示了如何使用echarts.js创建条形图:
```javascript
// 引入 echarts 库
var chart = echarts.init(document.getElementById('chart'));
// 定义数据集
var data = [
{ name: 'A', value: 10 },
{ name: 'B', value: 20 },
{ name: 'C', value: 30 }
];
// 配置选项
var option = {
title: { text: '条形图示例' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
visualMap: { max: 100, right: true },
xAxis: [{ data: ['A', 'B', 'C'] }],
yAxis: [],
series: [
{ name: '条形图', type: 'bar', barWidth: 40, data: data }
]
};
// 渲染图表
chart.setOption(option);
132.78KB
文件大小:
评论区