#30天写标题日记挑战#
快速上手
获取 Apache ECharts
Apache ECharts 支持多种下载方式。您可以在下面的安装教程中看到所有方法。这里，我们以从jsDelivr CDN获取为例，向您展示如何轻松安装它。
https://在www.jsdelivr.com/package/npm/echarts 中选择dist/echarts.js，然后单击保存为echarts.js 文件。
引入 Apache ECharts
在echarts.js保存目录下新建index.html文件，内容如下：
!DOCTYPE htmlhtml head meta charset='utf-8'/!--给大家介绍一下刚刚下载的ECharts文件--script src='echarts.js'/script /head/html 打开这个index.html 一个空白。就会出现空间。不过，无需担心。打开控制台并确保没有错误消息后，您可以继续下一步。
绘制一个简单的图表
在绘制之前，您需要为EChart准备一个定义了高度和宽度的DOM容器。在上一个示例中的/head 之后添加以下内容：
body !-- 准备一个为ECharts 定义宽度和高度的DOM -- div id='main' style='width: 600px;height:400px;'/div/body 然后通过echarts.init 方法创建echarts 初始化实例并传递以下内容价值观： setOption 该方法生成一个简单的直方图。完整的代码如下。
!DOCTYPE htmlhtml head meta charset='utf-8'/titleECharts/title !-- 引入刚刚下载的ECharts 文件-- script src='echarts.js'/script /head body !-- 对于ECharts High 准备宽度在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: ['Sales'] }, xAxis: [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销售', type: '酒吧', data: [5, 20 , 36, 10, 10, 20] } ] }; //使用指定的设置和数据显示图形。 myChart.setOption(option); /script /body/html 第一个图表诞生了。
常用图表类型
柱形图： 基本条形图、堆积条形图、动态排序条形图、渐变瀑布图
折线图3336 0基本折线图、堆积折线图、面积面积图， 平滑曲线图、阶梯线图
饼图： 基本饼图、圆环图南丁格尔图（玫瑰图）
010-69 5 10 33 360
散点图：基本散点图
服务端渲染：
数据处理
项目地址：
https://github.com/apache/echarts
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。
