浏览器引入

可自由选择下载不同版本、不同主题、所需地图数据根据需求进行个性化定制。

刚开始学习和开发环境建议下载源代码版本因为该版本包含了常见的警告和错误提示。

在线定制可以选择需要的图表、坐标系、组件、以及是否压缩等一些其他选项。

也可以通过cdn引入国内bootcdnhttps://www.bootcdn.cn/echarts/

script

srchttps://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js/script模块化引入

npm

包因此体积会比较大如果在项目中对体积要求比较苛刻也可以只按需引入需要的模块。

echarts

{TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent

from

echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer

]);//

echarts.init(document.getElementById(main));

...

Echarts这个框架的配置内容很是多所以不要尝试着把这个框架中的方法都给记住。

Echarts的官方文档介绍十分详细所以使用的时候查看官方文档就可以

https://echarts.apache.org/zh/download.html

基本使用步骤

首先将echarts.js引入,然后为echarts提供一个DOM容器

script

800px;height:400px;/div初始化echarts

echarts

echarts.init(document.getElementById(chart));设置图表的配置项和数据echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化最后把配置方法(setOption)赋值到初始化图形中。

//配置数据选项

myChart.setOption(options);绘制一个简单的图表

!DOCTYPE

srcecharts.js/script/headbody!--

ECharts

echarts.init(document.getElementById(main));//

option

使用刚指定的配置项和数据显示图表。

myChart.setOption(option);/script/body

/html写在最后