• ECharts教程
  • ECharts简介
  • ECharts安装
  • 第一个ECharts实例
  • ECharts基础概念
  • ECharts六大组件及部分选项属性概述
  • title组件详解
  • tooltip详解(1)——概述
  • tooltip详解(2)——trigger
  • tooltip详解(3)——formatter
  • tooltip详解(4)——位置设置
  • legend—代码注释
  • legend—概述、常用属性及解析
  • legend—修改图标图例的形状及大小
  • legend—单独设置图例及其位置
  • legend—使用自定义图片
  • toolbox—概述及其主要属性
  • Toolbox—实例1_功能展示
  • toolbox—实例2_工具栏的添加及设置
  • toolbox—增加自定义图标和事件
  • toolbox代码及详解注释
  • dataZoom概述、dataZoomSelect、dataZoomInside
  • dataZoom-slider概述及其主要属性
  • dataZoom代码实例及对应注释
  • datazoom使用方法及具体使用实例
  • visualMap概述
  • visualMap代码实例及对应注释
  • 图表类型概述
  • 饼状图
  • 饼状图图代码实例及其注释详解
  • 南丁格尔图
  • 柱状/条形图
  • 堆叠柱状图
  • 横向柱状图与纵向柱状图
  • echarts改变柱状图每个柱子的颜色
  • 极坐标系下的堆叠柱状图(多重环形图)
  • 柱形图代码实例及其注释详解
  • 雷达图
  • 雷达图代码实例
  • 雷达图及其坐标系实例及注释
  • 基本折线图
  • 基本面积图
  • 平滑折线图
  • 折线图代码实例及注释
  • 旭日图
  • 旭日图的颜色等样式调整
  • 日历图
  • 散点图
  • 主题
  • 调色盘
  • 其他样式设置
  • 异步载数据
  • 数据的动态更新
  • 数据集
  • 数据到图形的映射(二维)
  • 数据到图形的映射(多维)
  • ECharts 事件处理
  • 鼠标事件
  • 组件交互的行为事件
  • 实现拖拽功能
  • 富文本标签—概述
  • 富文本标签—样式
  • 特殊效果
  • 组件定位及布局
  • 移动端自适应
  • <!-- 为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 = { xAxis: {}, yAxis: {}, title:{ text:'散点图 树懒课堂', series: [{ symbolSize: function(data){ return(data[2]); data: [ [10.0, 8.04,30], [8.0, 6.95,15], [13.0, 7.58,52], [9.0, 8.81,13], type: 'scatter' // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> 日历图 主题