利用ECharts和js实现数据可视化的代码
时间: 2024-05-14 09:16:06 浏览: 8
以下是一个简单的数据可视化示例,使用ECharts和JavaScript实现:
HTML代码:
```
<div id="chart" style="width: 600px;height:400px;"></div>
```
JavaScript代码:
```
// 引入echarts库
import echarts from 'echarts';
// 获取DOM元素
const chartDom = document.getElementById('chart');
// 初始化echarts实例
const myChart = echarts.init(chartDom);
// 准备数据
const data = {
categories: ['Apple', 'Banana', 'Orange', 'Watermelon', 'Pear'],
data: [
{name: 'Apple', value: 60},
{name: 'Banana', value: 40},
{name: 'Orange', value: 80},
{name: 'Watermelon', value: 70},
{name: 'Pear', value: 55}
]
};
// 配置项
const option = {
title: {
text: 'Fruit Sales'
},
tooltip: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: data.data
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这个示例展示了使用ECharts和JavaScript创建一个简单的柱状图。首先,我们引入ECharts库,然后获取HTML中的DOM元素。接下来,我们准备数据和配置项,然后使用`echarts.init()`方法来初始化ECharts实例。最后,我们使用`setOption()`方法将数据和配置项传递给ECharts实例,然后展示图表。