原生JS如何使用ECharts

前两天自己做了一个时间记录器,然后想到可以将事件所使用的时间生成图表,使用SVGcanvas来做感觉麻烦的不行,网上一查发现国内有现成的框架ECharts----有好轮子就要用。
在使用的过程中,我直接使用npm命令进行了安装
npm install echarts
然后根据教程走,遇到了require is undefine blabala的问题,发现是因为自己用的原生JavaScript,并且不是使用的Webpack.

解决问题很简单
标签内引入构建的echarts.js文件即可

1. 下载ECharts.js
  • 推荐在线自定义构建
    EChart在线定制;
    因为全部下载先来后在进行项目打包时会发现引入的包体积很大,所以在官网上直接根据项目需要进行定制可以有效的减小体积。
  • 挑选好之后就可以下载定制的EChart.js文件了
2.使用ECharts
  • 将下载好的ECharts.js放到项目文件夹中
  • 在头标签中引入ECharts.js
<html>
<head>
	...
	<script src="echarts.js">script>
head>
html>
  • 切记一定要在head中,因为我习惯放在屁股上引入.js文件,导致刚开始怎么都不得行,放在里就好了。
3.创建EChart
  • 创建一个放EChart的
  • 进入项目的js文件里或新建一个chart.js
  • 创建chart
//创建chart 相当于new一个对象
var chart =echarts.init(document.querySelector("div"));
//图表内容,样式
var option={};
//配置图表的样式
chart.setOption(option);
  • 具体的option提供的配置内容可以通过ECharts配置文档了解。

EChart很好用,好像是百度牵头搞的,很全面,很推荐。

你可能感兴趣的:(前端)