Echarts使用总结
-
-
-
-
- 一、开始使用
- 二、项目实践(React)
-
- 使用echarts-for-react插件可以在React中调用echarts接口直接渲染出Echarts图表,只要传入相关的参数和数据即可。[插件地址](https://www.npmjs.com/package/echarts-for-reacthttps://www.npmjs.com/package/echarts-for-react)
- 简单使用
- 常用API:
- title(标题)
- legend(图例组件)
- grid(在一个容器内画多个图形时,类似设置间隔)
- xAxis(x轴,横向坐标系)
- 造孽啊,大家自己去看吧🌚([链接](https://echarts.apache.org/zh/option.html#title))
- 绑定事件
-
-
-
一、开始使用
- 下载对应
echarts.js
,引用官网原文:在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echarts.js 文件 - 在html中引入。
- 为 echarts准备一个定义了高宽的 DOM 容器。在刚才的例子
</head>
之后,添加。 - 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。
- 完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="echarts.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("main")) // 指定图表的配置项和数据 var option = { title: { text: "ECharts 入门示例", }, tooltip: { }, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫",