echarts基本使用
时间: 2023-06-22 13:20:40 浏览: 91
好的,以下是 echarts 的基本使用方法:
1. 下载并引入 echarts 库文件
在网站中引入 echarts 库文件,可以通过官网下载或者使用 CDN 引用。
2. 初始化 echarts 实例
使用以下代码初始化一个 echarts 实例:
```
var myChart = echarts.init(document.getElementById('main'));
```
其中,`main` 为 HTML 页面中一个空的 `div` 元素,用于嵌入 echarts 图表。
3. 配置图表选项
使用以下代码设置图表的基本配置选项:
```
var option = {
title: {
text: '示例图表'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
```
其中,`title` 为图表标题,`tooltip` 为提示框,`legend` 为图例,`xAxis` 和 `yAxis` 分别为 x 轴和 y 轴的数据,`series` 为数据系列。
4. 渲染图表
使用以下代码将配置好的图表渲染到页面上:
```
myChart.setOption(option);
```
以上就是 echarts 的基本使用方法,您可以根据自己的需求进行配置和调整。
阅读全文