ECharts学习总结(五):echarts选项概览

注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E9%80%89%E9%A1%B9

option

图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项

名称 描述
{color} backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明
{Array} color 数值系列的颜色列表,(详见color),可配数组,eg:[‘#87cefa‘, ‘rgba(123,123,123,0.5)‘,‘...‘],当系列数量个数比颜色列表长度大时将循环选取
{boolean} renderAsImage 非IE8-支持渲染为图片,(详见renderAsImage
{boolean} calculable 是否启用拖拽重计算特性,默认关闭,(详见calculable,相关的还有 calculableColorcalculableHolderColornameConnectorvalueConnector
{boolean} animation 是否开启动画,默认开启,(详见 animation,相关的还有 addDataAnimationanimationThresholdanimationDurationanimationDurationUpdateanimationEasing
{Object} timeline 时间轴(详见timeline),每个图表最多仅有一个时间轴控件
{Object} title 标题(详见title),每个图表最多仅有一个标题控件
{Object} toolbox 工具箱(详见toolbox),每个图表最多仅有一个工具箱
{Object} tooltip 提示框(详见tooltip),鼠标悬浮交互时的信息提示
{Object} legend 图例(详见legend),每个图表最多仅有一个图例,混搭图表共享
{Object} dataRange 值域选择(详见dataRange),值域范围
{Object} dataZoom 数据区域缩放(详见dataZoom),数据展现范围选择
{Object} roamController 漫游缩放组件(详见roamController),搭配地图使用
{Object} grid 直角坐标系内绘图网格(详见grid
{Array | Object} xAxis 直角坐标系中横轴数组(详见xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴
{Array | Object} yAxis 直角坐标系中纵轴数组(详见yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴
{Array} series 驱动图表生成的数据内容(详见series),数组中每一项代表一个系列的特殊选项及数据
时间: 2024-11-19 22:49:53

ECharts学习总结(五):echarts选项概览的相关文章

ECharts学习总结(一):ECharts的第一个图表

在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1.新建一个echarts.html文件.为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title>

ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项

一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript"></script> 二.EChar

Echarts 学习系列(3)-Echarts动态数据交互

写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 家庭版 开发工具:Visual Studio 2019 数据库:MySQL 数据连接工具:Navicat Premium 使用技术:.Net Mvc+Dapper 创建数据库 //创建 sys_visitoronhour DROP TABLE IF EXISTS `sys_visitoronhour

ECharts学习(2)--饼状图之南丁格尔图

1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所以也不需要xAxis,yAxis. 2.itemStyle都会有normal和emphasis两个选项,normal选项是正常展示下的样式,emphasis是鼠标 hover 时候的高亮样式.也可以把阴影的效果设置在hover的时候. 3.背景色是全局的,所以直接在 option 下设置backgr

echarts学习总结

ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为ECharts准备具备宽高的DOM容器 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图 //基于准备好的dom,初始化echarts实例var myChart=echarts.init(document.getElementB

学习笔记:ECharts

ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. http://echarts.baidu.com/doc/doc.html 文档 http://echarts.baidu.com/doc/example

ECharts学习(4)--仪表盘

1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串),然后可以设置data属性用来表示指针的指向.下面我们可以设置value的值为每隔2秒就随机生成一个数,然后就可以模拟显示指针的动态显示. 2. 代码展示: <!DOCTYPE html> <html> <head> <meta charset="UTF-

Echarts学习笔记

1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="content-tit">本校各年级教材费用</h2> <div class="chart-box clearfix"> <div class="zhu-img-1" id="Bar_BookFee_RXNJ"

ECharts学习(1)--简单图表的绘制

1.获取ECharts 官网 下载:http://echarts.baidu.com/download.html 2.在html页面中引入ECharts文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts练习</title> <script type="text/javascript" src=&quo