echarts折线图画表格
时间: 2023-07-07 22:43:49 浏览: 59
折线图是 ECharts 中常用的图表类型之一,可以通过以下代码来绘制一个简单的折线图表格:
```html
<!-- 引入 ECharts 的主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 绘制折线图的容器 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '折线图'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20, 5]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
```
以上代码中,我们首先引入了 ECharts 的主文件,然后在页面中创建了一个 id 为 `chart` 的 div 元素作为图表的容器。接着,我们通过调用 `echarts.init` 方法来初始化 ECharts 实例,并将图表容器传递给该方法。
在图表的配置项中,我们定义了图表的标题、提示框、图例、X 轴和 Y 轴等信息,其中 `xAxis` 属性是一个数组,用于设置 X 轴的数据,`yAxis` 属性可以根据需要进行设置,`series` 属性用于设置图表的数据系列。
最后,我们通过调用 `myChart.setOption` 方法将配置项和数据应用到图表中,从而绘制出一个简单的折线图表格。