echart画图怎么导入数据
时间: 2023-11-22 09:48:26 浏览: 28
在echarts中导入外部数据可以通过使用ajax来实现。具体步骤如下:
1. 引入jQuery库和echarts库
```html
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
```
2. 使用ajax获取数据
```javascript
$.ajax({
type: "GET",
url: "data.csv", // 数据文件的路径
dataType: "text",
success: function(data) {
processData(data);
}
});
```
3. 处理数据
```javascript
function processData(allText) {
var allLines = allText.split(/\r\n|\n/);
var headers = allLines[0].split(',');
var lines = [];
for (var i = 1; i < allLines.length; i++) {
var data = allLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
}
}
drawChart(lines);
}
```
4. 绘制图表
```javascript
function drawChart(lines) {
var option = {
title: {
text: '柱状图的绘制'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: lines.map(function(item) {
return item[0];
})
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: lines.map(function(item) {
return item[1];
})
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
}
```
其中,data.csv是数据文件的路径,lines是处理后的数据,drawChart函数用于绘制图表。